jquery旋轉：改變旋轉點可能嗎？（變換畫布功能）

我正在試圖通過jquery roate插件旋轉圖像來實現amimation。不幸的是，這個插件沒有改變它的旋轉點，它總是居中.. ，它沒有這個參數jquery旋轉：改變旋轉點可能嗎？（變換畫布功能）

我發現用canvas做這個可以用canvas.transform ）功能。

我是一個使用canvas的初學者，但如果有人能給我一個例子如何做到這一點，我會大大apreciate它。

這裏的圖像旋轉插件：http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

這裏的帆布製成。（但trails.don't有種不好的，因爲它的葉子知道爲什麼http://jsbin.com/ipeqi3/2）

2011-02-15 PartySoft

見http://stackoverflow.com/questions/4697041/rotating-and-moving -an-image-in-a-canvas-element/4697139＃4697139和http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point/4650102#4650102 – Phrogz 2011-02-15 19:54:41

這是我到目前爲止，它確實通過改變旋轉點來旋轉圖像（不是變換，我的壞...）

它不做它不會創建一個流暢的動畫，它很粗糙..我怎麼能完成那個？

另一件事我需要的是一個背景必須是透明的

這裏是到目前爲止我的代碼：

<script> 
var degree=10; 

function docanvas() { 
    var canvas = document.getElementById('canvas'); 
var cContext = canvas.getContext('2d'); 

var img = new Image(); 
    // Create new Image object  
    img.src = 'http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG'; // Set source path // set img src 


var cw = img.width, ch = img.height, cx = 0, cy = 0; 


canvas.setAttribute('width', 300); 
canvas.setAttribute('height', 300); 

cContext.fillStyle = "rgba(0, 0, 255, .5)"; 
cContext.fillRect(0, 0, 300, 300); 

cContext.translate(150, 150); 


cContext.rotate(degree * Math.PI/180); 
cContext.drawImage(img, -64, -128,128,128); 

    degree+=5; 

} 
</script> 


</head> 
<body onload="setInterval('docanvas()',50);"> 
<canvas id="canvas"></canvas> 
<script> 
     docanvas(30); 
</script>  
</body> 
</html>

來源

2011-02-15 18:08:39 PartySoft

jquery旋轉：改變旋轉點可能嗎？ （變換畫布功能）

回答

相關問題

jquery旋轉：改變旋轉點可能嗎？（變換畫布功能）