注册登录

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

时间:2016-02-12 13:19 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【基于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>

关于基于canvas实现的绚丽圆圈效果完整实例的用户互动如下：

　　相关问题：html5 canvas 代码求最简单的动画效果一个圆在左...

　　答：代码如下： Your browser does not support the HTML5 canvas tag. var c=document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var x = 0; var ss = setInterval(function(){ ctx.clearRect(0,0,700,550); //ctx.translate(x,0... >>详细

　　相关问题：html canvas这两种画圆方式怎么不同？

　　答：因为从 0 度角，到 360度，顺时针画，是一个圆。逆时针画，是一个点。你不考虑 360 度的情况，把 360 改成 180，会更容易理解一些。 >>详细

　　相关问题：canvas中如何实现圆形背景图片?

　　答： >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

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

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

关于基于canvas实现的绚丽圆圈效果完整实例的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）