因此,如果这是我用来在画布上画圆的代码:
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = "black";
ctx.stroke();
...我怎样才能获得组成这个圆的点的坐标数组,以便我可以将它们保存在数据库中并稍后使用 context.moveTo() 和 context.lineTo() 方法将点加载到画布上,画同一个圆?
我想我是在问是否可以不使用 .arc() 方法而是通过用线连接点来绘制这种圆,如果我只知道我的中心坐标和圆半径(当然还有线的宽度和颜色) )。这应该使我能够在循环时将每个点坐标保存在数组中。
@Octopus 走在正确的轨道上:
var centerX=100;
var centerY=100;
var radius=40;
// an array to save your points
var points=[];
for(var degree=0;degree<360;degree++){
var radians = degree * Math.PI/180;
var x = centerX + radius * Math.cos(radians);
var y = centerY + radius * Math.sin(radians);
points.push({x:x,y:y});
}
然后您可以使用点数组中的点对象绘制圆:
ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++){
ctx.lineTo(points[i].x,points[i].y);
}
ctx.closePath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.strokeStyle="lightgray";
ctx.lineWidth=3;
ctx.stroke()
不过,有一个建议...
无需将所有点保存在数据库中,只需将 centerX/Y 和半径保存在数据库中即可。
然后您可以使用相同的数学来创建点并绘制圆。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)