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创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
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插件 HTMLPurifier HTML解析器
2013/07/01 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
Smarty模板配置实例简析
2019/07/20 PHP
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
讲解Python中的标识运算符
2015/05/14 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
Python接口自动化测试的实现
2020/08/28 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
高中生自我评价个人范文
2013/11/09 职场文书
高二学生评语大全
2014/04/25 职场文书
高中班级口号
2014/06/09 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
灵魂歌王观后感
2015/06/17 职场文书
学习党史心得体会2016
2016/01/23 职场文书
交通事故协议书范本
2016/03/19 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
vue实力踩坑之push当前页无效
2022/04/10 Vue.js