Javascript `Path2D` arc 未呈现

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，起始 Angular 为 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 :

The final two parameters designate the x and y coordinates to end the stroke

所以问题是你笔划的开始和结束是完全相同的点 (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>