如果我在 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 形。
提前致谢!
最佳答案
您可以使用 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 形后恢复它,这样以后的绘图就不会旋转。
关于javascript - JS Canvas 中ctx的旋转线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43638555/