1 Star 0 Fork 0

jessesang / webstormworkplace

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
circleColor.html 3.27 KB
Copy Edit Web IDE Raw Blame History
<!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
1
https://gitee.com/jessesang/webstormworkplace.git
git@gitee.com:jessesang/webstormworkplace.git
jessesang
webstormworkplace
webstormworkplace
master

Search

14c37bed 8189591 565d56ea 8189591