主页 / 网络编程 /

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

网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了基于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-: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.PI2);
    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.PI2/init_count;
    for(var i=0; i<init_count; i++) {
     var _angle = iangle;
     createArc({x: 250 + 250Math.cos(_angle), y: 250 + 250Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 200Math.cos(_angle), y: 250 + 200Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 150Math.cos(_angle), y: 250 + 150Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 100Math.cos(_angle), y: 250 + 100Math.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特效相关内容感兴趣的读者可查看本站专题《》及《》

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

上一篇：JavaScript小技巧整理篇(非常全) 下一篇：基于canvas实现的钟摆效果完整实例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by