Html 5キャンバスで傾斜した長方形を描画する方法？

Question

私はx、y、幅と高さを持っているとしましょう。特定の角度で傾斜/傾斜した矩形を描画する必要があります。私はcontext.rotateを使うことはできません。それはキャンバスの他の形を変えているからです。

Answer 1

context.rotateを使用できます。他の図形を描画する前に回転を元に戻すだけで済みます。 Like this：

var canvas = document.getElementById("mycanvas"); 
var context = canvas.getContext("2d"); 

context.beginPath(); 
context.rect(88, 50, 200, 100); 
context.fillStyle = "#8ED6FF"; 
context.fill(); 
context.lineWidth = 5; 
context.strokeStyle = "black"; 
context.stroke(); 

context.rotate(0.5); 
context.beginPath(); 
context.rect(138, 120, 200, 100); 
context.fillStyle = "#FE8E9D"; 
context.fill(); 
context.lineWidth = 5; 
context.strokeStyle = "black"; 
context.stroke(); 

context.rotate(-0.5); 
context.beginPath(); 
context.rect(188, 190, 200, 100); 
context.fillStyle = "#FEEF8E"; 
context.fill(); 
context.lineWidth = 5; 
context.strokeStyle = "black"; 
context.stroke();