如何在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();