Question

我对此非常陌生，我通过观看youtube教程让动画工作这是键盘控制汽车的画布动画。

canvas = document.getElementById('canvas');
c = canvas.getContext('2d');
c.clear = function() { 
                        this.clearRect(0,0,1500,1500) };
function wait(fn)    {
                        window.setTimeout(fn, 250)    }
function repeat(fn)  {
         if (requestAnimationFrame) {
             var advance = function() {fn(); requestAnimationFrame(advance);};
             requestAnimationFrame(advance);
          } else window.setInterval(fn, 50);
}
var dx = 0, dy = 0, mousex = 0, mousey=0, mouseclicks = 0;
document.onkeydown = function(e) {
var key = e.keyCode;
if (key == 37) dx=-1; 
 else if (key == 38) dy=-1; 
  else if (key == 39) dx=1; 
   else if (key == 40) dy=1; 
     else return true; 
return false;
};
document.onkeyup = function(e) {
      var key = e.keyCode; 
      if (key == 37 || key == 39) dx=0; 
       else if (key == 38 || key == 40) dy=0;
        else return true; 
      return false;
};
canvas.onmousemove = function(e) {
       var rect = canvas.getBoundingClientRect(); 
       mousex = e.clientX - rect.left; 
       mousey = e.clientY - rect.top;
};
canvas.onmousedown = function(e) {mouseclicks++;};
      a = new Image();
  a.src = 'http://o.ooli.ca/car_top.png';

  wait(function(){  
        x = 50;
        y = 50;
        angle = 0;
        repeat(function() {     
                        angle = angle + dx;
                        x = x - dy * Math.cos(angle * Math.PI / 180);
                        y = y - dy * Math.sin(angle * Math.PI / 180);   
                        c.clear();
                        c.translate(x, y);
                        c.rotate(angle * Math.PI / 180);
                            c.translate(-37, -19);
                        c.drawImage(a, 0, 0);
                        c.setTransform(1, 0, 0, 1, 0, 0); //reset   
        });
});

现在我想在汽车后面添加小道，并在画布内创建一个重置按钮，这可以帮助我清除轨迹，并将汽车带到初始位置。
我已经阅读了一些教程，但我似乎无法找到我想要的东西关于我应该如何做这个有什么想法/建议吗？

Answer 1

移动时只需记录您的分数：

<强> Modified fiddle here

 repeat(function () {

     angle = angle + dx;
     x = x - dy * Math.cos(angle * Math.PI / 180);
     y = y - dy * Math.sin(angle * Math.PI / 180);

     /// record point
     pts.push([x, y]);

     c.clear();

     /// render points (see below)
     renderTrail(pts, c);

     c.translate(x, y);
     ...

然后有一个渲染记录点的功能：

function renderTrail(pts, c) {
    if (pts.length > 1) {
        c.beginPath();
        c.moveTo(pts[0][0], pts[0][1]);
        for(var i = 1, pt; pt = pts[i]; i++) {
            c.lineTo(pt[0], pt[1]);
        }
        c.stroke();
    }
}

要重置，只需清除点阵列：

pts = [];

你可以在你选择绘制按钮的画布上的鼠标点击事件上执行此操作，或者只在画布顶部放置一个html按钮（在它上面，字面意思在顶部会降低画布的性能）。

html5画布动画。留下一个跟踪和重置按钮

1 个答案: