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

 更新时间:2016年08月24日 10:31:57   作者:onestopweb  
这篇文章主要介绍了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.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程序设计有所帮助。

相关文章

  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧

    这篇文章主要介绍了Chrome调试折腾记之JS断点调试技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 一文教你如何实现localStorage的过期机制

    一文教你如何实现localStorage的过期机制

    要知道localStorage本身并没有提供过期机制,既然如此那就只能我们自己来实现了,这篇文章主要给大家介绍了关于如何实现localStorage过期机制的相关资料,需要的朋友可以参考下
    2022-02-02
  • JS实现滑动条案例

    JS实现滑动条案例

    这篇文章主要为大家详细介绍了JS实现滑动条案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS创建对象的十种方式总结

    JS创建对象的十种方式总结

    面向对象是一种重要的编程范式,如何灵活的创建对象,是对编程基本功的考验,本来我们来探讨一下JavaScript中创建对象的十种方式,感兴趣的小伙伴可以了解下
    2023-10-10
  • js实现的类似于asp数据字典的数据类型代码实例

    js实现的类似于asp数据字典的数据类型代码实例

    这篇文章主要介绍了js实现的类似于asp数据字典的数据类型代码实例,即js实现的字典数据类型,需要的朋友可以参考下
    2014-09-09
  • JS实现环形进度条(从0到100%)效果

    JS实现环形进度条(从0到100%)效果

    这篇文章主要介绍了JS实现环形进度条(从0到100%)效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 如何利用JS实现时间轴动画效果

    如何利用JS实现时间轴动画效果

    时间轴动画和帧式动画有很大不同,但相比之下时间轴方式来的更直观和简便,下面这篇文章主要给大家介绍了关于如何利用JS实现时间轴动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • javascript动态创建对象的属性详解

    javascript动态创建对象的属性详解

    在本篇文章中我们给大家分享了关于javascript动态创建对象的属性的相关知识点以及代码分享,需要的朋友们参考学习下。
    2018-11-11
  • 用JS实现图片轮播效果代码(一)

    用JS实现图片轮播效果代码(一)

    这篇文章主要介绍了用JS实现图片轮播效果代码(一)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论