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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
html5表单的required属性使用
Jul 07 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
xajax写的留言本
2006/11/25 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PDO::query讲解
2019/01/29 PHP
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Vue精简版风格概述
2018/01/30 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python的pip安装以及使用教程
2018/09/18 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
python实现在线翻译功能
2020/03/03 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
秘书岗位职责
2013/11/18 职场文书
应届大专生求职信
2014/06/26 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2014年人事科工作总结
2014/11/19 职场文书
英语读书笔记
2015/07/02 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL