HTML5的畫布JavaScript的延遲問題

Question

我試圖拖延圖形繪製時，但我想我遇到了setTimeout的問題。任何幫助或建議將不勝感激。

<canvas id="myCanvas"></canvas> 
<script type="text/javascript"> 
function vertix(y,ctx){ 

    ctx.moveTo(0, y); 
    ctx.lineTo(500, y); 
} 
function horizons(x,ctx){ 
    ctx.moveTo(x, 0); 
    ctx.lineTo(x, 375); 
} 
var canvas=document.getElementById('myCanvas'); 
var ctx=canvas.getContext('2d'); 
var context=ctx; 
var i; 
ctx.fillStyle='#FF0000'; 
canvas.setAttribute('align', 'center'); 
canvas.setAttribute('width', '800px'); 
canvas.setAttribute('height', '800px'); // clears the canvas 

for (var x = 0.5; x < 500; x += 10) { 
    setTimeout("horizons(x,ctx)",1000,'JavaScript'); 
} 
for (var y = 0.5; y < 375; y += 10) { 
    setTimeout("vertix(y,ctx)",1000,'JavaScript'); 
} 
ctx.strokeStyle = "#eee"; 
ctx.stroke(); 
ctx.beginPath(); 
ctx.moveTo(0, 40); 
ctx.lineTo(240, 40); 
ctx.moveTo(260, 40); 
ctx.lineTo(500, 40); 
ctx.moveTo(495, 35); 
ctx.lineTo(500, 40); 
ctx.lineTo(495, 45); 
ctx.moveTo(60, 0); 
ctx.lineTo(60, 153); 
ctx.moveTo(60, 173); 
ctx.lineTo(60, 375); 
ctx.moveTo(65, 370); 
ctx.lineTo(60, 375); 
ctx.lineTo(55, 370); 
ctx.strokeStyle = "#000"; 
ctx.stroke(); 
context.font = "bold 12px sans-serif"; 
context.fillText("x", 248, 43); 
context.fillText("y", 58, 165); 
context.font = "bold 12px sans-serif"; 
context.fillText("x", 248, 43); 
context.fillText("y", 58, 165); 
context.textBaseline = "top"; 
context.fillText("(0 , 0)", 8, 5); 
context.textAlign = "right"; 
context.textBaseline = "bottom"; 
context.fillText("(500 , 375)", 492, 370); 
context.fillRect(0, 0, 3, 3); 
context.fillRect(497, 372, 3, 3); 

context.font = " 'TangerineRegular'"; 
context.fillText("Graph", 500, 400); 
</script> 

Answer 1

你有兩個基本問題：

1. 使用基於字符串的超時處理程序將無法正常工作，因爲你的x和y（和ctx）參數不在範圍

2. setTimeout不會延遲它後面的所有事情的執行，它只是意味着「在未來某個時候做這個，同時繼續去」。

我在http://jsfiddle.net/alnitak/tGv4x/上創建了一個小提琴，它展示瞭如何解決這個問題。它的核心是：

var hor_x = 0.5; 
var vert_y = 0.5; 
var delay = 100; 

function vertix() { 
    ctx.beginPath(); 
    ctx.moveTo(0, vert_y); 
    ctx.lineTo(500, vert_y); 
    ctx.stroke(); 
    if (vert_y < 375) { 
     vert_y += 10; 
     setTimeout(vertix, delay); 
    } 
} 

function horizons() { 
    ctx.beginPath(); 
    ctx.moveTo(hor_x, 0); 
    ctx.lineTo(hor_x, 375); 
    ctx.stroke(); 
    if (hor_x < 500) { 
     hor_x += 10; 
     setTimeout(horizons, delay); 
    } else { 
     setTimeout(vertix, delay); 
    } 
} 

horizons(); 

本質 - 調用一個函數（horizons），其反覆觸發本身，使用外部範圍的變量來存儲當前座標。一旦完成，它將控制交給另一個功能（vertix），它爲另一個軸做同樣的事情。

Answer 2

試試這個它的工作：

<canvas id="myCanvas"></canvas> 
<script> 
var canvas=document.getElementById('myCanvas'); 
var ctx=canvas.getContext('2d'); 
var context=ctx; 
var i; 

function vertix(y){ 
    ctx.moveTo(0, y); 
    ctx.lineTo(500, y); 
} 
function horizons(x){ 
    ctx.moveTo(x, 0); 
    ctx.lineTo(x, 375); 
} 


ctx.fillStyle='#FF0000'; 
canvas.setAttribute('align', 'center'); 
canvas.setAttribute('width', '800px'); 
canvas.setAttribute('height', '800px'); // clears the canvas 

for (var x = 0.5; x < 500; x += 10) {   
horizons(x) 
} 
for (var y = 0.5; y < 375; y += 10) { 
vertix(y) 
} 

