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 - 超時後在畫布上繪製

回答

相關問題