canvas画布:圆弧绘制arc();

圆弧绘制

• 弧度概念
• arc()
  • x 圆心横坐标
  • y 圆心纵坐标
  • r 半径
  • startAngle 开始角度
  • endAngle 结束角度
  • anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）
    圆弧语法 : arc(x, y, radius半径, 弧度start, 弧度end, 方向:默认顺时针false);
    画圆弧的步骤
  1. 确定圆心
  2. 确定半径
  3. 确定绘制的起始位置和结束位置
  4. 确定方向
     //例1.需求 : 在中心位置画一个半径为150px的圆弧右下角

  var ctx = document.querySelector("canvas").getContext("2d");
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    //右上角四分之一的圆弧
    ctx.arc(w / 2, h / 2, 150, 0, Math.PI * 3/ 2, true);
    ctx.stroke();`

例2 绘制右上角四分之一圆弧的扇形

 var ctx = document.querySelector("canvas").getContext("2d");
    //把起点放到圆心位置
    ctx.moveTo(300, 200);
    ctx.arc(300, 200, 150, 0, Math.PI * 3 / 2, true);
    ctx.closePath();
     ctx.fill();
    //ctx.stroke();

效果图

例3 绘制六等分颜色随机的圆

var ctx = document.querySelector("canvas").getContext("2d");
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    var num = 6;
    //每一份是多少弧度呢
    var angle = Math.PI * 2 / num;
    //获取随机颜色
    var randomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb('+r+','+g+','+b+')';
    }
    //上一次的结束弧度 = 当前的起始弧度
    //var startAngle = 0;//
    for(var i= 0 ; i <num ; i++){
        ctx.beginPath();
        ctx.moveTo(w / 2, h / 2);
        ctx.arc(w / 2, h / 2, 150, i*angle, (i+1)* angle);
        ctx.fillStyle = randomColor();
        ctx.fill();
    }

效果图