Question

我一直在为一个可能的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>

Answer 1

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

中

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

And then everything works.

Answer 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基本上是{{1}}的对象。所以只要尝试在代码中添加它们就能正常工作

<强> DEMO

使用SetTimeout（）的JavaScript Canvas动画

2 个答案: