基于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 相关文章推荐
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 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多文件上传下载示例分享
2014/02/20 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Python中的高级数据结构详解
2015/03/27 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python八皇后问题的解决方法
2018/09/27 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
会计顶岗实习心得
2014/01/25 职场文书
体育专业自荐书
2014/05/29 职场文书
计划生育标语
2014/06/23 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
职位证明模板
2015/06/23 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python