canvas绘制万花筒效果(代码分享)
更新时间:2017年1月23日 10:00 点击:2002
话不多说,请看代码:
<!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
上一篇: 原生js实现图片放大缩小计时器效果
下一篇: 微信小程序 Toast自定义实例详解
相关文章
- 这篇文章主要为大家详细介绍了js canvas实现滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
JavaScript+html5 canvas绘制的小人效果
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下...2016-01-29JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06- 这篇文章主要给大家介绍了关于微信小程序对图片进行canvas压缩的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-12
- 这篇文章主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22
- 这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-08
- 这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了Canvas实现放大镜效果完整案例分析(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
html+css+js实现canvas跟随鼠标的小圆特效源码
这篇文章主要介绍了html+css+js实现canvas跟随鼠标的小圆特效源码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-15- 这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-02
- 这篇文章主要介绍了JS使用canvas技术模仿echarts柱状图,对canvas感兴趣的同学,可以参考下...2021-04-30
- 这篇文章主要为大家详细介绍了js canvas实现圆形流水动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-19
- 这篇文章主要为大家详细介绍了canvas绘制刮刮卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-07
- 对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生成好不同尺寸的缩略图,传给后端,而后端只需要将前端传过来的图片进行存储就好了...2020-10-03
- 这篇文章主要介绍了JS+canvas五子棋人机对战实现步骤详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-05
HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)
这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-25- 这篇文章主要为大家详细介绍了javascript利用canvas实现鼠标拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-24
- 本文给大家介绍基于JS+Canvas 实现下雨下雪效果,效果非常逼真,适应于各大网站,需要的朋友可以参考下...2016-05-20
- 这篇文章主要为大家详细介绍了javascript使用canvas实现饼状图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-08
JavaScript+html5 canvas制作的圆中圆效果实例
这篇文章主要介绍了JavaScript+html5 canvas制作的圆中圆效果,结合完整实例形式分析了基于JavaScript与html5 canvas技术实现的图形绘制与颜色随机填充技巧,需要的朋友可以参考下...2016-01-29