translate（）方法在jCanvaScript中對HTML5畫布不起作用？

我正在使用jCanvasSript進行畫布動畫。translate（）方法在jCanvaScript中對HTML5畫布不起作用？

我把一個圖像元素放在畫布上，然後想用translate方法移動它。

這是可能的，如果是這樣，我該如何實現我想要的behviour？

我的代碼：

HTML：

<canvas id="bug_animte" width="990" height="285"> 
    This text is displayed if your browser 
    does not support HTML5 Canvas. 
</canvas>

的Javascript：

function start_1(idCanvas) 
{ 
    jc('#myCircle_1').translate(50,20); 
} 
function onload_1(idCanvas) 
{ 
    var img=new Image(); 
    img.src="images/body.png"; 
    img.onload=function(){ 
     jc.start(idCanvas); 
     jc.image(img,100,100).id('myCircle_1'); 
     jc.start(idCanvas); 
    } 
} 
$(document).ready(function(){ 
    onload_1('bug_animte'); 
    var x = setTimeout(function(){ 
      start_1('bug_animte')     
    },100); 
});

來源

2013-03-01 Jamir Khan

嘗試這樣的例子..

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     #myCanvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var rectWidth = 150; 
     var rectHeight = 75; 

     // translate context to center of canvas 
     context.translate(canvas.width/2, canvas.height/2); 

     context.fillStyle = 'blue'; 
     context.fillRect(rectWidth/-2, rectHeight/-2, rectWidth, rectHeight); 
    </script> 
    </body> 
</html>

來源

2013-03-01 05:16:21 Amrendra

我想只動畫圖像。但不幸的是translate（）不能與圖像一起工作。 – 2013-03-01 05:27:51

translate（）方法在jCanvaScript中對HTML5畫布不起作用？

回答

相關問題