canvas之万花筒效果的简单实现(推荐)

(编辑:jimmy 日期: 2024/10/31 浏览:2)

canvas也有css3里transform的变换功能,transform的底层运算的方式是运用了线性代数里矩阵,而矩阵是在我们的生活实践中会经常被使用,它可以把复杂的空间问题呈现出来,它还有很多实践的地方,然后不懂它的人会觉得很难,如果要钻研,这方面知识是不能少的。

canvas里封装好的变换函数:scale()、rotate()、translate()、transform()、setTransform();而它们只要传数字进去即可,单位不用传,还有这里角度单位是弧度,这些是与css里的区别,transform()、setTransform();在与这个变换都有个记忆保存叠加的功能,而setTransform()帮

你消除这些功能了,换句话说,setTransform() 允许您缩放、旋转、移动并倾斜当前的环境。

至于使用方式到w3c里查手册。

接下来效果图:

canvas之万花筒效果的简单实现(推荐)

代码:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>canvas</title>  
  6.     <style>  
  7.     body{   
  8.         background: #eee;   
  9.     }   
  10.     canvas{   
  11.         background: #fff;   
  12.     }   
  13.     </style>  
  14. </head>  
  15. <body>  
  16.     <canvas width="800" height="800"></canvas>  
  17.     <script>  
  18.     var oCas=document.getElementsByTagName("canvas")[0];   
  19.     var cas=oCas.getContext("2d");   
  20.     var arr=[];   
  21.   
  22.     /*绘制数据内容*/   
  23.     setInterval(function(){   
  24.         cas.clearRect(0,0,800,800);   
  25.         for(var i=0;i<arr.length;i++){   
  26.             cas.save();   
  27.             cas.beginPath();   
  28.             cas.translate(400,400);   
  29.             cas.rotate(arr[i].num*Math.PI/180);   
  30.             cas.scale(arr[i].num2,arr[i].num2);   
  31.             cas.fillStyle=arr[i].color;   
  32.             cas.rect(arr[i].num1,0,20,20);   
  33.             cas.fill();   
  34.             cas.restore();   
  35.             if(arr[i].num1<=0){   
  36.                 arr.splice(i,1);   
  37.             }else{   
  38.                 arr[i].num++;   
  39.                 arr[i].num2-=0.0015;   
  40.                 arr[i].num1-=0.4;   
  41.             }   
  42.         }   
  43.     },60);   
  44.   
  45.     /*存储数据*/   
  46.     setInterval(function(){   
  47.         var obj={   
  48.             "num":0,   
  49.             "num1":300,   
  50.             "num2":1,   
  51.             "color":"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"   
  52.         };   
  53.         arr.push(obj);   
  54.     },1000);   
  55.   
  56.     </script>  
  57. </body>  
  58. </html>  

要多个图形输出可以先使用个数组把数据存起来,然后循环画出数据的内容,最后在数据循环完后就清除掉画布,加上变换的值得变化,这样就可以做到动画的效果。

以上这篇canvas之万花筒效果的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。