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


Posted in Javascript onAugust 24, 2016

本文实例讲述了JS基于HTML5的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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
React Native 截屏组件的示例代码
Dec 06 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 #Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 #Javascript
JS简单实现无缝滚动效果实例
Aug 24 #Javascript
JS动态加载脚本并执行回调操作
Aug 24 #Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 #Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 #Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 #Javascript
You might like
php简单浏览目录内容的实现代码
2013/06/07 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python网站验证码识别
2016/01/25 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python Subprocess模块原理及实例
2019/08/26 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
运动会闭幕式解说词
2014/02/21 职场文书
企业法人代表任命书
2014/06/06 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
先进集体申报材料
2014/12/25 职场文书
家属慰问信
2015/02/14 职场文书
学校推普周活动总结
2015/05/07 职场文书
休假证明书
2015/06/24 职场文书
文艺委员竞选稿
2015/11/19 职场文书
协议书格式模板
2016/03/24 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL