JS基于HTML5的帆布标签实现炫目的色相球动画效果实例

本文实例讲述了射流研究…基于HTML5的帆布标签实现色相球效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html hearteta charset=' UTF-8 '/标题JS画布标签制作色相球/title/headdy canvas/拉票脚本类型='text/javascript'var canvas，ctx，max，p，count window . onload=function(){ var a，b，r；canvas=文档。getelementsbytagname(' canvas ')[0]；CTX=画布。get context(' 2d ')；帆布。宽度=画布。高度=400；ctx.fillRect(0，0，400，400)；最大值=80计数=150;p=[]；r=0；for(a=0；amaxa ){ p.push([Math.cos(r)，Math.sin(r)，0])；r=数学PI * 2/最大值；} for(a=0；amaxa )p.push([0，p[a][0]，p[a][1]])；for(a=0；amaxa )p.push([p[a][1]，0，p[a][0]])；RUS()；};函数rus(){ var a、b、c、d、e、s、tim、p2、xp、yp、xp2、yp2、x、y、z、x1、y1、Z1；CTX。global composite operation=' source-over '；ctx.fillStyle='rgba(0，0，0，0.03)'；ctx.fillRect(0，0，canvas.width，canvas。高度)；CTX。global composite operation=' light '；蒂姆=计数/5;for(e=0；E3；e){ Tim *=1.7；s=1-e/3；a=Tim/59；yp=数学。cos(a)；yp2=数学。罪恶(一)；a=Tim/23；XP=数学。cos(a)；xp2=数学。罪恶(一)；p2=[]；for(a=0；美联社。长度；a){ x=p[a][0]；y=p[a][1]；z=p[a][2]；y1=y * yp z * yp2z 1=y * yp2-z * yp；x1=x * XP Z1 * xp2z=x * xp2-Z1 * XP；z1=Math.pow(2，z * s)；x=x1 * z1y=y1 * z1p2.push([x，y，z])；} s *=120 for(d=0；D3；d){ for(a=0；amaxa){ b=p2[d * max a]；c=p2 [(a1)%最大值d *最大值];CTX。begin path()；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。笔画()；} } }计数；请求动画框架(RUS)；}/脚本/正文/htmlPS:由于这里使用了HTML5的相关技术，建议读者使用火狐、谷歌、歌剧等支持HTML5效果较好的浏览器运行该上述代码。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图形绘制技巧总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。