论坛首页 Web前端技术论坛

看到同事的一个html5利用canvas画图的例子,chrome可用

浏览 4667 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-01-26   最后修改: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的能量进一步发挥出来。
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics