javascript - HTML5 - 超时后在 Canvas 上绘制

Question

我试图在超时后在 Canvas 上画一条线。 “lineTo”参数之一正在从另一个脚本中声明的变量发送一个值，并作为 window.var 传递......

我设置了一个控制台日志，以便在 Canvas 脚本中访问变量的同时执行。

onLoad，一切都按其应有的方式执行。超时后，控制台显示变量有值，但 Canvas 线未绘制。

起初我没有插入超时，并且变量不断返回为未定义。我选择超时，因为我还没有完全理解回调。

如有任何建议，我们将不胜感激!

<script>
   window.setTimeout(render,8500); 

 function render(){   
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var end = window.testVar;

  context.beginPath();
  context.moveTo(4, 28);
  context.lineTo(end, 28);
  context.lineWidth = 10;
  context.stroke();

  console.log(end);
 }
</script>

Answer 1

context.lineTo 需要一个数字，因此将您的 testVar 转换为数字

例如:

var end = parseInt(window.testVar);

上面的代码对我来说效果很好...该线在指定的延迟后自行绘制:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

window.testVar=23;

window.setTimeout(render,2000); 



function render(){   
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var end = window.testVar;

  context.beginPath();
  context.moveTo(4, 28);
  context.lineTo(end, 28);
  context.lineWidth = 10;
  context.stroke();

  console.log(end);

}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>