基于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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
Javascript的闭包详解
Dec 26 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
angularJS开发注意事项
2018/05/26 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
explicit和implicit的含义
2012/11/15 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
安全生产责任书
2014/03/12 职场文书
社区娱乐活动方案
2014/08/21 职场文书
社区创先争优承诺书
2014/08/30 职场文书
社区母亲节活动总结
2015/02/10 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers