关闭

大家帮忙看看这段代码(来自ajax修炼之道)

390人阅读 评论(0) 收藏 举报
从《ajax修炼之道》里摘出来的一段有关canvas的代码,可是在firefox和ie里都不能达到应有的效果,正确的网页效果应该是画出来的一段漂亮的图形。
 
对canvas一直都不是特别懂,但觉得他很神奇,期望高人指点迷津!!!多谢!!!

代码如下:

<!DOCTYPE html>
<title>canvas demo: with beginPath() and closePath()</title>
<p>Speed</p>
<canvas width="300" height="300"> Your browser does not support canvas.</canvas>

<script>
   function drawStuff(){
      var phi=1.61803399;
      var canvas=document.gerElementsByTageName("canvas")[0];
      if(canvas.getContext){
         var ctx=canvas.getContext("2d");
         ctx.save();
         ctx.translate(canvas.width/2.0,canvas.height/2.0);
         var i=0;
         var then=new Date();
         for(var i=0;i<300;i++){
             var theta=(i*phi*Math.PI*0.05);
             var r=0.4*i;
             var xc=r*Math.cos(theta);
             var yc=r*Math.sin(theta);
             var rho=(i/150.0)*Math.PI;
             var alpha=(i+50)/700;
             var red=Math.floor(192.0+(63.0*Math.sin(rho)));
             var green=Math.floor(192.0+(63.0*Math.cos(rho)));
             var blue=Math.floor(Math.sqrt(red));
             ctx.beginPath();
             ctx.fillStyle="rgba("+red+","+green+","+blue+","+(1.0-alpha)+");
             ctx.arc(xc,yc,alpha*40.0,0,2*Math.PI,0);
             ctx.fill();
             ctx.arc(xc,yc,alpha*40.0,0,2*Math.PI,0);
             ctx.strokeStyle="rgba(0,0,0,"+alpha+")";
             ctx.stroke();
             ctx.closePath();
         }
         var now=new Date();
         document.getElementsByTageName('p')[0].textContent +=" "+(now-then)+"ms";
         ctx.restore();
     }
   }
drawStuff();
</script>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:46240次
    • 积分:799
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:24篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论