Question

此代码正在旋转一个旋转轮。我想要实现的是复制轮子并重新定位副本并向前移动两个轮子。就像汽车的车轮看起来一样。我是帆布新手。提前致谢

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

Answer 1

以下是如何在画布上设置2个旋转“轮子”的动画：http://jsfiddle.net/m1erickson/Yv62X/

“window.requestAnimFrame”适用于跨浏览器的兼容性 - 感谢Paul Irish提供此功能。

请注意，RequestAnimFrame（）现在比setInterval（）更适合并发动画等。

animate（）函数执行以下步骤：

更新：计算位置＆amp;此动画帧中需要旋转。

清除：清除画布以使其为绘图做好准备

Draw：调用draw（）函数，该函数执行实际绘图

draw（）函数：我们使用相同的函数绘制两个轮子 - 只需更改属性。这遵循一个重要的编程概念“干” - 不要重复自己。单个函数中的两个轮子使调试更容易，代码更易读，更易于维护。

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

复制轮子并向前移动轮子

1 个答案: