html5 Canvas基础
2016-09-08 22:31
211 查看
这两天接触了Canvas标签,对所学的东西做了一个总结,分享给大家,有不对的地方,请指出。
Canvas,画布是一个很强大的标签,它可以实现的好多炫酷的效果,在这只写一些基础:
首先,canvas是一个行标签,他的宽高都是在书写标签时,直接写在属性里的,如果用css样式设置宽高,会令画布拉伸,造成图像失真。Canvas是的背景色默认是透明色,为了能够看到Canvas的位置,可以在css中加一个border或者box-shadow,那样我们就可以知道它所在的位置了。
html标签
坐标系
在学习Canvas的js部分之前,在重申一下坐标系的问题;我们在学习css的2d与3d变换时应该知道;在我们的浏览器中有一个虚拟的坐标系,它是如下图所示的,在进行图形变换时,坐标系是跟随图形的改变而改变的。
在Canvas中坐标系的原点在Canvas画布的左上角位置:和下图一样,水平向右代表x轴正方向,垂直向下是y轴正方向,不过Canvas到目前为止还没有z轴,因为它还不能进行3d变换。
Canvas的坐标系是可以移动和旋转的;在后面我们会提到:
在js中首先要获取canvas标签,还有getContext(“2d”):获取上下文,这样我们感觉到很别扭,我们可以理解为canvas画布的画笔。
js中获取Canvas标签
Canvas在绘制过程中有两种绘图方式:1.轨迹。 2.图形
注意:我感觉Canvas标签在书写代码时顺序是非常苛刻的,在书写中注意代码的顺序:beginPath()代表一个绘制的开始,每进行一次绘制时,最好写先写一遍这行代码:否则,再次绘制时样式会影响第一次绘制时设置的样式;
绘制线段:
效果图:
绘制渐变色
渐变色的绘制有两种方式:1.线性渐变 2.径向渐变
这里暂时先说一下线性渐变,径向渐变在绘制圆形的时候在涉及:
效果图:
绘制矩形
ctx.strokeStyle; 与ctx.strokeRect();和ctx.fillStyle;与ctx.fillRect();都是成对出现的,不可交替使用,颜色不设置时默认为黑色,strokeRect();绘制矩形的外边框,即轨迹
fillRect(); 绘制矩形的内部区域,即图形
效果图:
绘制园形与径向渐变
效果图:
Canvas绘制文本
在绘制文本的时候可以用渐变色;
效果图:
Canvas变换:平移, 缩放, 旋转
这是未设置任何变换之前的代码与效果:
效果图:
这是设置了平移变换之后的代码与效果图:
效果图:
这是设置了平移,旋转变换的代码与效果图:
效果图:
这是设置了平移,旋转, 缩放后的代码与效果图
效果图:
图形移动
图形的移动的其实是不断清空画布,并且重新再下一位置绘制图形的过程,只不过频率太快使我们看到的效果就好像动画一样;
效果图:(图片中的小球应该是运动的):
贝塞尔曲线
关于贝塞尔曲线的原理,请看:
http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
效果图:
效果图:
Canvas,画布是一个很强大的标签,它可以实现的好多炫酷的效果,在这只写一些基础:
首先,canvas是一个行标签,他的宽高都是在书写标签时,直接写在属性里的,如果用css样式设置宽高,会令画布拉伸,造成图像失真。Canvas是的背景色默认是透明色,为了能够看到Canvas的位置,可以在css中加一个border或者box-shadow,那样我们就可以知道它所在的位置了。
html标签
<!--注:默认宽高300,150,css中设置宽高会在默认基础上拉伸,会引起失真,所以在属性中设置--> <canvas id="myCanvas" width="500" height="500"></canvas>
坐标系
在学习Canvas的js部分之前,在重申一下坐标系的问题;我们在学习css的2d与3d变换时应该知道;在我们的浏览器中有一个虚拟的坐标系,它是如下图所示的,在进行图形变换时,坐标系是跟随图形的改变而改变的。
在Canvas中坐标系的原点在Canvas画布的左上角位置:和下图一样,水平向右代表x轴正方向,垂直向下是y轴正方向,不过Canvas到目前为止还没有z轴,因为它还不能进行3d变换。
Canvas的坐标系是可以移动和旋转的;在后面我们会提到:
在js中首先要获取canvas标签,还有getContext(“2d”):获取上下文,这样我们感觉到很别扭,我们可以理解为canvas画布的画笔。
js中获取Canvas标签
/*只要运用canvas标签吗,首先必须先书写以下代码*/ //获取Canvas标签对象 var myCanvas = document.getElementById("myCanvas"); //获取canvas标签内部自带的画笔,getContext:获取上下文 var ctx = myCanvas.getContext("2d");
Canvas在绘制过程中有两种绘图方式:1.轨迹。 2.图形
注意:我感觉Canvas标签在书写代码时顺序是非常苛刻的,在书写中注意代码的顺序:beginPath()代表一个绘制的开始,每进行一次绘制时,最好写先写一遍这行代码:否则,再次绘制时样式会影响第一次绘制时设置的样式;
绘制线段:
ctx.beginPath(); //开始绘制轨迹 ctx.moveTo(20, 20); //设置线段绘制的起始点。可以理解为将画笔移动到起始的位置 ctx.lineTo(20, 200); //设置线段的终止位置。可以理解为画线到的位置 ctx.lineWidth = 30; //设置线段的宽度 ctx.strokeStyle = "red"; //设置颜色 ctx.stroke(); //以轨迹方式绘制
效果图:
绘制渐变色
渐变色的绘制有两种方式:1.线性渐变 2.径向渐变
这里暂时先说一下线性渐变,径向渐变在绘制圆形的时候在涉及:
ctx.beginPath(); //开始绘制轨迹 ctx.moveTo(20, 20); //设置线段绘制的起始点。可以理解为将画笔移动到起始的位置 ctx.lineTo(20, 200); //设置线段的终止位置。可以理解为画线到的位置 ctx.lineTo(200, 20); //ctx.lineTo(20, 20); //因为在绘制一个三角形,当出现ctx.closePath();时,代表使绘制闭合的轨迹,所以这行代码没有必要了 ctx.lineWidth = 30; //设置宽度 //绘制渐变色 /* createLinearGradient();四个参数分别对应的就开始渐变的位置坐标和结束渐变的位置坐标,四个参数决定整个渐变的方向。 addColorStop(); 参数1: 代表对应颜色的位置值[0, 1]; 参数2对应的是一个具体的颜色,是一个字符串类型。 */ var grans = ctx.createLinearGradient(20, 200, 200, 20); //设置起始点和终止点的坐标, grans.addColorStop(0, "red"); //渐变对象:渐变起始位置和渐变颜色 grans.addColorStop(0.5, "yellow"); grans.addColorStop(0.9, "green") 4000 ; ctx.strokeStyle = grans; //设置颜色 ctx.lineCap = "square"; //线段的两端的样式:square:矩形; round:圆形; butt:默认 ctx.closePath(); //使整个轨迹的绘制形成一个封闭的轨迹 ctx.lineJoin = "bevel"; //两条线的相交样式: bevel:斜角;round:圆角;miter:默认尖角 ctx.stroke(); //开始绘制线段
效果图:
绘制矩形
ctx.strokeStyle; 与ctx.strokeRect();和ctx.fillStyle;与ctx.fillRect();都是成对出现的,不可交替使用,颜色不设置时默认为黑色,strokeRect();绘制矩形的外边框,即轨迹
fillRect(); 绘制矩形的内部区域,即图形
var grans1 = ctx.createLinearGradient(200, 200, 300, 300); ctx.lineWidth = 30; grans1.addColorStop(0, "red"); grans1.addColorStop(0.5, "blue"); grans1.addColorStop(1, "yellow"); // ctx.strokeStyle = grans1; // ctx.strokeRect(200, 200, 100, 100); //开始绘制起始地点坐标和宽高 ctx.fillStyle = grans1; ctx.fillRect(100, 100, 300, 300); //开始绘制矩形: 开始绘制起始地点坐标和宽高 /* strokeRect();绘制矩形的外边框 fillRect(); 绘制矩形的内部区域 */
效果图:
绘制园形与径向渐变
ctx.beginPath(); /*这是绘制圆形的主要部分:ctx.arc()有七个参数:参数1,2:圆心位置的横纵坐标;参数3:圆的半径;参数4,5:起点与终点的弧度(Math.PI相当于数学的π,也就是:180度对应的弧度,通常绘制圆时给起点的弧度为0);参数的6:可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。默认为false*/ ctx.arc(250, 250, 200, 0, 2 * Math.PI, false); /*径向渐变:原理就是定义两个圆:有小圆向大圆的方向进行渐变。故ctx.createRadialGradient()中有6个参数:参数1,2:代表内圆的圆心坐标;参数3:代表内圆的半径(通常设置为0);参数4,5代表外圆的圆心坐标;参数6:代表外圆的半径;*/ var grans3 = ctx.createRadialGradient(250, 250, 0, 250, 250, 200); grans3.addColorStop(0, "red"); grans3.addColorStop(0.5, "blue"); grans3.addColorStop(1, "green"); ctx.lineTo(250, 250) ctx.closePath(); ctx.fillStyle = grans3; ctx.fill();
效果图:
Canvas绘制文本
在绘制文本的时候可以用渐变色;
var grans4 = ctx.createLinearGradient(200, 0, 400, 0); grans4.addColorStop(0, "red"); grans4.addColorStop(0.4, "yellow"); grans4.addColorStop(0.8, "blue"); ctx.font = "50px stKaiTi" ctx.fillStyle = grans4; //设置文字的阴影 ctx.shadowOffsetX = 5; //设置x方向的偏移 ctx.shadowOffsetY = 5; //设置y方向的便宜 ctx.shadowColor = "aqua"; //设置偏移的颜色 ctx.shadowBlur = 10; //模糊程度 ctx.fillText("孙行者", 200, 200, 200);
效果图:
Canvas变换:平移, 缩放, 旋转
这是未设置任何变换之前的代码与效果:
ctx.fillStyle = "red"; ctx.fillRect(40, 40, 100, 100); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 100, 100);
效果图:
这是设置了平移变换之后的代码与效果图:
ctx.fillStyle = "red"; ctx.fillRect(40, 40, 100, 100); //平移操作只会影响后面图形的位置,但是不会影响之前的图形位置 ctx.translate(70, 70); //平移分别设置x,y方向的平量 ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 100, 100);
效果图:
这是设置了平移,旋转变换的代码与效果图:
ctx.fillStyle = "red"; ctx.fillRect(40, 40, 100, 100); //平移操作只会影响后面图形的位置,但是不会影响之前的图形位置 ctx.translate(70, 70); //平移分别设置x,y方向的平量 // 旋转是对坐标系的旋转 ctx.rotate(Math.PI / 4); //旋转:设置对应的旋转角度,注意是弧度 ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 100, 100);
效果图:
这是设置了平移,旋转, 缩放后的代码与效果图
var centerX = 10, centerY = 10; var timer = setInterval(function(){ ctx.beginPath(); //清除画布 ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); //用来清除Canvas标签上面的所有内容 ctx.arc(centerX, centerY, 10, 0, Math.PI*2, false); ctx.closePath(); ctx.fillStyle = "red"; ctx.fill(); centerX += 1; centerY += 1; }, 10);
效果图:
图形移动
图形的移动的其实是不断清空画布,并且重新再下一位置绘制图形的过程,只不过频率太快使我们看到的效果就好像动画一样;
var centerX = 10, centerY = 10; var timer = setInterval(function(){ ctx.beginPath(); //清除画布:ctx.clearRect()中有4个参数:参数1,2:代表清除的起点坐标:参数3,4代表清除的终点坐标;两个点的坐标公共一个矩形;这个矩形范围内的所有内容会全部清空。 ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); //用来清除Canvas标签上面的所有内容 ctx.arc(centerX, centerY, 10, 0, Math.PI*2, false); ctx.closePath(); ctx.fillStyle = "red"; ctx.fill(); centerX += 1; centerY += 1; }, 10);
效果图:(图片中的小球应该是运动的):
贝塞尔曲线
关于贝塞尔曲线的原理,请看:
http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
ctx.beginPath(); ctx.moveTo(20, 200); //二次贝塞尔曲线 ctx 9913 .quadraticCurveTo(110, 20, 200, 200); //中点坐标和终点坐标 ctx.strokeStyle = "blue"; ctx.stroke();
效果图:
ctx.beginPath(); ctx.moveTo(20, 200); //三次贝塞尔曲线 ctx.bezierCurveTo(80,20, 140,400, 200,200); //前两个点的x,y坐标,终点的x,y坐标 ctx.strokeStyle = "blue"; ctx.stroke();
效果图:
相关文章推荐
- html5 canvas基础特性
- HTML5 Canvas 基础 一
- 使用HTML5 canvas做地图(1)基础知识
- HTML5基础,第4部分:点睛之笔Canvas (2)
- HTML5基础,第4部分:点睛之笔Canvas (1)
- HTML5基础,第4部分:点睛之笔Canvas
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- HTML5 canvas 动画基础自学分享 2
- HTML5 canvas 动画基础自学分享 1
- [HTML5 Canvas学习] 基础知识
- HTML5基础,第4部分:点睛之笔Canvas
- HTML5 Canvas实践(一)Canvas 基础知识
- HTML5基础,第4部分:点睛之笔Canvas
- html5基础--canvas标签元素
- html5之Canvas绘图工具基础介绍
- HTML5 Canvas 基础API和实例
- HTML5 之 Canvas --- 01、Canvas基础
- HTML5 Canvas 基础开发教程 总结
- 小强的HTML5移动开发之路(6)——Canvas图形绘制基础
- HTML5 Canvas 基础API和实例