利用HTML5的canvas制作万花筒动画特效
2017-08-18 09:42
501 查看
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 #canvas{ 6 background-color:#cccccc; 7 8 } 9 </style> 10 <script> 11 window.onload=function(){ 12 var canvas=document.getElementById("canvas"); 13 var cobj=canvas.getContext("2d"); 14 // var num=150; 15 var arr=[]; 16 //var angle=0; 17 setInterval(function(){ 18 cobj.clearRect(0,0,600,600); 19 for(var i=0;i<arr.length;i++) 20 { 21 22 cobj.save(); 23 cobj.translate(300,300); 24 cobj.scale(arr[i].scale,arr[i].scale); 25 cobj.rotate(arr[i].angle*Math.PI/180);//旋转时的圆心为定义旋转前画布的原点位置,后面更改了原点的位置只影响到后面的绘制,下面的矩形就是原点在(50,50)地方的,而旋转的圆心在(100,100)处 26 cobj.beginPath(); 27 cobj.fillStyle=arr[i].color; 28 cobj.rect(arr[i].num,arr[i].num,30,30); 29 cobj.fill(); 30 cobj.restore(); 31 } 32 33 34 },60) 35 setInterval(function(){ 36 for(var i=0;i<arr.length;i++) 37 { 38 if( arr[i].num<=0) 39 { 40 arr.splice(i,1);//删掉当前元素; 41 continue;//同时退出本次循环 42 43 } 44 //变化过程中的储存的设置很重要,如果变化的储存没有设置好则有可能会达不到效果 45 arr[i].angle+=2; 46 arr[i].num-=0.2; 47 arr[i].scale-=0.002; 48 if(arr[i].scale<=0.2) 49 arr[i].scale=0.2; 50 } 51 52 },60) 53 setInterval(function(){ 54 var rect={angle:0,num:150,scale:1,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"} ; 55 arr.push(rect); 56 },1000) 57 58 } 59 </script> 60 </head> 61 <body> 62 <canvas id="canvas" width=600px height=600px> 63 您的浏览器已经过期了! 64 </canvas> 65 66 </body> 67 </html>
相关文章推荐
- 利用HTML5的canvas制作万花筒动画特效
- 分享8款令人惊叹的HTML5 Canvas动画特效
- html5使用canvas画布制作圆形加载动画
- HTML5尝鲜(让canvas像flash一样工作,从而制作复杂的动画)
- html5 canvas酷炫3D背景打开动画特效
- 利用html5制作柱状图,饼图,折线图等等 有特效
- 基于HTML5 Canvas粒子效果文字动画特效
- 利用html5制作一个时钟动画
- html5 canvas结合js实现的非常酷的ascii animation动画特效
- JavaScript+html5 canvas实现图片破碎重组动画特效
- HTML5 canvas绘图制作打击视频玻璃破碎动画效果
- 精选6款神奇的HTML5 Canvas动画特效
- 7款炫酷的HTML5 Canvas动画特效
- html5 canvas结合js实现的非常酷的ascii animation动画特效
- 自己写的HTML5 canvas动画制作函数,非常简单易懂
- 【分享】HTML5的Canvas制作3D动画效果分享
- HTML5 canvas画布元素 制作 动态花朵动画
- HTML5 Canvas 3D旋转动画 模糊发光特效
- HTML5标签canvas制作动画