- Canvas元素负责在页面中设定一个区域，然后就可以通过JavaScript 动态地在这个区域中绘制图形
- 要使用<canvas>元素，必须先设置其width 和height 属性，指定可以绘图的区域大小。
- 在body中插入canvas标签，并指定height和width
1 <canvas id='drawing' width="100" height="100">Drawing Something</canvas>
2. 通过getContext( )取得绘图上下文对象的引用
3. 用toDataURL( )方法导出在canvas元素上绘制的图像，传入的参数为图像的MIME格式，即如果导出jpeg格式，就传入image/jpeg，如果导出png格式，就传入image/png
- 2D上下文的描边和填充
- 首先通过getContext方法获得2d上下文，然后对这个元素进行操作
1 var drawing=document.getElementById('drawing'); 2 if(drawing.getContext){ 3 var context=drawing.getContext("2d"); 4 context.strokeStyle="red"; 5 context.fillStyle="#0000ff"; 6 }
strokeStyle是描边颜色，fillstyle是填充颜色
2. 绘制矩形
-
- fillRect( )绘制矩形，通过fillStyle来确定颜色
- strokeRect( )描边一个矩形，通过fillStyle来确定颜色
- 描边的线条可以通过lineWidth控制
- lineCap控制线条末端形状，参数可以为butt, round或者square
- lineJoin属性控制线条相交方式，round, bevel或者miter
- clearRect( )用于清除画布上的矩形区域
3. 绘制路径
-
-
要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径
-
画圆的路径，则是从X轴的正方向开始绘制。一定要注意路径的位置，不然会出现多余的线条
-
1 //绘制时钟图形 2 context.beginPath();//开始绘制 3 context.arc(100,100,99,0,2*Math.PI,false);//画个外圈 4 context.moveTo(195,100);//把路径移到195，100位置为下次绘制做准备 5 context.arc(100,100,95,0,2*Math.PI,false);//画个内圈 6 context.moveTo(100,100)//为绘制指针做准备 7 context.lineTo(100,15)//画个分针 8 context.moveTo(100,100)//移回去 9 context.lineTo(35,100)//画个时针 10 context.stroke()//描边
4. 绘制文本
-
- font可以用CSS中的方式来定制文本风格
- textAlign表示文本对齐方式，建议使用start, center和end
- textBaseLine表示文本的基线
- fillText和strokeText的中，fillText用的更多一些。两者都是传入三个参数，第一个参数是绘制的本文，第二个和第三个是文本位置的x,y坐标
1 //绘制文本 2 context.fillStyle="#161515" 3 context.font="10px bold Arial Black"; 4 context.textAlign="center";//这里对其的方法可以参照下图 5 context.textBaseLine="middle"; 6 context.fillText("12",100,15)
如果是center，那么x起点在正中间，如果是left（start）那么在左边，如果是right(end)那么在右边
-
- 同理，baseline也是可以调整Y轴上的对齐方式
5. 变换
-
- rotate(angle)，图像围绕坐标原点旋转一定角度
- scale(scaleX, scaleY)，缩放图像，在x 方向乘以scaleX，在y 方向乘以scaleY。scaleX和scaleY 的默认值都是1.0。
-
translate(x, y)：将坐标原点移动到(x,y)。执行这个变换之后，坐标(0,0)会变成之前由(x,y)表示的点
-
transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改变换矩阵，方式是乘以如下矩阵。
m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1 -
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：将变换矩阵重置为默认状态，然后再调用transform()。
-
连续调用save()可以把更多设置保存到栈结构中，之后再连续调用restore()则可以一级一级返回
6. 绘制图像
-
- drawImage可以获得html中的图片，并将其按照比例放在某个坐标上
1 var image=document.img[0]//取得第一个img 2 context.drawImage(image, 50，10，20，30）//图像放在坐标（50，10）的位置，并按照20*30的比例缩放
7. 阴影
-
- shadowColor设置阴影颜色
- shadowOffsetX/Y设置X/Y轴的偏移量
- shadowBlur模糊的像素
- 阴影的绘制一定是在绘制图形之前才有效果！
8.渐变
-
- 调用createLinearGradient()方法，接收4 个参数：起点的x 坐标、起点的y 坐标、终点的x 坐标、终点的y 坐标
-
名字很好记，就是线性的渐变
-
下一步就是使用addColorStop()方法来指定色标，色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字
例如
var gradient = context.createLinearGradient(30, 30, 70, 70);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
1 //渐变 2 // var gradient=context.createLinearGradient(30,30,70,70); 3 var gradient=context.createRadialGradient(55, 55, 10, 55, 55, 30);//起点的圆心和半径，终点的圆心和半径 4 gradient.addColorStop(0,"white"); 5 gradient.addColorStop(1,"black"); 6 context.fillStyle=gradient;
9. 模式
-
- 通过getImageData( )取得原始图像数据，这个方法接收4 个参数：要取得其数据的画面区域的x 和y 坐标以及该区域的像素宽度和高度。
-
这里返回的对象是imageData 的实例。每个imageData 对象都有三个属性：width、height 和data。其中data 属性是一个数组，保存着图像中每一个像素的数据
-
data 数组中有4 个元素来保存，分别表示红、绿、蓝和透明度值
-
数组中每个元素的值都介于0 到255 之间
-
要先用drawImage将图像表现在画布上
//绘制原始图像
context.drawImage(image, 0, 0);
//取得图像数据
imageData = context.getImageData(0, 0, image.width, image.height);
-
- 比如红色
var data=context.imageData
var red=data[0];//之后red都存放在data[i]; i+=4，这个里面。例如data[4],data[8],data[12]......
10. 合成
-
- globalAlpha
是一个介于0 和1 之间的值（包括0 和1），用于指定所有绘制的透
明度。默认值为0。如果所有后续操作都要基于相同的透明度，就可以先把globalAlpha 设置为适当
值，然后绘制，最后再把它设置回默认值0 - globalCompositionOperation 表示后绘制的图形怎样与先绘制的图形结合，这个属性的值是字符串
- globalAlpha
- WebGL这里先不讨论了，待我之后学openGL差不多之后，基本这些API接口名字和功能都差不多了，就可以来了解它。
今天就先到这，canvas的API还是挺多的，主要是看它的应用场景以及如何借助js实现交互。
但是不管怎样至少能看懂很多canvas实现的动态图像的代码了，所以越来越有自信了。
晚安
浙公网安备 33010602011771号