1、canvas.getContext():获取渲染上下文和绘画功能;
一、绘制矩形
2、ctx.fillRect(x,y,width,height):绘制矩形;
3、ctx.strokeRect(x,y,width,height):绘制矩形边框;
4、ctx.clearRect(x,y,width,height):清除矩形;
二、绘制路径
5、ctx.beginPath():新建路径开始命令;
6、ctx.closePath():路径闭合之后绘制命令重新回到上下文;
7、stroke():通过线条来绘制图形轮廓;
8、fill():填充路径内容途径生成实心图形;
三、移动笔触
moveTo(x,y);
四、实线
lineTo(x,y):绘制一条从当前位置到x,y位置的实线;
五、圆弧
arc(x,y,radius,startAngle,endAngle,方向(默认顺时针));
六、贝塞尔以及二次贝塞尔
quadraticCurveTo(cp1x,cp1y,x,y):cp1x,cp1y是贝塞尔曲线的控制点,x,y是结束点;
二次贝塞尔: bezierCruveTo(cp1x,cp1y,cp2x,cp2y,x,y)多了两个控制点;
七、Path2D(不太详细)
八、颜色填充
fillStyle = color:设置图形的填充颜色;
strokeStyle = color:设置图形轮廓的颜色;
九、设置透明度
ctx.globalAlpha = (0~1);
十、线型 line styles
1、lineWidth = width;设置线的宽度(注意:线的宽度是从宽度中心向两边各绘制宽度的一般,因此要准确落在边缘需要减半计算);
2、 lineCap = type:设置线条末端样式,type有 butt,round,square,默认是butt,
3、 lineJoin,设置线条交接处样式,值 有round,bevel,miter;默认是miter;
4.miterLimit,设置外延交点和连接点的最大距离,超出最大距离则变成bevel;
5、setLineDash和setLineOffset设置虚线样式;
十一、渐变 Gradients
1、线性渐变 createLinearGradient(x1,y1,x2,y2),参数规定起始位置和结束位置,即线性方向;
2、径向渐变 createRadialGradient(x1,y1,r1,x2,y2,r2);
3、颜色值设定 addColorStop(position,color);position是渐变位置(0~1),color是颜色;
注:gradient对象其实也是一种颜色,要用fillStyle引用;
十二、状态保存与恢复
save()和restore();
十三、移动原点
translate(x)