HTML5 - 超时后在画布上绘制

我想在超时时间后在画布上绘制一条线。其中一个“lineTo”参数正在从另一个脚本中声明的变量中发送一个值，并正在作为window.var传递....HTML5 - 超时后在画布上绘制

我有一个控制台日志设置为在与在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>

来源

2014-10-17 Synyster

这个变量在哪里以及如何定义？ – Joseph 2014-10-17 18:18:24

我在标签之间有一个单独的脚本，它触发了一个函数“onload”。该函数发送到服务器并解析一小组数据点。其中一点是传递给window.var。我很难过，因为值显示在控制台日志中，所以我知道该变量已定义....只是无法弄清楚为什么画布不会将此变量映射到其中一个变量lineTo参数并绘制线条。 – Synyster 2014-10-17 18:40:22

好吧，所以我在“context.lineTo（end，28）;”中替换了var用一个静态数字“context.lineTo（55，28）;”，并且该行也不是绘制的。显然，这与变量无关。当代码不在render（）函数内时，代码似乎工作。任何人都可以告诉我在这里搞乱了什么？ – Synyster 2014-10-17 18:54:46

用户错误....

我使用的是所见即所得的网页生成器，我使用的层。一些如何，画布元素被标记为“可见度：隐藏”;

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

对所有，感谢评论。

来源

2014-10-20 14:50:57 Synyster

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>

来源

2014-10-17 18:51:37 markE

我不知道以这种方式投射它，所以感谢那些信息。不幸的是，我将变量更改为一个静态整数，并且该线仍然无法绘制，所以它必须是导致问题的渲染函数中的某个东西。 – Synyster 2014-10-17 19:05:31

您的代码似乎适用于我（请参阅添加到我的答案中的示例）...至少是您向我们展示的部分。该问题似乎并未出现在渲染中。 – markE 2014-10-17 19:31:13

HTML5 - 超时后在画布上绘制

回答

相关问题