html5canva绘制圆环填充效果,基于canvas实现的绚丽圆圈效果完整实例

本文实例讲述了基于canvas实现的绚丽圆圈效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

demo

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;

}

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

arcList.push(new Arc());

}

};

var reInit = function() {

var angle = Math.PI*2/init_count;

for(var i=0; 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

var arc = arcList[i];

arc.run ? arc.run() : count++;

}

if(count == init_count) {

if(init_time >= 2) {

reInit();

return;

}

init();

}

}, 100);

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

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