Question

我试图在一定时间内对画布进行线条绘制（确切地说是10秒）。我能够看到脚本正在计算到某个时间然后停止，但我没有看到正在绘制的线。谁能告诉我我做错了什么？

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

我会倒数一步。这将使您能够找出步骤。

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

我创建了两个函数，第一个将创建一个路径，然后将其描边。第二个将在间隔的每个滴答之后描绘一个子行。我添加了一个简单的偶数矩检查来交换颜色。

＆＃13;

$(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);
    }
  }
});

＆＃13;

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

＆＃13;

为什么我的线不会随着时间推移？

3 个答案: