如何旋转画布背景

我怎样才能像旋转画布对象 -如何旋转画布背景

ctx.beginPath(); 
ctx.fillStyle = 'rgba(52, 52, 53, 0.75)'; 
ctx.fillRect(50, 50, 100, 100);

它并不需要是一个循环，但我怎么能旋转吗？

来源

2014-11-02 Alex

@M。页的答案确实会导致此问题发生旋转，但并非如您所想的那样。一般来说rotate()不是你的对象的中间点，而是另一个点(0,0)。为了解决这个问题，我们需要让我们的对象的中间点为(0,0)，然后做一个循环，然后回转。像这样：

ctx.translate((c.width/2) - 50, (c.height/2) - 50); // move back 
ctx.rotate(20*Math.PI/180); // rotate 
ctx.translate((-c.width/2) + 50, (-c.height/2) + 50); // move to 0,0 
ctx.fillRect(50, 50, 100, 100); // Notice the middle point would be (x+50, y+50)

请注意，这实际上是从下往上做的，这是图形如何工作的栈。

Here is an example，发现其中的差别，如果你发表意见translate()出来。

-50和+50来自我们的箱子的中心在中间。如果没有它们，它会围绕盒子的右下角旋转，而不是盒子的中心。为了让视觉例如：

基本上我们要翻译到我们的信箱的中点为(0,0)位置。

来源

2014-11-02 20:40:30

什么是+50和-50从？ – Alex 2014-11-02 20:57:19

@AlexSafayan因为我们的盒子的中间点距离左侧角落的距离为50个像素。否则，它会围绕框的左上角旋转它。 – 2014-11-02 21:04:01

@AlexSafayan我已经更新了我的答案，以清楚地表明这一点，链接有两个动画旋转。 – 2014-11-02 21:13:45

像这样：

<html> 
<body> 
<canvas id="myCanvas" width="134px" height="331px" onclick="draw()"></canvas> 
<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.fillStyle = 'rgba(52, 52, 53, 0.75)'; 
    ctx.rotate(20*Math.PI/180); 
    ctx.fillRect(50, 50, 100, 100); 
</script> 
</body> 
</html>

来源

2014-11-02 20:26:18

你可以添加html，css和javascript吗？ – Alex 2014-11-02 20:34:19

这里你去... – 2014-11-02 20:40:04

如何旋转画布背景

回答

相关问题