canvas-2绘制圆弧

为什么80%的码农都做不了架构师？>>>   

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

转载于:https://my.oschina.net/mdu/blog/881180