javascript - Javascript `Path2D` 弧未呈现

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)。在我看来，它应该可以工作，但显然不行。

标签： javascriptsvghtml5-canvas

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

根据文档：

最后两个参数指定结束笔划的 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>