Question

我试图在超时期限后在画布上画一条线。其中一个＆＃34; lineTo＆＃34;参数正在从另一个脚本中声明的变量发送一个值，并作为window.var传递....

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

onLoad，一切都按预期执行。超时后，控制台显示变量具有值，但不绘制画布线。

起初我没有插入超时，变量保持不变。我选择暂停，因为我还没有完全理解回调。

非常感谢任何建议！

<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);

上面的代码对我来说运行正常...该行在指定的延迟后自行绘制：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

用户错误....

我正在使用WYSIWYG Web Builder，而且我正在使用图层。有些方面，canvas元素被标记为＆＃34; visibility：hidden＆＃34 ;;

由于画布的背景是透明的，我没有抓住它。

对所有人，感谢您发表评论。

HTML5 - 超时后在画布上绘制

2 个答案: