您现在的位置是：网站首页> 编程资料编程资料

canvas之万花筒效果的简单实现(推荐)HTML5 Canvas支持移动端的刮刮卡特效基于Html5+Canvas实现2016年七夕情人节倒计时特效源码html5 canvas实现的可用于手机端手指滑动刮刮乐效果源码html5 canvas实现的自定义边数绘制多边图形功能源码基于HTML5 Canvas的水波涟漪特效源码html5基于canvas实现的文字标签云3D旋转动画特效源码用html5的canvas和JavaScript创建一个绘图程序的简单实例

2021-09-04 674人已围观

简介 下面小编就为大家带来一篇canvas之万花筒效果的简单实现(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

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

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

接下来效果图：

代码：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>canvastitle>  
  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之万花筒效果的简单实现(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：用CSS制作三角形和按钮的简单实例CSS3 画基本图形，圆形、椭圆形、三角形等CSS仿网易首页的头部菜单栏按钮和三角形制作方法CSS实现三角效果的简单实例使用css实现三角符号效果

下一篇：纯CSS3单页切换导航菜单界面设计的简单实现HTML5实现响应式圆形导航全屏图片切换excel表格如何制作导航栏效果 制作导航栏切换效果的方法CSS实现导航条Tab切换的三种方法介绍纯CSS实现导航栏Tab切换效果使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网