0

このコードは、回転するホイールを表示しています。私が達成したいのは、ホイールを複製し、複製を再配置して、両方のホイールを前方に移動することです。車の車輪のように見えます。私はキャンバスで非常に新しいです。前もって感謝します 

<html>
    <head>
    <script type="text/javascript">
    addEventListener("load", windowLoaded, false);

    function  windowLoaded()
    {
        canvasApp();
    }

    function canvasApp()
    {
        var canvas = document.getElementById("canvas01");
        var context = canvas.getContext("2d");
        var wiel = new Image();

        wiel.src = "wiel.png";

        setInterval(draw, 25);

        function draw(width)
        {
            context.clearRect(width, 0, 800, 600)
            context.drawImage(wiel, 0, 0);
            context.translate(176, 176);
            context.rotate(1 * 0.1);
            context.translate(-176, -176);

        }
    }
    </script>
    </head>
    <body>
    <canvas id="canvas01" width="800" height="600">
        no support
    </canvas>
    </body>
    </html>
4

1 に答える 1

0

キャンバス上で 2 つの回転する「ホイール」をアニメートする方法は次のとおりです: http://jsfiddle.net/m1erickson/Yv62X/

「window.requestAnimFrame」は、ブラウザー間の互換性のためにあります。この便利な機能を提供してくれた Paul Irish に感謝します。

RequestAnimFrame() は現在、同時アニメーションなどのために setInterval() よりも優先されることに注意してください。

animate() 関数は次の手順を実行します。

更新: このアニメーション フレームで必要な位置と回転を計算します。

クリア: キャンバスをクリアして描画できるようにします

Draw: 実際の描画を行う draw() 関数を呼び出します

draw() 関数: 属性を変更するだけで、この同じ関数を使用して両方のホイールを描画します。これは、プログラミングの重要な概念である「DRY」に従っています。つまり、自分自身を繰り返さないでください。1 つの関数に 2 つの車輪があるため、デバッグが容易になり、コードが読みやすく、保守しやすくなります。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();

var rotation=0;
var radius=50;
var x=50;
var y=100;
var direction=1;

        function animate() {

          // update
          rotation+=10;
          x+=1;
          if(x-50>canvas.width){ x=0 }
          // clear
          ctx.clearRect(0, 0, canvas.width, canvas.height);

          // draw stuff
          draw(x,y,rotation,"red");
          draw(x+150,y,rotation,"green");

          // request new frame
          requestAnimFrame(function() {
            animate();
          });
        }
        animate();


function draw(x,y,degrees,color){
      var radians=degrees*(Math.PI/180);
      ctx.save();
      ctx.beginPath();
      ctx.translate(x,y);
      ctx.rotate(radians);
      ctx.fillStyle="black";
      ctx.strokeStyle="gray";
      ctx.arc(0, 0, radius, 0 , 2 * Math.PI, false);
      ctx.fill();
      ctx.stroke();
      ctx.beginPath();
      ctx.strokeStyle=color;
      ctx.lineWidth=5;
      ctx.moveTo(-20,0);
      ctx.lineTo(+20,0);
      ctx.stroke();
      ctx.restore();
}


    }); // end $(function(){});
</script>

</head>

<body>
  <canvas id="canvas" width=400 height=200></canvas>
</body>
</html>
于 2013-03-04T21:19:21.883 に答える