Canvas动画(PC端 移动端)
一,介绍与需求
1.1,介绍
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能
1.2,需求
实现特殊的动画效果
二,动画实现
以跟随鼠标/手指移动的火为例
第一步:创建Canvas标签
1 <canvas id="fire"></canvas>
第二步:获取Canvas标签
1 let canvas = document.getElementById('fire'); 2 if (canvas.getContext){ 3 var ctx = canvas.getContext('2d'); 4 // drawing code here 5 } else { 6 alert("不支持Canvas") 7 }
第三步:绘制火花
1 var Spark = function (mouse) { 2 3 this.cx = mouse.x; 4 this.cy = mouse.y; 5 this.x = rand(this.cx - 40, this.cx + 40); 6 this.y = rand(this.cy, this.cy + 5); 7 this.lx = this.x; 8 this.ly = this.y; 9 this.vy = rand(1, 3); 10 this.vx = rand(-4, 4); 11 this.r = rand(0, 1); 12 this.life = rand(4, 5); 13 this.alive = true; 14 this.c = { 15 16 h: Math.floor(rand(2, 40)), 17 s: 100, 18 l: rand(40, 100), 19 a: rand(0.8, 0.9) 20 21 } 22 23 } 24 Spark.prototype.update = function () { 25 26 this.lx = this.x; 27 this.ly = this.y; 28 29 this.y -= this.vy; 30 this.x += this.vx; 31 32 if (this.x < this.cx) 33 this.vx += 0.2; 34 else 35 this.vx -= 0.2; 36 37 this.vy += 0.08; 38 this.life -= 0.1; 39 40 if (this.life <= 0) { 41 42 this.c.a -= 0.05; 43 44 if (this.c.a <= 0) 45 this.alive = false; 46 47 } 48 49 } 50 Spark.prototype.draw = function (ctx) { 51 52 ctx.beginPath(); 53 ctx.moveTo(this.lx, this.ly); 54 ctx.lineTo(this.x, this.y); 55 ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 2) + ")"; 56 ctx.lineWidth = this.r * 2; 57 ctx.lineCap = 'round'; 58 ctx.stroke(); 59 ctx.closePath(); 60 61 ctx.beginPath(); 62 ctx.moveTo(this.lx, this.ly); 63 ctx.lineTo(this.x, this.y); 64 ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")"; 65 ctx.lineWidth = this.r; 66 ctx.stroke(); 67 ctx.closePath(); 68 69 }
第四步:绘制火焰
1 var Flame = function (mouse) { 2 3 this.cx = mouse.x; 4 this.cy = mouse.y; 5 this.x = rand(this.cx - 25, this.cx + 25); 6 this.y = rand(this.cy - 5, this.cy + 5); 7 this.vy = rand(1, 3); 8 this.vx = rand(-1, 1); 9 this.r = rand(20, 30); 10 this.life = rand(3, 6); 11 this.alive = true; 12 this.c = { 13 14 h: Math.floor(rand(2, 40)), 15 s: 100, 16 l: rand(80, 100), 17 a: 0, 18 ta: rand(0.8, 0.9) 19 20 } 21 22 23 } 24 Flame.prototype.update = function () { 25 26 this.y -= this.vy; 27 this.vy += 0.05; 28 29 30 this.x += this.vx; 31 32 if (this.x < this.cx) 33 this.vx += 0.1; 34 else 35 this.vx -= 0.1; 36 37 38 39 40 if (this.r > 0) 41 this.r -= 0.1; 42 43 if (this.r <= 0) 44 this.r = 0; 45 46 47 48 this.life -= 0.15; 49 50 if (this.life <= 0) { 51 52 this.c.a -= 0.05; 53 54 if (this.c.a <= 0) 55 this.alive = false; 56 57 } else if (this.life > 0 && this.c.a < this.c.ta) { 58 59 this.c.a += .08; 60 61 } 62 63 } 64 Flame.prototype.draw = function (ctx) { 65 66 ctx.beginPath(); 67 ctx.arc(this.x, this.y, this.r * 3, 0, 2 * Math.PI); 68 ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 20) + ")"; 69 ctx.fill(); 70 71 ctx.beginPath(); 72 ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); 73 ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")"; 74 ctx.fill(); 75 76 }
第五步:绘制火
1 var Fire = function () { 2 3 this.canvas = document.getElementById('fire'); 4 this.ctx = this.canvas.getContext('2d'); 5 this.canvas.height = window.innerHeight;// window.innerHeight 6 this.canvas.width = window.innerWidth;//window.innerWidth 7 8 this.aFires = []; 9 this.aSpark = []; 10 this.aSpark2 = []; 11 12 13 14 this.mouse = { 15 x: this.canvas.width * .5, 16 y: this.canvas.height * .75, 17 } 18 19 20 21 this.init(); 22 23 } 24 Fire.prototype.init = function () { 25 //跳转语句 26 if (system.win || system.mac || system.xll) { 27 this.canvas.addEventListener('mousemove', this.updateMouse.bind(this), false);//PC端 28 } else { 29 this.canvas.addEventListener('touchmove', this.updateMouse.bind(this), false);//移动端 30 } 31 32 33 } 34 Fire.prototype.run = function () { 35 36 this.update(); 37 this.draw(); 38 39 if (this.bRuning) 40 requestAnimationFrame(this.run.bind(this)); 41 42 } 43 Fire.prototype.start = function () { 44 45 this.bRuning = true; 46 this.run(); 47 48 } 49 Fire.prototype.stop = function () { 50 51 this.bRuning = false; 52 53 } 54 Fire.prototype.update = function () { 55 56 this.aFires.push(new Flame(this.mouse)); 57 this.aSpark.push(new Spark(this.mouse)); 58 this.aSpark2.push(new Spark(this.mouse)); 59 60 61 62 for (var i = this.aFires.length - 1; i >= 0; i--) { 63 64 if (this.aFires[i].alive) 65 this.aFires[i].update(); 66 else 67 this.aFires.splice(i, 1); 68 69 } 70 71 for (var i = this.aSpark.length - 1; i >= 0; i--) { 72 73 if (this.aSpark[i].alive) 74 this.aSpark[i].update(); 75 else 76 this.aSpark.splice(i, 1); 77 78 } 79 80 81 for (var i = this.aSpark2.length - 1; i >= 0; i--) { 82 83 if (this.aSpark2[i].alive) 84 this.aSpark2[i].update(); 85 else 86 this.aSpark2.splice(i, 1); 87 88 } 89 90 } 91 92 Fire.prototype.draw = function () { 93 94 this.ctx.globalCompositeOperation = "source-over"; 95 this.ctx.fillStyle = "rgba( 15, 5, 2, 1 )"; 96 this.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); 97 98 this.grd = this.ctx.createRadialGradient(this.mouse.x, this.mouse.y - 200, 200, this.mouse.x, this.mouse.y - 100, 0); 99 this.grd.addColorStop(0, "rgb( 15, 5, 2 )"); 100 this.grd.addColorStop(1, "rgb( 30, 10, 2 )"); 101 this.ctx.beginPath(); 102 this.ctx.arc(this.mouse.x, this.mouse.y - 100, 200, 0, 2 * Math.PI); 103 this.ctx.fillStyle = this.grd; 104 this.ctx.fill(); 105 106 107 this.ctx.font = "15em Amatic SC"; 108 this.ctx.textAlign = "center"; 109 this.ctx.strokeStyle = "rgb(50, 20, 0)"; 110 this.ctx.fillStyle = "rgb(120, 10, 0)"; 111 this.ctx.lineWidth = 2; 112 this.ctx.strokeText("", this.canvas.width / 2, this.canvas.height * .72); 113 this.ctx.fillText("", this.canvas.width / 2, this.canvas.height * .72); 114 115 116 117 this.ctx.globalCompositeOperation = "overlay";//or lighter or soft-light 118 119 for (var i = this.aFires.length - 1; i >= 0; i--) { 120 121 this.aFires[i].draw(this.ctx); 122 123 } 124 125 this.ctx.globalCompositeOperation = "soft-light";//"soft-light";//"color-dodge"; 126 127 for (var i = this.aSpark.length - 1; i >= 0; i--) { 128 129 if ((i % 2) === 0) 130 this.aSpark[i].draw(this.ctx); 131 132 } 133 134 135 this.ctx.globalCompositeOperation = "color-dodge";//"soft-light";//"color-dodge"; 136 137 for (var i = this.aSpark2.length - 1; i >= 0; i--) { 138 139 this.aSpark2[i].draw(this.ctx); 140 141 } 142 143 144 } 145 146 Fire.prototype.updateMouse = function (e) { 147 //跳转语句 148 if (system.win || system.mac || system.xll) {//PC端 149 this.mouse.x = e.clientX; 150 this.mouse.y = e.clientY; 151 } else {//移动端 152 e.preventDefault();//阻止默认行为 153 this.mouse.x = e.changedTouches[0].clientX; 154 this.mouse.y = e.changedTouches[0].clientY; 155 } 156 157 158 }
第六步:调用
1 var oCanvas; 2 init = function () { 3 4 oCanvas = new Fire(); 5 oCanvas.start(); 6 7 8 } 9 window.onload = init;
随机数函数
1 rand = function (min, max) { return Math.random() * (max - min) + min; };
效果如下：
三,PC端与移动端处理
3.1,判断是PC端还是移动端
1 //平台、设备和操作系统 2 var system = { 3 win: false, 4 mac: false, 5 xll: false 6 }; 7 //检测平台 8 var p = navigator.platform; 9 system.win = p.indexOf("Win") == 0; 10 system.mac = p.indexOf("Mac") == 0; 11 system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 12 13 //跳转语句 14 if (system.win || system.mac || system.xll) { 15 this.canvas.addEventListener('mousemove', this.updateMouse.bind(this), false);//PC端 鼠标移动 16 } else { 17 this.canvas.addEventListener('touchmove', this.updateMouse.bind(this), false);//移动端 手指滑动 18 }
3.2,PC端还是移动端的事件处理
1 //跳转语句 2 if (system.win || system.mac || system.xll) {//PC端 3 this.mouse.x = e.clientX; 4 this.mouse.y = e.clientY; 5 } else {//移动端 6 e.preventDefault();//阻止默认行为 7 this.mouse.x = e.changedTouches[0].clientX; 8 this.mouse.y = e.changedTouches[0].clientY; 9 }
移动端需禁止缩放
1 <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">