使用wordpress的用戶有哪些電商seo優(yōu)化是什么意思
實(shí)現(xiàn)會(huì)動(dòng)的圖形，向下播放多張靜態(tài)的圖片。一秒內(nèi)要大于屏幕刷新的幀數(shù)(60) 也就是每隔1/60s執(zhí)行一次函數(shù)在每次繪制的正方形上添加一個(gè)背景色為白色蒙板。
效果圖
源代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Canvas雨滴效果</title><style>body {margin: 0;}.rain {display: block;background-color: #000;}</style>
</head><body><canvas class="rain"></canvas><script>// 1.獲取canvas并設(shè)置大小var canvas = document.querySelector('.rain');var ctxWidth, ctxHeight; // 定義畫布的寬高~~function setResize() { // 根據(jù)瀏覽器窗口的改變，實(shí)時(shí)改變canvas畫布的寬高，和瀏覽器保持一致window.onresize = arguments.callee;ctxWidth = window.innerWidth;ctxHeight = window.innerHeight;canvas.width = ctxWidth;canvas.height = ctxHeight;}();var ctx = canvas.getContext('2d');// 2.繪制單個(gè)會(huì)動(dòng)的雨滴，根據(jù)單個(gè)雨滴進(jìn)行接下來的雨滴對(duì)象Rain處理/* var y = 10;setInterval(function () {// 添加雨滴蒙版，使用透明色，使雨滴向上看起來有逐漸透明的效果ctx.fillStyle = 'rgba(0,0,0,0.05)';ctx.fillRect(0, 0, ctxWidth, ctxHeight);//繪制雨滴小矩形ctx.fillStyle = 'blue';ctx.fillRect(10, y++, 4, 10);}, 1000 / 60); */function random(min, max) { // 生成從min到max之間的隨機(jī)數(shù)return Math.random() * (max - min) + min;}// 3.設(shè)置雨滴對(duì)象function Rain() { };Rain.prototype = {init: function () {this.x = random(0, ctxWidth);this.y = 0;this.vY = random(4, 5); // 雨滴在Y軸上運(yùn)動(dòng)的速度this.h = random(0.8 * ctxHeight, 0.9 * ctxHeight); // 雨滴停止的Y軸位置，整個(gè)畫布的80%-90%高度的地方this.r = 1; // 圓形半徑this.vR = 1; // 圓形半徑變化的速度},draw: function () {if (this.y <= this.h) {//繪制雨滴小矩形ctx.beginPath();ctx.fillStyle = '#31f7f7';ctx.fillRect(this.x, this.y, 4, 10);} else {ctx.beginPath();ctx.strokeStyle = '#31f7f7';ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);ctx.stroke();}},move: function () {if (this.y <= this.h) {this.y += this.vY;} else {if (this.r <= 100) {this.r += this.vR;}else {this.init();}}this.draw();}}// 創(chuàng)建多個(gè)雨滴的函數(shù)，將雨滴push進(jìn)入arrRains中var arrRains = [];function createRain(num) {// 每200ms生成一滴雨滴for (var i = 0; i <= num; i++) {setTimeout(function () {var rain = new Rain();rain.init();rain.draw();arrRains.push(rain);}, 200 * i);}}createRain(50);setInterval(function () {// 添加雨滴蒙版，使用透明色，使雨滴向上看起來有逐漸透明的效果ctx.fillStyle = 'rgba(0,0,0,0.05)';ctx.fillRect(0, 0, ctxWidth, ctxHeight);for (item of arrRains) {item.move();}}, 1000 / 60); // 每1/60秒執(zhí)行一次函數(shù)</script>
</body></html>