使用SetTimeout進行JavaScript Canvas動畫（）

我一直在研究一個可能是Sierpinski分形動畫的代碼塊，但由於某些原因，動畫部分似乎不起作用。我也嘗試使用setInterval（），結果相同，即空白畫布。這個想法是一步一步地繪製一個頂點座標爲等參數的等邊三角形，就好像有人在一張紙上畫了一樣。你能看看它有什麼問題嗎？使用SetTimeout進行JavaScript Canvas動畫（）

在附註上，我從幾個Web教程中複製了幾個畫布動畫示例，但它們都沒有出現在我的文件中。我使用Firefox和Chrome，都是最新的，所以我想這不是一個技術問題。

<!DOCTYPE html> 

<style> 
    canvas { 
    width: 600px; 
    height: 600px; 
    text-align: center; 
    background-color: white; 
    background-position: center; 
    position: relative; 
    top: 0px; 
    left: 0px; 
    border:1px solid #d3d3d3; 
    }

<body> 

<canvas id="sCanvas"></canvas> 

<script>

這就是動畫應該發生;從（Ax，Ay）到（Bx，By）繪製一條線。

function lineAnimation(x1,y1,x2,y2,ctx) { 
    var deltaX = (x2 - x1)/100; 
    var deltaY = (y2 - y1)/100; 
    var x = x1; 
    var y = y1; 
    var timer = setInterval(function() { 
    ctx.moveTo(x,y); 
    ctx.lineTo(x+deltaX,y+deltaY); 
    ctx.stroke(); 
    x += deltaX; 
    y += deltaY; 
    }, 100); 
    if ((x===x2) && (y===y2)) clearTimeout(timer); 
} 



function drawTriangle(Ax,Ay,Bx,By,Cx,Cy,ctx) { 

    lineAnimation(Ax,Ay,Bx,By,ctx); 
    lineAnimation(Bx,By,Cx,Cy,ctx); 
    lineAnimation(Cx,Cy,Ax,Ay,ctx); 

} 

function init() { 

    var canvas=document.getElementById("sCanvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.save(); 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.strokeStyle = 'black'; 
    ctx.lineWidth = 2; 

    drawTriangle(10,10,30,50,50,10); 

} 

init(); 

</script>

來源

2015-04-20 the-space-zeddie

嘗試這個

function lineAnimation(x1,y1,x2,y2,ctx) { 
    var deltaX = (x2 - x1)/100; 
    var deltaY = (y2 - y1)/100; 
    var x = x1; 
    var y = y1; 
    var timer = setInterval(function() { 
    var canvas=document.getElementById("sCanvas"); //Added Change 
    var ctx = canvas.getContext("2d"); //Added Change 
    ctx.moveTo(x,y); 
    ctx.lineTo(x+deltaX,y+deltaY); 
    ctx.stroke(); 
    x += deltaX; 
    y += deltaY; 
    }, 100); 
    if ((x===x2) && (y===y2)) clearTimeout(timer); 
} 



function drawTriangle(Ax,Ay,Bx,By,Cx,Cy,ctx) { 

    lineAnimation(Ax,Ay,Bx,By,ctx); 
    lineAnimation(Bx,By,Cx,Cy,ctx); 
    lineAnimation(Cx,Cy,Ax,Ay,ctx); 

} 

function init() { 

    var canvas=document.getElementById("sCanvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.save(); 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.strokeStyle = 'black'; 
    ctx.lineWidth = 2; 

    drawTriangle(10,10,30,50,50,10); 

} 

init();

這是給你一個錯誤在ctx.moveTo(x,y);和ctx.lineTo(x+deltaX,y+deltaY);因爲泰德不能使用你ctx這基本上是你的canvas的對象。所以只是嘗試添加他們的代碼，事情會正常工作

DEMO

來源

2015-04-20 04:40:24 cracker