canvas绘制万花筒效果（代码分享）
更新时间：2017年01月20日 15:12:01 作者：web卿年
本文主要分享了canvas绘制万花筒效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
话不多说，请看代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
本文为大家介绍下如何改变隐藏的input中value的值，一句代码就可以实现，感性的朋友可以参考下2013-12-12
有些时候我们需要针对某些IE下的兼容性写单独的JS处理代码,这只是简简单单为了兼容行啊，有多种方法可以实现，小编整理了一下，感兴趣的朋友可以了解下，或许对你有所帮助2013-01-01
这篇文章主要介绍了JS+CSS实现类似QQ好友及黑名单效果的树型菜单,涉及JavaScript结合鼠标事件针对页面元素CSS样式的动态操作技巧,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了JavaScript 判断数据类型的4种方法，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
这篇文章主要为大家介绍了JavaScript跳出iframe框架示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-11-11
这篇文章主要介绍了js实现简单的联动菜单效果,涉及javascript针对页面元素的遍历、读取及设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript实现滑动选择日期功能，基于sui-mobile的移动端实现，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要为大家详细介绍了微信小程序实现表格前后台分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
详解如何使用JavaScript中Promise类实现并发任务控制
在JavaScript中,Promise是一种用于管理异步操作的强大工具,但是,有时候需要更高级的控制,以限制同时执行的任务数量,以避免系统资源超负荷,本文将深入探讨JavaScript中的并发任务控制,并介绍如何创建一个自定义的Promise类——ConcurrentPromise2023-08-08
本文主要介绍了egg.js的基本使用实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论