今天小编跟大家讲解下有关24个canvas基础知识小结 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关24个canvas基础知识小结 的相关资料，希望小伙伴们看了有所帮助。
现把canvas的知识点总结如下 以便随时查阅。
1、填充矩形 fillRect(x,y,width,height);
2、绘制矩形边框 strokeRect(x,y,width,height);
3、擦除矩形 clearRect(x,y,width,height);
4、填充样式 fillStyle="red"; 样式可以为颜色、渐变和图像。
5、描边样式 strokeStyle="red";
6、描边线条的宽度 lineWidth=4;
7、线条末端形状 lineCap="butt"; butt(对接)/round(圆)/square(方) 默认情况下是butt;
8、线条相交样式 lineJoin="miter"; miter(尖角)/round(圆角)/bevel(斜角),默认尖角;
9、开始绘制路径 beginPath();
10、结束路径 closePath(); 创建路径后 如果想绘制一条连接到路径起点的线条 可以调用closePath();
11、绘制圆弧 arc(x,y,radius,startAngle,endAngle,true/false);
12、绘制弧线 arcTo(x1,y1,x2,y2,radius) 从上一点开始绘制一天弧线 到x2,y2为止 并且以给定的半径radius穿过x1,y1;
13、moveTO(x,y); 将绘图游标移动到（x,y）,不画线
14、lineTo(x,y); 从上一点开始绘制一条直线
15、二次贝塞尔曲线： quadraticCurveTo(cx,cy,x,y); 从上一点开始绘制二次曲线 到x,y为止 cx,cy作为控制点。
16、三次贝塞尔曲线： bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 从上一点开始绘制二次曲线 到x,y为止 cx1,cy1和cx2,cy2作为控制点。
17、rect(x,y,width,height);从点x,y开始绘制矩形 宽度和高度分别由width和height指定。这个方法绘制的是矩形路径 而不是独立形状。
18、绘制文本：
(1) 填充文本：fillText("hello",x,y,width);width为可选的最大像素宽度,如果文本大于最大宽度 则文本会收缩以适应最大宽度。 (2) 文本描边：strokeText("hello",x,y,width);width为可选的最大像素宽度。 (3) 文本样式：font="bold 14px Arial"; (4) 水平文本对齐：textAlign='start';// start, end, left,right, center。默认值:start。以文字的起始点(x,y)为基点的纵轴进行对齐。 (5) 垂直文本对齐：textbaseline='alphabetic';//top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic。以文字的起始点(x,y)为基点的横轴进行对齐。 (6) 文本的宽度：var text="hello"; var length=context.measureText(text)；参数text为所需要绘制的文字
19、变换
(1) rotate(angle):围绕原点旋转图像angle弧度。也可以使用transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0); (2) scale(x,y):缩放图像。也可以使用transform(x,0,0,y,0,0); (3) translate(x,y):将坐标原点移动到x,y 执行这个变换之后 坐标0,0会变成之前由x,y表示的点。也可以使用transform(1,0,0,1,x,y); (4) transform(<number>, <number>, <number>,<number>,x, y); (5) setTransform(<number>, <number>, <number>,<number>,x, y);将变换矩阵重置为默认状态 然后再调用transform();
20、图形组合
复制代码代码如下:context.fillStyle="blue";context.fillRect(10,10,100,100);context.globalCompositeOperation='lighter'; 可选值如内。context.fillStyle="red";context.arc(110,60,50,0,Math.PI*2,false);context.fill();
21、绘制图形阴影
复制代码代码如下:context.shadowOffsetX=10; //阴影的横向位移量context.shadowOffsetY=10; //阴影的纵向位移量context.shadowColor='rgba(100,100,100,0.5)'; //阴影的颜色context.shadowBlur=7; //阴影的模糊范围
22、绘制、平铺、裁剪图像
复制代码代码如下:context.drawImage(image,x,y);context.drawImage(image,x,y,w,h);context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh为源图像的被复制区域的起始坐标和高度 dx,dy和dw,dh为复制后的区域的目标坐标和高度。context.createPattern(image,type);图像平铺 参数可以为：no-repeat,repeat-x,repeat-y,repeat;context.clip(); //裁剪功能
例子：
复制代码代码如下:image=new Image(); //创建Image对象image.src="https://www.aidi.net.cn//html5/../images/wukong.gif";var test=context.createPattern(image,'repeat-y');//createPattern设置平铺效果 context.fillStyle=test;context.fillRect(0,0,400,400);image.onload=function() { //此方法的作用是 如果图片是比较大的网络图像文件 防止图像全部装载完毕才看见该图像 这样就可以一边装载一边绘制了。drawImg(context,image);}function drawImg(context,image){//绘制原始图像context.drawImage(image,10,10,125,125);//局部放大context.drawImage(image,20,0,90,100,150,10,125,125);context.rect(20,20,80,80);context.clip();context.drawImage(image,0,0,200,200);}
23、保存、恢复
contex.save();将当前状态保存到栈中。注意：保存的只是对绘制图形的设置和变换 不会保存绘制图形的内容。context.restore();从栈中取出之前保存的图形状态可以应用的场合：(1)图像或图形变形(2)图像裁剪(3)改变图形上下文时属性时：fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textbaseline
24、线性渐变
复制代码代码如下:var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);g.addColorStop(0,'red');g.addColorStop(0,'green');context.fillStyle=g;context.fillRect(0,0,200,200);
来源：爱蒂网
