今天, 小编将与大家分享 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>
来源: http://igeekbar.com/igeekbar/post/1035.htm