每次循環迭代後畫布不更新

我做了一個JavaScript的牛頓分形草圖。我有兩個循環遍歷畫布上的每個像素，但只有整個畫布迭代後纔會出現圖像。是什麼賦予了？每次循環迭代後畫布不更新

我的代碼如下。雖然數學可能有點混亂，微積分，複數和所有，但我相信代碼本身很容易遵循（雖然顯然沒有優化）。你可能想看的函數是cGraph。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Newton Fractal Grapher</title> 
</head> 

<body> 
    <canvas id="myCanvas" width="700" height="700" ></canvas> 
<script type='text/javascript'> 
var winWidth = document.getElementById("myCanvas").clientWidth; 
var winHeight = document.getElementById("myCanvas").clientHeight 
var ctx = document.getElementById("myCanvas").getContext("2d"); 

function cAdd(a,b) {return [a[0]+b[0],a[1]+b[1]];} 

function cSubtract(a,b) {return [a[0]-b[0],a[1]-b[1]];} 

function cMultiply(a,b) {return [a[0]*b[0]-a[1]*b[1],a[1]*b[0]+a[0]*b[1]];} 

function cDivide(a,b) {return [ (a[0]*b[0]+a[1]*b[1])/(b[0]*b[0]+b[1]*b[1]) , (a[1]*b[0]-a[0]*b[1])/(b[0]*b[0]+b[1]*b[1]) ];} 

function cExp(a,b) { 
var x = a; 
for (var i = 1; i < b; i++) 
x = cMultiply(x,a); 
return x; 
} 

var graphXmin = -1.1; 
var graphXmax = 1.1; 
var graphYmin = -1.1; 
var graphYmax = 1.1; 
var graphZmin = -1; 
var graphZmax = 1; 
var graphX; 
var graphY; 
var graphZ; 

function cGraph(func) 
{ 
    var z = [0,0]; 
    for (var x=0; x<winWidth; x++) 
     for (var y=0; y<winHeight; y++) 
     { 
      graphX = (x/winWidth)*(graphXmax - graphXmin)+ graphXmin; 
      graphY = (y/winHeight)*(graphYmax - graphYmin)+ graphYmin; 
      graphZ = func([graphX,graphY]); 
      z[0] = Math.round( (graphZ[0]-graphZmin)/(graphZmax-graphZmin)*255 ); 
      z[1] = Math.round( (graphZ[1]-graphZmin)/(graphZmax-graphZmin)*255 ); 
      ctx.fillStyle = "rgb("+z[0]+","+(255-[z[1]])+",0)"; 
      ctx.fillRect(x, winHeight-y, 1, 1); 
     } 
} 

function cCube(x) {return cSubtract( cExp(x,3) ,[1,0])} 

function cFive(x) {return cSubtract(cExp(x,5) , [1,0]) } 

function cEight(x) {return cSubtract(  cAdd(cExp(x,8) , cMultiply(cExp(x,4) ,[0,4]))  ,  [16,0])} 

function cDeriv(x,func) { 
    return cDivide(
     cSubtract(
      func( cAdd(x,[.0001,0]) ), 
      func( cSubtract(x,[.0001,0]) ) 
     ), 
     [.0002,0] 
    ) 
} 

function cNewton(x,func) 
{ 
    for (count = 0; count < 500; count++) 
    { 
     x = cSubtract(x,cDivide(func(x), cDeriv(x,func))); 
     if (func(x)[0] < 0.001 && func(x)[0] > -0.001) 
      return x; 
    } 
    return [255,255]; 
} 

cGraph( function(x){return cNewton(x,cFive)} ); 

</script> 
</body> 
</html>

來源

2014-05-20 user1637451

瀏覽器等待所有腳本在重新繪製屏幕之前完成運行。因此，在任何事情出現之前，你必須完成所有的循環。

所以你想要做的是打破循環爲setTimeout s或setIntervals，這樣瀏覽器將在每一個之間重繪，你可以看到結果。

這小提琴顯示在行動http://jsfiddle.net/Mw3WB/

一切保持不變execpt的圖形功能

function cGraph(func) 
{ 
    var z = [0,0]; 
    var x = 0; 

    var outer = setInterval(function(){ 
    if(x>= winWidth){ 
     clearInterval(outer); 
    } 
    else{ 
     for (var y=0; y<winHeight; y++) 
     { 
     graphX = (x/winWidth)*(graphXmax - graphXmin)+ graphXmin; 
     graphY = (y/winHeight)*(graphYmax - graphYmin)+ graphYmin; 
     graphZ = func([graphX,graphY]); 
     z[0] = Math.round( (graphZ[0]-graphZmin)/(graphZmax-graphZmin)*255 ); 
     z[1] = Math.round( (graphZ[1]-graphZmin)/(graphZmax-graphZmin)*255 ); 
     ctx.fillStyle = "rgb("+z[0]+","+(255-[z[1]])+",0)"; 
     ctx.fillRect(x, winHeight-y, 1, 1); 
     } 
     x++ 
    } 
    },20); 


}

來源

2014-05-20 02:43:07 powerc9000

謝謝你的解決方案。是20毫秒任意？任何理由不把0？ – user1637451

這完全是任意的。 – powerc9000

每次循環迭代後畫布不更新

回答

相關問題