Question

我正在使用jCanvasSript进行画布动画。

我将一个图像元素放在画布中，然后想要使用translate方法移动它。

这可能吗？如果可行，我该如何实现我想要的行为？

我的代码：

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);
});

Answer 1

试试这个例子..

<!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>

translate（）方法在jCanvaScript for HTML5 canvas中不起作用？

1 个答案: