Question

我写了以下脚本

var ctx = document.getElementById("crystal").getContext('2d');
var frontback = new Path2D("M 10 10 h 100 v 100 h -100 Z");
var leftright = new Path2D("M 10 10 l 20 20 v 100 l -20 -20");

ctx.save();

ctx.stroke(frontback);
ctx.stroke(leftright);

ctx.translate(20,20);
ctx.stroke(frontback);
ctx.restore();

ctx.translate(100,0);
ctx.stroke(leftright);
ctx.restore();

var pos_ion = new Path2D("M 55 55 A 10 10 0 0 1 55 55");
ctx.stroke(pos_ion);

根据需要显示线条，但完全不显示圆圈。当我理解“ A”之后的输入时，应该说水平半径和垂直半径为10，起始角度为0，这是我尝试读取但未完全理解的大弧度标志。但我认为扫频的选择无关紧要。中心在(55,55)。在我看来，它应该可以工作，但显然不能。

Answer 1

了解您的var pos_ion = new Path2D("M 55 55 A 10 10 0 0 1 55 55");代码行中会发生什么。您将stroke移至(55,55)坐标，然后尝试使用以下参数绘制圆弧。

rx ry x-axis-rotation large-arc-flag sweep-flag x y

10 10 0 0 1 55 55

根据docs：

最后两个参数指定x和y坐标以结束笔划

因此，问题在于笔触的开始和结尾完全相同(55,55)。您可以尝试稍微修改这些参数，以查看下面的弧形((55,0) -> (0,55))示例：

var ctx = document.getElementById("crystal").getContext('2d');
var frontback = new Path2D("M 10 10 h 100 v 100 h -100 Z");
var leftright = new Path2D("M 10 10 l 20 20 v 100 l -20 -20");

ctx.save();

ctx.stroke(frontback);
ctx.stroke(leftright);

ctx.translate(20,20);
ctx.stroke(frontback);
ctx.restore();

ctx.translate(100,0);
ctx.stroke(leftright);
ctx.restore();


var pos_ion = new Path2D("M 55 0 A 10 10 0 0 1 0 55");
ctx.stroke(pos_ion);

<div><canvas id="crystal" /></div>

Javascript`Path2D`弧未渲染

1 个答案: