我知道在画布上渲染虚线描边线没有原生支持,但我已经看到了人们能够为此提供支持的聪明方法.
我想知道的是,是否有任何方法可以将其转换为允许在形状(特别是圆形)周围渲染虚线笔划？
解决方法
Live Demo
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,1);
ctx.strokeStyle = "rgb(255,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();