canvas绘制万花筒效果(代码分享)


Posted in Javascript onJanuary 20, 2017

话不多说,请看代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>万花筒</title>
<style>
canvas{
 background:#eee;
 }
</style>
<script>
window.onload = function(){
 var canvas = document.getElementById("canvas");
 var cobj = canvas.getContext("2d");
 var arr = [];
 var t=setInterval(function(){
  cobj.clearRect(0,0,600,600);
   for(var i=0;i<arr.length;i++){
  cobj.save();
  cobj.translate(300,300);
  cobj.scale(arr[i].scales,arr[i].scales);
  cobj.rotate(arr[i].angle*Math.PI/180);
  cobj.fillStyle = arr[i].color;
  cobj.fillRect(arr[i].num,arr[i].num,30,30);
  cobj.restore();
 }
 },50);
 setInterval(function(){
  for(var i=0;i<arr.length;i++){
    if(arr[i].num<=0){
   arr.splice(i,1);
   continue;
  }
  arr[i].angle+=2;
  arr[i].num-=0.2;
  arr[i].scales-=0.002;
  if(arr[i].scales<=0.2){
   arr[i].scales=0.2;
   }
  }
  },50);
 setInterval(function(){
  var rect = {angle:0,num:150,scales:1,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"};
  arr.push(rect);
  },600);
 }
</script>
</head>
<body>
<canvas width="600" height="600" id="canvas"></canvas>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
清除输入框内的空格
Dec 21 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 #Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 #Javascript
轻松理解Javascript变量的相关问题
Jan 20 #Javascript
js+css3实现旋转效果
Jan 20 #Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 #Javascript
浅谈angularjs $http提交数据探索
Jan 20 #Javascript
原生js实现无限循环轮播图效果
Jan 20 #Javascript
You might like
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
js date 格式化
2017/02/15 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
JavaScript计算出两个数的差值
2020/03/19 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
如何在python中实现线性回归
2020/08/10 Python
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
八年级历史教学反思
2014/01/10 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
员工工作表扬信
2015/05/05 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python