html图片旋转45度代码,HTML 5，HOWTO加载一个正方形或绘制一个简单的正方形的图片，并旋转它在45度...

这应该是简单的..但不能弄清楚： 我在第一个矩形上使用旋转功能，但我正在获得第二个矩形旋转？ :( 更新Remmy夏普的答案后的代码。但是，现在的盒子已经消失了。我只是想两盒一个对他们的REG点旋转。HTML 5，HOWTO加载一个正方形或绘制一个简单的正方形的图片，并旋转它在45度

问题出在哪里？

#myCanvas {

border: 1px solid #9C9898;

}

#myCanvas2 {

border: 1px solid #9C9898;

}

body {

margin: 0px;

padding: 0px;

}

window.onload = function() {

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.beginPath();

context.rect(100, 100, 200, 100);

context.fillStyle = '#8ED6FF';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

context.rotate(20*Math.PI/180); //<<<1st rectange should rotate

var canvas2 = document.getElementById('myCanvas2');

var context2 = canvas2.getContext('2d') //<< updated as per Remmy Sharp's answer.

context2.beginPath();

context2.rect(200, 200, 200, 100);

context2.fillStyle = '#8ED6FF';

context2.fill();

context2.lineWidth = 5;

context2.strokeStyle = 'black';

context2.stroke();

//canvas2.rotate = 45

//context2.rotate(20*Math.PI/180)

};

+0

我想你应在'.stroke()'之前加'.rotate()'。 ＃1，然后在rect的'.stroke()'之前重置方向。 ＃2。 –

2012-08-06 06:39:02