前端特效22:使用js生成动态画圆特效

2018-02-27 10:57:24来源:http://www.igeekbar.com/igeekbar/post/1035.htm作者:iGeekbar人点击

分享

今天,小编将与大家分享web前端特效荟萃系列第22期,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~



第21期,给大家分享一个使用javascript生成的动态画圆效果,相关代码如下:


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cloth</title>
<style>
body,
html {
margin: 0px;
padding: 0px;
position: fixed;
}

</style>
</head>
<body>
<script>
var canvas = document.createElement("canvas"),
c = canvas.getContext("2d");
var w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight;
document.body.appendChild(canvas);
//You can play with these variables for diferent results.
var vq = -3,
step = 0.01,
circleSizeDecrease = 3 / 4,
numOfCircles = 5,
tailLength = 1000;
var pos = [],
vel = [],
cNum = numOfCircles,
speed = [],
hist = [];
for (i = 0; i < cNum + 1; i++) {
pos[i] = {
x: w / 2,
y: h / 2,
r: 50,
};
vel[i] = step;
speed[i] = 0;
console.log(pos);
}
function draw() {
for (i = 0; i < cNum; i++) {
vel[i + 1] = vq * vel[i];
speed[i] += vel[i];
pos[i + 1] = {
x: (pos[i].r + pos[i + 1].r) * Math.cos(speed[i]) + pos[i].x,
y: (pos[i].r + pos[i + 1].r) * Math.sin(speed[i]) + pos[i].y,
r: circleSizeDecrease * pos[i].r
};
c.beginPath();
c.arc(pos[i].x, pos[i].y, pos[i].r, 0, 2 * Math.PI);
c.fillStyle = "hsla(10,0%,100%," + 0.5 / (i + 1) + ")";
c.fill();
}
hist.push(pos[cNum - 1]);
if (hist.length > tailLength) {
hist.splice(hist.length - tailLength, 1);
}
console.log(hist);
for (j = 1; j < hist.length; j++) {
c.beginPath();
c.lineTo(hist[j].x, hist[j].y, 1, 0, 2 * Math.PI);
c.lineTo(hist[j + 1].x, hist[j + 1].y, 1, 0, 2 * Math.PI);
c.strokeStyle = "hsla(10,0%,100%," + 1 + ")";
c.stroke();
}
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function loop() {
setTimeout(function() {
window.requestAnimFrame(loop);
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
draw();
}, 1000 / 60);
}
window.addEventListener('resize', function() {
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight;
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
});
loop();
</script>
</body>
</html>

在线演示:Here~


今天的分享就是这些啦,这里是igeekbar,希望可以给各位geek小伙伴们带来帮助呦~~~如果你制作出了或收藏了哪些炫酷的前端特效,赶快留言分享给我们呦~~~


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台