使用canvas画带箭头的圆环

算是一个笔记，省的自己总忘：

function draw(el,x,y,r,lineColor,lineWidth,alpha,h1,h2) {
    var canvas = document.getElementById(el);
        var ctx = canvas.getContext("2d");  
        ctx.beginPath();
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = lineWidth;
        ctx.arc(x, y, r, -Math.PI/2, -Math.PI/2+alpha, false);  
        ctx.stroke();
        if(alpha<2*Math.PI) {
            var x1 = x + (r - h1) * Math.sin(alpha)
            var y1 = y - (r - h1) * Math.cos(alpha)
            var x2 = x + (r + h1) * Math.sin(alpha)
            var y2 = y - (r + h1) * Math.cos(alpha)
            var x0 = (x1 + x2) / 2 + h2 * Math.sin(alpha + Math.PI/2)
            var y0 = (y1 + y2) / 2 - h2 * Math.cos(alpha + Math.PI/2)
            ctx.beginPath();
            ctx.moveTo(x0, y0);
            ctx.lineTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.fillStyle = lineColor;
            ctx.closePath();
            ctx.fill();
        }
}

函数里面的参数：

• el：这个是创建的canvas的节点对象，要求传递的是id名称；
• x，y：代表的是这个圆环的圆心的位置
• lineColor：圆环的颜色
• lineWidth：圆环的宽度
• alpha：圆环的角度
• h1，h2：这两个值是控制三角的大小的；

下面是关于里面的几个值的介绍：