1

キャンバスアニメーションに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);
});
4

1 に答える 1

0

この例のようにしてみてください。

<!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-01T05:16:21.827 に答える