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() 函数：我们使用相同的函数绘制两个轮子——只是改变属性。这遵循了一个重要的“DRY”编程概念——不要重复自己。一个函数中的两个轮子使调试更容易、更易读和更易于维护的代码。

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