JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016-08-24 10:31
1581 查看
运行效果截图如下:
具体代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas标签制作色相球</title> </head> <body> <canvas></canvas> <script type="text/javascript"> var canvas,ctx,max,p,count; window.onload=function(){ var a,b,r; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,400,400); max=80; count=150; p=[]; r=0; for(a=0;a<max;a++){ p.push([Math.cos(r),Math.sin(r),0]); r+=Math.PI*2/max; } for(a=0;a<max;a++)p.push([0,p[a][0],p[a][1]]); for(a=0;a<max;a++)p.push([p[a][1],0,p[a][0]]); rus(); }; function rus(){ var a,b,c,d,e,s,tim,p2,xp,yp,xp2,yp2,x,y,z,x1,y1,z1; ctx.globalCompositeOperation = "source-over"; ctx.fillStyle="rgba(0,0,0,0.03)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; tim=count/5; for(e=0;e<3;e++){ tim*=1.7; s=1-e/3; a=tim/59; yp=Math.cos(a); yp2=Math.sin(a); a=tim/23; xp=Math.cos(a); xp2=Math.sin(a); p2=[]; for(a=0;a<p.length;a++){ x=p[a][0];y=p[a][1];z=p[a][2]; y1=y*yp+z*yp2; z1=y*yp2-z*yp; x1=x*xp+z1*xp2; z=x*xp2-z1*xp; z1=Math.pow(2,z*s); x=x1*z1; y=y1*z1; p2.push([x,y,z]); } s*=120; for(d=0;d<3;d++){ for(a=0;a<max;a++){ b=p2[d*max+a]; c=p2[((a+1)%max)+d*max]; ctx.beginPath(); ctx.strokeStyle="hsla("+((a/max*360)|0)+",70%,60%,0.15)"; ctx.lineWidth=Math.pow(6,b[2]); ctx.lineTo(b[0]*s+200,b[1]*s+200); ctx.lineTo(c[0]*s+200,c[1]*s+200); ctx.stroke(); } } } count++; requestAnimationFrame(rus); } </script> </body> </html>
PS:由于这里使用了HTML5的相关技术,建议读者使用火狐、谷歌、opera等支持HTML5效果较好的浏览器运行该上述代码。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- HTML5 中的 canvas 标签 实现动画效果
- 基于html5 canvas实现漫天飞雪效果实例
- JS实现切换标签页效果实例代码
- js(JavaScript)实现TAB标签切换效果的简单实例
- 基于html5 canvas和js实现的水果忍者网页版
- 基于html5 canvas和js实现的水果忍者网页版
- javascript+HTML5的Canvas实现Lab单车动画效果
- HTML5 Canvas 图像动画的实现(实例小球弹跳)
- HTML5 Canvas动画效果实现原理
- 一个JS动画框架-基于HTML5::Canvas
- HTML5 canvas标签实现刮刮卡效果
- HTML5 Canvas 基于OO的动画实例
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5 Canvas动画效果实现原理
- js简单实现标签云效果实例
- HTML5组件Canvas实现图像灰度化(步骤+实例效果)
- HTML5 Canvas动画效果实现原理
- html5 canvas结合js实现的非常酷的ascii animation动画特效
- js简单实现标签云效果实例
- 基于HTML5 Canvas粒子效果文字动画特效