HTML Canvas - 围绕圆圈的虚线描边

Question

我知道在画布上渲染的虚线描边线没有原生支持,但我已经看到了人们能够为此提供支持的聪明方法.

我想知道的是,是否有任何方法可以将其转换为允许在形状(特别是圆形)周围渲染虚线笔划？

Answer 1

使用context.setLineDash()的最简单方法

ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.beginPath();
ctx.arc(100, 60, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();

Answer 2

现场演示

calcPointsCirc取4个参数,中心x/y,半径和短划线的长度.它返回一个点数组x,y,ex,ey.您可以循环绘制点以绘制虚线圆圈.可能有更多优雅的方法可以做到这一点,但想想我给它一个机会.

function calcPointsCirc( cx,cy, rad, dashLength)
{
    var n = rad/dashLength,
        alpha = Math.PI * 2 / n,
        pointObj = {},
        points = [],
        i = -1;

    while( i < n )
    {
        var theta = alpha * i,
            theta2 = alpha * (i+1);

        points.push({x : (Math.cos(theta) * rad) + cx, y : (Math.sin(theta) * rad) + cy, ex : (Math.cos(theta2) * rad) + cx, ey : (Math.sin(theta2) * rad) + cy});
        i+=2;
    }              
    return points;            
} 


var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = canvas.height= 200;

var pointArray= calcPointsCirc(50,50,50, 1);
    ctx.strokeStyle = "rgb(255,0,0)";
    ctx.beginPath();

    for(p = 0; p < pointArray.length; p++){
        ctx.moveTo(pointArray[p].x, pointArray[p].y);
        ctx.lineTo(pointArray[p].ex, pointArray[p].ey);
        ctx.stroke();
    }

    ctx.closePath();