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


Posted in HTML / CSS onAugust 16, 2016

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

HTML / CSS 相关文章推荐
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 #HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 #HTML / CSS
css3的过滤效果简单实例
Aug 03 #HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 #HTML / CSS
关于box-sizing的全面理解
Jul 28 #HTML / CSS
css3动画效果小结(推荐)
Jul 25 #HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 #HTML / CSS
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP HTML代码串截取代码
2008/12/29 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
yii的CURD操作实例详解
2014/12/04 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
Laravel下生成验证码的类
2017/11/15 PHP
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
vuex实现简易计数器
2016/10/27 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
UNIX文件类型
2013/08/29 面试题
精彩的英文自荐信
2014/01/30 职场文书
授权委托书协议书
2014/10/16 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL