为什么我的线不随时间绘制？

Question

我正在尝试在一定时间内（准确地说是十秒）在 canvas 上画一条线。我能够看到脚本正在计数到某个时间然后停止，但我没有看到正在绘制的线。谁能告诉我我做错了什么？

$(document).ready(function(){
  canvas = document.getElementById("test");
  ctx = canvas.getContext("2d");
  var count = 0;
  var start_x = 0;
  var start_y = 100;
  var end_x = 50;
  var end_y = 100;

  var counter = setInterval(countNumbers, 1000);

  ctx.beginPath();
  ctx.moveTo(start_x, start_y);
  console.log("Start");
  
  function countNumbers(){
    count += 1;
    ctx.lineTo((start_x + count), start_y);
    console.log(count);
    if((start_x == end_x) || (count == 10)){
      clearInterval(counter);
      console.log("End");
    }
  }
  
  ctx.lineWidth = 5;
  ctx.strokeStyle = "white";
  ctx.stroke();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<canvas id="test"></canvas>

Answer 1

尝试将 stroke 移到 Interval 内。因为在您的情况下 stroke 会在没有 lineTo 数据的情况下立即调用。之后 lineTo 在区间函数中调用，没有 stroke.

就无法渲染

$(document).ready(function(){
  canvas = document.getElementById("test");
  ctx = canvas.getContext("2d");
  var count = 0;
  var start_x = 0;
  var start_y = 100;
  var end_x = 50;
  var end_y = 100;

  var counter = setInterval(countNumbers, 1000);

  ctx.beginPath();
  ctx.moveTo(start_x, start_y);
  console.log("Start");

  function countNumbers(){
    count += 1;
    ctx.lineTo((start_x + count), start_y);
    console.log(count);
    if((start_x == end_x) || (count == 10)){
      clearInterval(counter);
      console.log("End");

      ctx.lineWidth = 5; // <----- move here
      ctx.strokeStyle = "white";
      ctx.stroke();
    }
  }



})

还要确保您没有在白色背景

上绘制白色线条

Answer 2

$(document).ready(function(){
  canvas = document.getElementById("test");
  ctx = canvas.getContext("2d");
  var count = 0;
  var start_x = 0;
  var start_y = 100;
  var end_x = 50;
  var end_y = 100;

  var counter = setInterval(countNumbers, 1000);

  ctx.beginPath();
  ctx.moveTo(start_x, start_y);
  console.log("Start");      
  ctx.lineWidth = 5;
  ctx.strokeStyle = "black";      
  
  function countNumbers(){
    count += 1;
    ctx.lineTo((start_x + count), start_y);
                    
  ctx.stroke();
    console.log(count);
    if((start_x == end_x) || (count == 10)){
      clearInterval(counter);
      console.log("End");        
  ctx.strokeStyle = "white";
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="test"></canvas>

Answer 3

我会为这一步倒数。这将使您了解步骤。

我修改了您的代码以允许您将参数传递到区间函数以最小化全局范围变量。由于我将区间的引用传递给自身，因此您不再需要全局变量。

我创建了两个函数，第一个将创建一个路径然后对其进行描边。第二个将在间隔的每个刻度后划一条子线。我添加了一个简单的奇偶检查以在颜色之间交换。

$(document).ready(function() {
  var canvas  = $('canvas#test')[0];
  var ctx     = canvas.getContext('2d');
  var count   = 10;
  var start_x = 50,               start_y = 50;
  var end_x   = 250,              end_y   = 150;
  var delta_x = end_x - start_x,  delta_y = end_y - start_y;
  var step_x  = delta_x / count,  step_y  = delta_y / count;

  canvas.width  = 300;
  canvas.height = 200;
  
  // Fill canvas with solid black.
  ctx.rect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'black';
  ctx.fill();
  
  // Kick off the line stroke timer. No more global variables!
  var counter = setInterval(function(opts) {
    // Pass a reference to the timer into the interval.
    strokeLineTimerLive(counter, opts);
  }, 500, {
    ctx : ctx,
    n   : count,
    x1  : start_x,
    y1  : start_y,
    x2  : end_x,
    y2  : end_y,
    dx  : step_x,
    dy  : step_y,
  });
  
  // After the interval has ended, the path is finally stroked. 
  function strokeLineTimer(timer, opts) {
    if (!opts.init) {
      console.log("Start");
      opts.ctx.beginPath();
      opts.ctx.moveTo(opts.x1, opts.y1);
      opts.ctx.lineWidth = 5;
      opts.ctx.strokeStyle = 'white';
      opts.init = true;
    }
    opts.n -= 1;
    opts.ctx.lineTo((opts.x1 += opts.dx), (opts.y1 += opts.dy));
    console.log(opts.n);
    if ((opts.x1 == opts.x2) || (opts.n == 0)){
      clearInterval(timer);
      opts.ctx.stroke();
      console.log("End");
    }
  }
  
  // After each tick of the interval, a line is stroked.
  function strokeLineTimerLive(timer, opts) {
    if (!opts.init) {
      console.log("Start");
      opts.ctx.beginPath();
      opts.ctx.moveTo(opts.x1, opts.y1);
      opts.ctx.lineWidth = 5;
      opts.init = true;
    }
    opts.n -= 1;
    opts.ctx.strokeStyle = opts.n % 2 == 0 ? 'white' : 'red';
    opts.ctx.lineTo((opts.x1 += opts.dx), (opts.y1 += opts.dy));
    opts.ctx.stroke();
    console.log(opts.n);
    if ((opts.x1 == opts.x2) || (opts.n == 0)){
      clearInterval(timer);
      console.log("End");
    } else {
      opts.ctx.beginPath();
      opts.ctx.moveTo(opts.x1, opts.y1);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<canvas id="test"></canvas>

为什么我的线不随时间绘制？

Why is my line not drawing over time?

javascript

html5-canvas