canvas学习api

Posted 2020-09-16 落落月

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）