脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → canvas绚丽圆圈效果

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

 更新时间：2016年01月26日 10:52:50   作者：m1870164  
这篇文章主要介绍了基于canvas实现的绚丽圆圈效果,以完整实例形式分析了JavaScript结合html5的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>

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

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

您可能感兴趣的文章:

相关文章

  • javascript 动态修改样式和层叠样式表代码

    javascript 动态修改样式和层叠样式表代码

    javascript 动态修改样式和层叠样式表代码，需要的朋友可以参考下。
    2010-04-04
  • Javascript中字符串相关常用的使用方法总结

    Javascript中字符串相关常用的使用方法总结

    本篇文章主要介绍了Javascript中字符串相关常用的使用方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 《javascript设计模式》学习笔记一：Javascript面向对象程序设计对象成员的定义分析

    《javascript设计模式》学习笔记一：Javascript面向对象程序设计对象成员的定义分析

    这篇文章主要介绍了《javascript设计模式》学习笔记Javascript面向对象程序设计对象成员的定义,结合实例形式分析了《javascript设计模式》中JavaScript面向对象程序设计的原理、定义、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js文字横向滚动特效

    js文字横向滚动特效

    这篇文章主要介绍了js文字横向滚动特效，实现过程很简单，文字在某块区域内横向无间隙滚动，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 微信小程序实现顶部固定 底部分页滚动效果

    微信小程序实现顶部固定 底部分页滚动效果

    这篇文章主要介绍了微信小程序实现顶部固定底部分页滚动效果，本文大概给大家分享三种解决方案，每种方案给大家详细剖析通过代码解析哪种方案更适合，感兴趣的朋友跟随小编一起看看吧
    2022-10-10
  • JS中的XMLHttpRequest 对象示例详解

    JS中的XMLHttpRequest 对象示例详解

    xmlhttp是一种浏览器对象, 可用于模拟http的GET和POST请求,xmlhttp配合JavaScript可以实现页面数据在无刷新下的定时数据更新,如果应用在聊天室、文字直播上,可以取得较好的视觉效果,这篇文章主要介绍了JS——XMLHttpRequest 对象,需要的朋友可以参考下
    2024-01-01
  • JS debug跳过的7种方法总结

    JS debug跳过的7种方法总结

    在JS开发过程中,代码可能存在一些语法或者逻辑上的错误,导致程序不能得到我们想要的结果,这时就需要我们找到并修复这些错误,我们将查找和修复错误的过程称为调试或代码调试,这篇文章主要给大家介绍了关于JS debug跳过的7种方法,需要的朋友可以参考下
    2023-07-07
  • ES11屡试不爽的新特性,你用上了几个

    ES11屡试不爽的新特性,你用上了几个

    这篇文章主要介绍了ES11屡试不爽的新特性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • JavaScript中16进制颜色与rgb颜色互相转换的示例代码

    JavaScript中16进制颜色与rgb颜色互相转换的示例代码

    这篇文章主要介绍了JavaScript中16进制颜色与rgb颜色互相转换的示例代码,通过示例代码介绍了JS 颜色16进制、rgba相互转换问题,感兴趣的朋友一起看看吧
    2024-01-01
  • JavaScript 继承详解（六）

    JavaScript 继承详解（六）

    在本章中，我们将分析Prototypejs中关于JavaScript继承的实现,需要的朋友可以参考下
    2016-10-10

最新评论