javascript - 延迟的 HTML5 canvas 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 不会延迟执行它之后的所有内容，它只是表示“在将来的某个时间做this，同时继续进行” .

我在 http://jsfiddle.net/alnitak/tGv4x/ 创建了一个 fiddle 这显示了如何解决这个问题。它的核心是:

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

本质上 - 调用一个重复触发自身的函数 (horizo​​ns)，使用外部范围的变量来存储当前坐标。一旦完成，它将控制权移交给另一个函数 (vertix)，该函数对另一个轴执行相同的操作。