如何使用畫布內的形狀進行旋轉？

我使用畫布使用加載圖像：如何使用畫布內的形狀進行旋轉？

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

context.scale(0.5,0.5); 
canvas.setAttribute('width', tempImg.width*0.5); 
canvas.setAttribute('height', tempImg.height*0.5); 
context.drawImage(tempImg ,0,0,canvas.width,canvas.height);

我使用其他畫布在運行時繪製形狀使用：

var annCanvas=document.getElementById('annCanvas'); 
var annContext=annCanvas.getContext('2d'); 
context.beginPath(); 
context.lineWidth=4; 
context.strokeRect(x,y,w,h); 
context.stroke();

兩個帆布的立場是絕對的，所以它們看起來像overlape上each.but但我想同時旋轉兩個畫布（角度值90,180,270,0）。

在此先感謝

來源

2012-07-19 Shanky

使用本：

context.rotate(90); // rotates 90 deg clockwise

來源

2012-07-19 11:31:43 haynar

謝謝回答，我ASLO使用context.rotate（）旋轉。但是我想改變畫布的高度和寬度，因爲在使用縮放後圖像會變成灰色（即在這種情況下爲0.5）。 – Shanky 2012-07-19 11:36:11

你能更詳細地描述你的目標嗎？爲什麼你想改變畫布的寬度和高度？ – haynar 2012-07-19 11:49:17

我正在圖像上繪製形狀。當我按旋轉（左或右）按鈕，然後我的整個畫布（帆布+ annCanvas）應該旋轉 – Shanky 2012-07-19 12:26:10

如何使用畫布內的形狀進行旋轉？

回答

相關問題