javascript - 无法在HTML Canvas 中旋转笔触

我正在尝试创建局部环并旋转它。

var c = document.getElementById("c");
var x = c.getContext("2d");

var w = c.width;
var h = c.height;
var cx = w/2;
var cy = h/2;
var sw = 20;

var pi = Math.PI;
var r = Math.min(w, h)/2 - sw/2;
var k = 0;
var i = pi*1/30;

x.lineWidth = sw;
x.lineCap = "butt";
x.beginPath();
x.arc(cx, cy, r, -pi*2, -pi/16);
x.rotate(pi*1/3); // IS NOT TAKING EFFECT
x.stroke();

<canvas id="c" width="100px" height="100px"></canvas>

如您所见，在最后一部分中，在调用stroke()之前，我执行了：

x.rotate(pi*1/3);

但是我看不到最终渲染中的旋转。我究竟做错了什么？

最佳答案

添加路径时，将在添加点时使用转换的当前状态。此后该路径将不会更改。

因此，在这里，只需在添加更多路径数据之前进行旋转（在这种情况下，您还需要使用平移从枢轴/旋转点绘制圆弧）。

var c = document.getElementById("c");
var x = c.getContext("2d");

var w = c.width;
var h = c.height;
var cx = w/2;
var cy = h/2;
var sw = 20;

var pi = Math.PI;
var r = Math.min(w, h)/2 - sw/2;
var k = 0;
var i = pi*1/30;

x.lineWidth = sw;
x.lineCap = "butt";
x.beginPath();
x.translate(cx, cy);            // update matrix
x.rotate(pi*1/3);
x.arc(0, 0, r, -pi*2, -pi/16);  // uses current matrix
x.stroke();

<canvas id="c" width="100px" height="100px"></canvas>