[英]HTML5 canvas javascript problems in delay
我試圖在繪制圖形時進行延遲,但是我認為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>
您有兩個基本問題:
使用基於字符串的超時處理程序將不起作用,因為x
和y
(和ctx
)參數不在范圍內
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
),該功能對另一根軸執行相同的操作。
試試這個它的工作:
<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>
<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>
它完成了我想要的程度
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.