JS基于HTML5的canvas标签实现炫目的色相球动画效果
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了JS基于HTML5的canvas标签实现色相球效果,结合实例形式分析了基于canvas标签实现图形绘制的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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.PI2/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=yyp+zyp2; z1=yyp2-zyp; x1=xxp+z1xp2; z=xxp2-z1xp; z1=Math.pow(2,zs); x=x1z1; y=y1z1; p2.push([x,y,z]); } s=120; for(d=0;d<3;d++){ for(a=0;a<max;a++){ b=p2[dmax+a]; c=p2[((a+1)%max)+dmax]; ctx.beginPath(); ctx.strokeStyle="hsla("+((a/max360)|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程序设计有所帮助。
编程语言
- 宿迁百度关键词排名指南:实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购:如何为您的业务赋能
- 安徽百度关键词seo贵不贵,一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广:提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化:提升网站可见性的全方位指
- 涞水SEO:提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化:提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广:提升您的网络可见性
- 萝北整站优化:提升您网站流量和排名的全面指