基于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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
javascript验证身份证号
Mar 03 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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中使用Oracle数据库(5)
2006/10/09 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
详解JavaScript中常用的函数类型
2015/11/18 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
Python实现字典的key和values的交换
2015/08/04 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
用python计算文件的MD5值
2020/12/23 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
新闻编辑自荐书范文
2014/02/12 职场文书
优秀护士演讲稿
2014/04/30 职场文书
小学教学工作总结2015
2015/05/13 职场文书
个人收入证明格式
2015/06/24 职场文书
我的生日感言
2015/08/03 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android