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 相关文章推荐
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
js初始化验证实例详解
Nov 26 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
JavaScript 数组的进化与性能分析
Sep 18 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
js实现双人五子棋小游戏
May 28 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
一段php加密解密的代码
2006/10/09 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javascript 继承实现方法
2009/08/26 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
Python logging模块学习笔记
2014/05/24 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python利用ansible分发处理任务
2015/08/04 Python
遗传算法python版
2018/03/19 Python
python中的django是做什么的
2020/07/31 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
应届生.NET方向面试题
2015/05/23 面试题
大学生实习自我鉴定
2013/12/11 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
cf收人广告词
2014/03/14 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
干部作风建设心得体会
2014/10/22 职场文书
慰问信模板
2015/02/14 职场文书
护士2015年终工作总结
2015/04/29 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android