使用 SetTimeout() 的 JavaScript 画布动画答案

【问题标题】：JavaScript Canvas Animation Using SetTimeout()使用 SetTimeout() 的 JavaScript 画布动画
【发布时间】：2015-06-26 16:14:06
【问题描述】：

我一直在为可能的 Sierpinski 分形动画编写一段代码，但由于某种原因，动画部分似乎无法正常工作。我还尝试使用 setInterval()，结果相同，即空白画布。这个想法是逐步绘制一个以顶点坐标为参数的等边三角形，就好像有人在一张纸上画它一样。你能看看它有什么问题吗？

顺便说一句，我从一些网络教程中复制了一些画布动画示例，但它们似乎也没有在我的文件中工作。我使用的是最新的 Firefox 和 Chrome，所以我想这不是技术问题。

<!DOCTYPE html>

<style>
  canvas {
   width: 600px;
   height: 600px;
   text-align: center;
   background-color: white;
   background-position: center;
   position: relative;
   top: 0px;
   left: 0px;
   border:1px solid #d3d3d3;
  }

<body>

<canvas id="sCanvas"></canvas>

<script>

这是动画应该发生的地方；从 (Ax,Ay) 到 (Bx,By) 画一条线。

function lineAnimation(x1,y1,x2,y2,ctx) {
  var deltaX = (x2 - x1) / 100;
  var deltaY = (y2 - y1) / 100;
  var x = x1;
  var y = y1;
  var timer = setInterval(function () {
    ctx.moveTo(x,y);
    ctx.lineTo(x+deltaX,y+deltaY);
    ctx.stroke();
    x += deltaX;
    y += deltaY;
  }, 100);
  if ((x===x2) && (y===y2)) clearTimeout(timer);
}



function drawTriangle(Ax,Ay,Bx,By,Cx,Cy,ctx) {

    lineAnimation(Ax,Ay,Bx,By,ctx);
    lineAnimation(Bx,By,Cx,Cy,ctx);
    lineAnimation(Cx,Cy,Ax,Ay,ctx);

}

function init() {

  var canvas=document.getElementById("sCanvas");
  var ctx = canvas.getContext("2d");
  ctx.save();
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;

  drawTriangle(10,10,30,50,50,10);

}

init();

</script>

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

您的函数需要您未包含的参数ctx，因此它们不知道ctx 是什么。您需要做的就是将其包含在drawTriangle()：

drawTriangle(10,10,30,50,50,10,ctx);

And then everything works.

【讨论】：

该死的。非常感谢。让我想起了那次我搜索分号 3 小时。

【解决方案2】：

试试这个

function lineAnimation(x1,y1,x2,y2,ctx) {
  var deltaX = (x2 - x1) / 100;
  var deltaY = (y2 - y1) / 100;
  var x = x1;
  var y = y1;
  var timer = setInterval(function () {
    var canvas=document.getElementById("sCanvas"); //Added Change
    var ctx = canvas.getContext("2d"); //Added Change
    ctx.moveTo(x,y);
    ctx.lineTo(x+deltaX,y+deltaY);
    ctx.stroke();
    x += deltaX;
    y += deltaY;
  }, 100);
  if ((x===x2) && (y===y2)) clearTimeout(timer);
}



function drawTriangle(Ax,Ay,Bx,By,Cx,Cy,ctx) {

    lineAnimation(Ax,Ay,Bx,By,ctx);
    lineAnimation(Bx,By,Cx,Cy,ctx);
    lineAnimation(Cx,Cy,Ax,Ay,ctx);

}

function init() {

  var canvas=document.getElementById("sCanvas");
  var ctx = canvas.getContext("2d");
  ctx.save();
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;

  drawTriangle(10,10,30,50,50,10);

}

init();

它给你一个关于ctx.moveTo(x,y); 和ctx.lineTo(x+deltaX,y+deltaY); 的错误，因为他们无法使用你ctx，这基本上是你canvas 的一个对象。所以只需尝试将它们添加到代码中，一切都会好起来的

DEMO

【讨论】：