javascript - JS Canvas 中ctx的旋转线条

Question

如果我在 JavaScript Canvas 中绘制了以下基本三 Angular 形，我将如何沿中心旋转 30 度？这与可能的副本有点不同，因为它不是 rect，它是沿原点的一串线。

// Rotate 30 degrees when origin is (5,5)
ctx.beginPath();
ctx.moveTo(5,0);
ctx.lineTo(10,10);
ctx.lineTo(0,10);
ctx.lineTo(5,0);
ctx.stroke();

因此，您看到的不是正常的三 Angular 形，而是有点倾斜的三 Angular 形。

提前致谢!

Answer 1

您可以使用 rotate 来完成此操作 Canvas 的方法

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var deg = 30;

ctx.save(); // save canvas

ctx.rotate(deg * Math.PI / 180); // rotate canvas

ctx.beginPath();
ctx.moveTo(5,0);
ctx.lineTo(10,10);
ctx.lineTo(0,10);
ctx.lineTo(5,0);
ctx.stroke();

ctx.restore(); // restore canvas

<canvas id="canvas" width="218" height="218" style="border:1px solid #d3d3d3"></canvas>

注意: 确保在旋转前保存 Canvas 状态，并在绘制三 Angular 形后恢复它，这样以后的绘图就不会旋转。