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

2019-11-20 09:10:01

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS基于HTML5的canvas标签实现色相球效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!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程序设计有所帮助。

上一篇：BootStrap的table表头固定tbody滚动的实例代码

下一篇：Javascript中indexOf()和lastIndexOf应用方法实例