欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-25 22:11:16
下面小编就为大家带来一篇canvas之万花筒效果的简单实现(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 16-08-16...

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之万花筒效果的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。