canvas
保存与调用路径
-
save
:用来保存当前路劲的状态,可以多次保存,调用多次的时候,存入一个先进后出的容器;- 语法:
ctx.save()
;
- 语法:
-
restore
:用来恢复路径的状态,恢复的是路劲状态是最后一次save的;- 语法:
ctx.restore()
;
- 语法:
绘制矩形的容器
1, * rect
:描绘矩形路径。需要手动绘制或者填充相关状态才可以 ---> rectangle
; * 语法:ctx.rect(x,y,width,height)
; 2, * strokeRect
:绘制线性矩形。有自己的路径,不会影响其他的 * 语法:ctx.strokeRect(x,y,width,height)
; 3, * fillRect
:绘制填充矩形。有自己的路径,不会影响其他的 * 语法:ctx.fillRect(x,y,width,height)
; 4, * clearRect
:清除一个矩形的区域,可以用来制作动画擦除画面; * 语法:ctx.clearRect(x,y,width,height)
;
帧动画的实现
- 使用定时器,在每次进来的时候,先清空整个画布,重新绘制图形,绘制图形的时候,移动位置,就会动起来
绘制圆弧
- 语法:
ctx.arc(x,y,r,startAngle,endAngle,anticlockwise)
x,y:代表圆心的坐标; r:代表圆的半径; startAngle:开始的角度; endAngle:结束角度; anticlockwise:是否逆时针方向绘制,默认是false;逆时针的时候只是绘制是逆时针的,但是找角度,还是要顺时针找; 在canvas中圆的0度角,在圆心水平向右的半径上;
- 弧度 用 π 来表示的角度就是弧度制;
- 比例公式:角度/360 = 弧度/2π -------> 弧度 = 角度 / 180 * π
function angleToRadian (angle){
return angle / 180 * Math.PI;
}
> 需要注意的是:arc 会从上一个保存的起始点 开始连一条线到弧的起始位置,
找弧上的点
cos
和sin
参数需要的都是弧度;- x1 = x0 + r * cos(45);
- y1 = y0 - r * sin(45);
示例
var x1 = x + radiu * Math.cos(angleToRadian(-45));
var y1 = y + radiu * Math.sin(angleToRadian(-45));
ctx.lineTo(x1, y1);
ctx.arc(x, y, radiu, angleToRadian(-45), angleToRadian(45));
ctx.closePath();
ctx.stroke();
ctx.fill();
//如何绘制一个扇形?
//1. moveTo到圆心
//2. lineTo弧的起始点
//3. 画弧
//4. closePath