我知道在画布上渲染虚线描边线没有原生支持,但我已经看到了人们能够为此提供支持的聪明方式。
我想知道的是,是否有任何方法可以将其翻译为允许在形状(特别是圆圈)周围渲染虚线笔划?
答案 0 :(得分:9)
<强> 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,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();
答案 1 :(得分:4)
如果所有其他方法都失败了,您可以始终将变量从0循环到2 * pi
,跳过每个step
项目,并在step
处的每个其他sin(angle)*radius+centerx, cos(angle)*radius+centery
项目点上绘图
你去,自制的虚线圆圈:)
答案 2 :(得分:4)
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.beginPath();
ctx.arc(100, 60, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
答案 3 :(得分:2)
我的JavaScript Path library实现了任意路径的虚线和点线图(可以由任意数量的直线或曲线段组成),包括椭圆。下载并查看示例。
答案 4 :(得分:1)
我正在为我的游戏寻找一个虚线圆圈,在阅读了所有的页面后,我用打字稿写了一个类,它的效果非常好。如果有人在打字稿中查找虚线圆圈,它就在这里;
export class DashedCircle
{
centerX: number;
centerY: number;
radius: number;
color: string;
dashSize: number;
ctx: CanvasRenderingContext2D;
constructor(ctx:CanvasRenderingContext2D, centerX: number, centerY: number, radius: number, color: string, dashSize: number)
{
this.ctx = ctx;
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
this.color = color;
this.dashSize = dashSize;
}
CalculateCirclePoints()
{
var n = this.radius / this.dashSize;
var alpha = Math.PI * 2 / n;
var pointObj = {};
var points = [];
var i = -1;
while (i < n)
{
var theta = alpha * i;
var theta2 = alpha * (i + 1);
points.push({
x: (Math.cos(theta) * this.radius) + this.centerX,
y: (Math.sin(theta) * this.radius) + this.centerY,
ex: (Math.cos(theta2) * this.radius) + this.centerX,
ey: (Math.sin(theta2) * this.radius) + this.centerY });
i += 2;
}
return points;
}
Draw()
{
var points = this.CalculateCirclePoints();
this.ctx.strokeStyle = this.color;
this.ctx.beginPath();
for (var p = 0; p < points.length; p++)
{
this.ctx.moveTo(points[p].x, points[p].y);
this.ctx.lineTo(points[p].ex, points[p].ey);
this.ctx.stroke();
}
this.ctx.closePath();
}
}