看到同事的一个html5利用canvas画图的例子,chrome可用
hatedance
2010-01-26
例子在这里:http://dl.dropbox.com/u/258641/fun/fractal.htm
代码也粘出来: <canvas id="screen" width="600" height="400"> </canvas> <script type="text/javascript"> var canvas = document.getElementById("screen"); var ctx = canvas.getContext("2d"); function drawingall() { for(var i = 1; i < 600; i++) { for(var j = 1; j < 400; j++) { drawing(i,j); } } } function drawing(i,j) { var x = (i-300)/300; var y = (j-200)/200; var t = runaway(x,y); if (t == false) { var x = Math.round(Math.abs((i-300)/300)*255); var y = Math.round(Math.abs((j-200)/200)*255); var tmp = "rgb(" + String(x) + "," + String(y) + "," + String(0) + ")"; ctx.fillStyle = tmp; ctx.fillRect (i, j, 1, 1); } if (t == true) { ctx.fillStyle = "rgb(250,250,250)"; ctx.fillRect (i, j, 1, 1); } } function runaway(x,y) { var c = Number(document.getElementById("p1").value); //var c = 0.275; for(var k = 1; k < 100; k++) { x = x*x - y*y + c; y = 2*x*y; var m = Math.sqrt(x*x + y*y); if ((m > 2)) { return true; break; }; } return false; } </script> 我这里对分形图本身没有兴趣,但兴趣的一个问题是:我们可不可以在canvas基础上做一整套窗口组件系统,比如Swing for js? 我感觉目前js的性能也许还不够,(也许是分形图算法不高效),但眼看各种ajax框架满天飞,我想钟情于js的同学们一定迫不及待把js的能量进一步发挥出来。 |