欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用canvas画带箭头的圆环

程序员文章站 2022-05-22 12:37:27
...

算是一个笔记,省的自己总忘:

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:这两个值是控制三角的大小的;

下面是关于里面的几个值的介绍:
使用canvas画带箭头的圆环

相关标签: canvas