canvas 常用api整理
绘制矩形
绘制一个填充的矩形
1 | fillRect(x, y, width, height) |
绘制一个矩形的边框
1 | strokeRect(x, y, width, height) |
清除指定矩形区域,让清除部分完全透明。
1 | clearRect(x, y, width, height) |
绘制路径节
新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。
1 | beginPath() |
将笔触移动到指定的坐标x以及y上。
1 | moveTo(x, y) |
绘制一条从当前位置到指定x以及y位置的直线。
1 | lineTo(x, y) |
圆弧
1 | arc(x, y, radius, startAngle, endAngle, anticlockwise) |
画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,按照anticlockwise给定的方向(默认为顺时针)来生成。
1 | arcTo(x1, y1, x2, y2, radius) |
这里详细介绍一下arc方法,该方法有六个参数:x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时,是逆时针方向,否则顺时针方向。
注意:arc()函数中表示角的单位是弧度,不是角度。角度与弧度的js表达式:弧度=(Math.PI/180)*角度。
贝塞尔曲线
1 | quadraticCurveTo(cp1x, cp1y, x, y) |
绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。
1 | bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) |
绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。
globalCompositeOperation
this.ctx.globalCompositeOperation = ‘source-over’;