ctx.strokeStyle = "#eee"; 
ctx.stroke(); 
ctx.beginPath(); 
ctx.moveTo(0, 40); 
ctx.lineTo(240, 40); 
ctx.moveTo(260, 40); 
ctx.lineTo(500, 40); 
ctx.moveTo(495, 35); 
ctx.lineTo(500, 40); 
ctx.lineTo(495, 45); 
ctx.moveTo(60, 0); 
ctx.lineTo(60, 153); 
ctx.moveTo(60, 173); 
ctx.lineTo(60, 375); 
ctx.moveTo(65, 370); 
ctx.lineTo(60, 375); 
ctx.lineTo(55, 370); 
ctx.strokeStyle = "#000"; 
ctx.stroke(); 
context.font = "bold 12px sans-serif"; 
context.fillText("x", 248, 43); 
context.fillText("y", 58, 165); 
context.font = "bold 12px sans-serif"; 
context.fillText("x", 248, 43); 
context.fillText("y", 58, 165); 
context.textBaseline = "top"; 
context.fillText("(0 , 0)", 8, 5); 
context.textAlign = "right"; 
context.textBaseline = "bottom"; 
context.fillText("(500 , 375)", 492, 370); 
context.fillRect(0, 0, 3, 3); 
context.fillRect(497, 372, 3, 3); 

context.font = " 'TangerineRegular'"; 
context.fillText("Graph", 500, 400); 

</script> 

Answer 3

<canvas id="myCanvas"></canvas> 
<script type="text/javascript"> 
var hor_x = 0.5; 
var vert_y = 0.5; 
var delay = 100; 
function vertix() { 
    ctx.beginPath(); 
    ctx.moveTo(0, vert_y); 
    ctx.lineTo(500, vert_y); 
    ctx.stroke(); 
    if (vert_y < 375) { 
     vert_y += 10; 
     setTimeout(vertix, delay); 
    } 
} 

function horizons() { 
    ctx.beginPath(); 
    ctx.moveTo(hor_x, 0); 
    ctx.lineTo(hor_x, 375); 
    ctx.stroke(); 
    if (hor_x < 500) { 
     hor_x += 10; 
     setTimeout(horizons, delay); 
    } else { 
     setTimeout(vertix, delay); 
    } 
} 
/* 
function vertix(y,ctx){ 

    ctx.moveTo(0, y); 
    ctx.lineTo(500, y); 
} 
function horizons(x,ctx){ 
    ctx.moveTo(x, 0); 
    ctx.lineTo(x, 375); 
}*/ 
var canvas=document.getElementById('myCanvas'); 
var ctx=canvas.getContext('2d'); 
var context=ctx; 
var i; 
ctx.fillStyle='#FF0000'; 
canvas.setAttribute('align', 'center'); 
canvas.setAttribute('width', '800px'); 
canvas.setAttribute('height', '800px'); // clears the canvas 
horizons(); 
vertix(); 
/* 
for (var x = 0.5; x < 500; x += 10) { 
    setTimeout("horizons(x,ctx)",1000,'JavaScript'); 
} 
for (var y = 0.5; y < 375; y += 10) { 
    setTimeout("vertix(y,ctx)",1000,'JavaScript'); 
}*/ 
ctx.strokeStyle = "#eee"; 
ctx.stroke(); 
ctx.beginPath(); 
ctx.moveTo(0, 40); 
ctx.lineTo(240, 40); 
ctx.moveTo(260, 40); 
ctx.lineTo(500, 40); 
ctx.moveTo(495, 35); 
ctx.lineTo(500, 40); 
ctx.lineTo(495, 45); 
ctx.moveTo(60, 0); 
ctx.lineTo(60, 153); 
ctx.moveTo(60, 173); 
ctx.lineTo(60, 375); 
ctx.moveTo(65, 370); 
ctx.lineTo(60, 375); 
ctx.lineTo(55, 370); 
ctx.strokeStyle = "#000"; 
ctx.stroke(); 
context.font = "bold 12px sans-serif"; 
context.fillText("x", 248, 43); 
context.fillText("y", 58, 165); 
context.font = "bold 12px sans-serif"; 
context.fillText("x", 248, 43); 
context.fillText("y", 58, 165); 
context.textBaseline = "top"; 
context.fillText("(0 , 0)", 8, 5); 
context.textAlign = "right"; 
context.textBaseline = "bottom"; 
context.fillText("(500 , 375)", 492, 370); 
context.fillRect(0, 0, 3, 3); 
context.fillRect(497, 372, 3, 3); 

context.font = " 'TangerineRegular'"; 
context.fillText("Graph", 500, 400); 
</script> 

其高達我想