在HTML5畫布上旋轉其軸上的方形？

我想創建一個函數，在其軸上旋轉一個正方形。在HTML5畫布上旋轉其軸上的方形？

var halfWidth = canvas.width/2; 
var halfHeight = canvas.height/2; 

var x = halfWidth-10; 
var y = halfHeight-10; 
var w = 20; 
var h = 20; 
var deg = 45; 

rotate(x, y, w, h, deg); 

ctx.fillRect(x, y, w, h);

功能：

function rotate(x, y, w, h, deg) { 
    // ctx.translate() and ctx.rotate() 
    // goes here. 
}

如何做到這一點？

來源

2012-01-20 user824294

類似http://stackoverflow.com/questions/4984316/draw-square-and-rotate-it –

@kavinshah - 不幸的是誰回答了這個問題並沒有理會張貼人他們的代碼，現在他們的小提琴已經過期。始終發佈代碼！ – mrtsherman

謝謝dr.dredel的鏈接。

var cx = canvas.width/2; 
var cy = canvas.height/2; 

var x = -10; 
var y = -10; 
var w = 20; 
var h = 20; 
var deg = 45; 

ctx.save(); 

ctx.translate(cx, cy); 
ctx.rotate(deg * Math.PI/180); 

ctx.fillRect(x, y, w, h); 

ctx.restore();

說明：

ctx.save()保存座標系統的當前狀態。
ctx.translate(cx, cy)改變原點到畫布
ctx.rotate(deg * Math.PI/180)的中心旋轉的方向45度（注意，參數的單位爲弧度，而不是度）
ctx.fillRect(x, y, w, h)提請平方
ctx.restore()恢復座標系的最後一個狀態。

JS Fiddle link。

Another JS Fiddle link, with a HTML5 slider。

來源

2012-01-21 10:18:52 user824294

如果我沒有記錯，所涉及的翻譯類似於首先轉換爲矩形的中心點，然後旋轉想要的量，然後繪製。或者可能先旋轉，然後翻譯，我有點生鏽=）

來源

2012-01-20 07:09:18

這裏是我的意見：

JAVASCRIPT

var canvas = document.getElementById("myCanvas"); 
var ctx2 = canvas.getContext("2d"); 
ctx2.fillStyle='#333'; 

ctx2.fillRect(50,50,100,100); 
var ctx = canvas.getContext("2d"); 


ctx.fillStyle='red'; 

var deg = Math.PI/180; 

ctx.save(); 
    ctx.translate(100, 100); 
    ctx.rotate(45 * deg); 
    ctx.fillRect(-50,-50,100,100); 
ctx.restore();

ctx2是舊的位置和CTX是形狀的新位置。根據要定位形狀的位置，必須使用相同的x，y座標來轉換形狀。然後你必須輸入值爲ctx.fillRect(x,y,w,h);保留x和y作爲-ve值（高度和寬度的一半以保持在畫布的對角線上，否則改爲操縱它）。和h，w作爲你想要的值。

DMEO

來源

2014-03-17 12:36:57 Alex

在HTML5畫布上旋轉其軸上的方形？

回答

相關問題