基于canvas实现的绚丽圆圈效果完整实例


Posted in Javascript onJanuary 26, 2016

本文实例讲述了基于canvas实现的绚丽圆圈效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

基于canvas实现的绚丽圆圈效果完整实例

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   body {
    margin:0; background:black;
   }
   #canvas {
    border:3px solid gray; box-shadow:0px 0px 2px 2px #D5D5D5; margin-left:100px; margin-top:50px;
   }
   #power {
    position:fixed; bottom:50px; right:50px; 
   }
   #power a {
    color:green; text-decoration:none; display:inline-block; padding:20px; border:2px solid orange; box-shadow:0px 0px 2px 2px blue;
    font-size:30px;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script type="text/javascript">
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   var colorList = "abcdefABCDEF0123456789".split("");
   var colorListLength = colorList.length;
   var arcList = [];
   function createArc(attr) {
    ctx.beginPath();
    ctx.fillStyle = attr.color || "black";
    ctx.arc(attr.x, attr.y, attr.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
   }
   function color() {
    var color = "#";
    for(var i=0; i<6; i++) {
     color += colorList[Math.round(Math.random()*colorListLength)];
    }
    return color;
   }
   function Arc() {
    this.count = 0;
    this.r = 5;
    this.x = Math.round(Math.random()*500);
    this.add = Math.round(Math.random()*5);
    this.limit = Math.round(Math.random()*100)
    this.mode = Math.round(Math.random());
    var _self = this;
    _self.run = function() {
     if(_self.r >= _self.limit) {
      _self.run = null;
      return;
     }
     _self.x += _self.add*(_self.mode == 1 ? 1 : -1);
     createArc({x: _self.x, y:Math.round(Math.random()*400), r: _self.r, color: color()});
     _self.r += 5;
     return _self;
    };
    return this;
   }
   var init_count = 150;
   var init_time = 0;
   var init = function() {
    init_time++;
    arcList.length = 0;
    for(var i=0; i<init_count; i++) {
     arcList.push(new Arc());
    }
   };
   var reInit = function() {
    var angle = Math.PI*2/init_count;
    for(var i=0; i<init_count; i++) {
     var _angle = i*angle;
     createArc({x: 250 + 250*Math.cos(_angle), y: 250 + 250*Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 200*Math.cos(_angle), y: 250 + 200*Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 150*Math.cos(_angle), y: 250 + 150*Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 100*Math.cos(_angle), y: 250 + 100*Math.sin(_angle), r: 5, color:color()});
    }
   };
   init();
   var globalInterval = setInterval(function() {
    ctx.clearRect(0, 0, 500, 500);
    var count = 0;
    for(var i=0; i<init_count; i++) {
     var arc = arcList[i];
     arc.run ? arc.run() : count++;
    }
    if(count == init_count) {
     if(init_time >= 2) {
      reInit();
      return;
     }
     init();
    }
   }, 100);
  </script>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
Node.js Buffer用法解读
May 18 Javascript
小程序自定义日历效果
Dec 29 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 #Javascript
js实现的页面矩阵图形变换特效
Jan 26 #Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 #Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 #Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 #Javascript
一篇文章掌握RequireJS常用知识
Jan 26 #Javascript
JS正则表达式比较常见用法
Jan 26 #Javascript
You might like
PHP中设置时区方法小结
2012/06/03 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
详解php用static方法的原因
2018/09/12 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
简单使用Python自动生成文章
2014/12/25 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python如何在bool函数中取值
2020/09/21 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
大学生军训自我鉴定
2014/02/12 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
违章停车检讨书
2014/10/21 职场文书
高中家长意见怎么写
2015/06/03 职场文书
上班旷工检讨书
2015/08/15 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
Redis唯一ID生成器的实现
2022/07/07 Redis