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

最新推荐文章于 2007-11-18 16:45:00 发布

happyheipi

最新推荐文章于 2007-11-18 16:45:00 发布

阅读量577

点赞数

分类专栏： css 技术 web标准文章标签： ajax firefox browser date function 图形

本文链接：https://blog.csdn.net/happyheipi/article/details/1799048

版权

css 技术同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

web标准

24 篇文章 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>

happyheipi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大家帮忙看看这段代码（来自ajax修炼之道）

从《ajax修炼之道》里摘出来的一段有关canvas的代码，可是在firefox和ie里都不能达到应有的效果，正确的网页效果应该是画出来的一段漂亮的图形。对canvas一直都不是特别懂，但觉得他很神奇，期望高人指点迷津！！！多谢！！！代码如下：canvas demo: with beginPath() and closePath()Speed Your browser does not supp
复制链接

扫一扫

专栏目录