网站模板 单页,免费咨询妇科医生在线,9158个人空间登录,怎么注册一个小公司实现会动的图形#xff0c;向下播放多张静态的图片。一秒内要大于屏幕刷新的帧数(60) 也就是每隔1/60s执行一次函数在每次绘制的正方形上添加一个背景色为白色蒙板。
效果图 源代码 !DOCTYPE html
html langenheadmeta charset向下播放多张静态的图片。一秒内要大于屏幕刷新的帧数(60) 也就是每隔1/60s执行一次函数在每次绘制的正方形上添加一个背景色为白色蒙板。
效果图 源代码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleCanvas雨滴效果/titlestylebody {margin: 0;}.rain {display: block;background-color: #000;}/style
/headbodycanvas classrain/canvasscript// 1.获取canvas并设置大小var canvas document.querySelector(.rain);var ctxWidth, ctxHeight; // 定义画布的宽高~~function setResize() { // 根据浏览器窗口的改变实时改变canvas画布的宽高和浏览器保持一致window.onresize arguments.callee;ctxWidth window.innerWidth;ctxHeight window.innerHeight;canvas.width ctxWidth;canvas.height ctxHeight;}();var ctx canvas.getContext(2d);// 2.绘制单个会动的雨滴根据单个雨滴进行接下来的雨滴对象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之间的随机数return Math.random() * (max - min) min;}// 3.设置雨滴对象function Rain() { };Rain.prototype {init: function () {this.x random(0, ctxWidth);this.y 0;this.vY random(4, 5); // 雨滴在Y轴上运动的速度this.h random(0.8 * ctxHeight, 0.9 * ctxHeight); // 雨滴停止的Y轴位置整个画布的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();}}// 创建多个雨滴的函数将雨滴push进入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秒执行一次函数/script
/body/html
