canvas火焰动态效果 随鼠标移动
效果图
从上图可以看出,主要分为4个部分:
Fire单词字样
随鼠标而动的火光
呈现黄白红色的火焰
不断盘旋往上的火花
除了Fire字样,其他三样都随鼠标移动。
那么,就从如何实现这四样效果入手。
全局变量的声明
//更新页面用requestAnimationFrame替代setTimeout window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var canvas = document.getElementById('fire'); var ctx = canvas.getContext('2d'); var w = canvas.width = canvas.offsetWidth; var h = canvas.height = canvas.offsetHeight;
1. 实现Fire单词字样,这里用到一个字体,css代码中引入
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
//Fire单词 ctx.font = "15em Amatic SC"; ctx.textAlign = "center"; ctx.strokeStyle = "rgb(50, 20, 0)"; ctx.fillStyle = "rgb(120, 10, 0)"; ctx.lineWidth = 2; ctx.strokeText("Fire", w / 2, h * .72); ctx.fillText("Fire", w / 2, h * .72);
这里Filre字样是填充效果,外面还包着一层未填充的Fire单词效果,颜色为 rgb(50, 20, 0)。
2. 实现随鼠标移动的火光。
//火光阴影 var grd = ctx.createRadialGradient(this.x, this.y - 200, 200, this.x, this.y - 100, 0); grd.addColorStop(0, "rgb(15, 5, 2)"); grd.addColorStop(1, "rgb(30, 10, 2)"); ctx.beginPath(); ctx.arc(this.x, this.y - 100, 200, 0, 2 * Math.PI); ctx.fillStyle = grd; ctx.fill();
这里用到了渐变色,原理可查看http://www.runoob.com/tags/canvas-createradialgradient.html 。
具体如何随鼠标移动,放到最后面讲。
3. 实现火焰,由图可以看出,就是很多不同颜色的圆,因为要画很多个圆,这里就定义一个对象,方便多次生成实例。
function flame(x, y) { this.cx = x; this.cy = y; this.x = rand(this.cx - 25, this.cx + 25); this.y = rand(this.cy - 5, this.cy + 5); this.vx = rand(-1, 1); this.vy = rand(1, 3); this.r = rand(20, 30); this.life = rand(3, 6); this.alive = true; this.c = { h: Math.floor(rand(2, 40)), s: 100, l: rand(80, 100), a: 0, ta: rand(0.8, 0.9) } this.update = update; function update() { this.y -= this.vy; this.vy += 0.05; this.x += this.vx; if (this.x < this.cx) { this.vx += 0.1; } else { this.vx -= 0.1; } if (this.r > 0) { this.r -= 0.1; } else { this.r = 0; } this.life -= 0.15; if (this.life <= 0) { this.c.a -= 0.05; if (this.c.a <= 0) { this.alive = false; } } else if (this.life > 0 && this.c.a < this.c.ta) { this.c.a += .08; } } this.draw = draw; function draw(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.r * 3, 0, 2 * Math.PI); ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 20) + ")"; ctx.fill(); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.fillStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")"; ctx.fill(); } }
其中HSLA(H,S,L,A)为一种色彩模式 https://www.html.cn/book/css/values/color/hsla.htm,为了实现火焰效果,这些圆的颜色各不相同,色调亮度在一定范围内随机生成。而从下面代码中可以看出
this.life -= 0.15; if (this.life <= 0) { this.c.a -= 0.05; if (this.c.a <= 0) { this.alive = false; } } else if (this.life > 0 && this.c.a < this.c.ta) { this.c.a += .08; }
透明度a值是先不断增加,再不断减小直到a <= 0 火焰alive 为false,这个火焰就可以退休了,会从火焰数组中删除这个实例。
4. 火花,可以看出火花是由很多线条组成的,这里也要定义一个对象
function spark(x, y) { this.cx = x; this.cy = y; this.x = rand(this.cx - 40, this.cx + 40); this.y = rand(this.cy, this.cy + 5); this.lx = this.x; this.ly = this.y; this.vx = rand(-4, 4); this.vy = rand(1, 3); this.r = rand(0, 1); this.life = rand(4, 5); this.alive = true; this.c = { h: Math.floor(rand(2, 40)), s: 100, l: rand(40, 100), a: rand(0.8, 0.9) } this.update = update; function update() { this.lx = this.x; this.ly = this.y; this.y -= this.vy; this.x += this.vx; if (this.x < this.cx) { this.vx += 0.2; } else { this.vx -= 0.2; } this.vy += 0.08; this.life -= 0.1; if (this.life <= 0) { this.c.a -= 0.05; if (this.c.a <= 0) { this.alive = false; } } } this.draw = draw; function draw(ctx) { ctx.beginPath(); ctx.moveTo(this.lx, this.ly); ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + (this.c.a / 2) + ")"; ctx.lineWidth = this.r * 2; ctx.lineCap = 'round'; ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.lx, this.ly); ctx.lineTo(this.x, this.y); ctx.strokeStyle = "hsla( " + this.c.h + ", " + this.c.s + "%, " + this.c.l + "%, " + this.c.a + ")"; ctx.lineWidth = this.r; ctx.stroke(); } }
最后,如何实现随鼠标移动的效果。
定义一个Fire对象,在对象方法中实现上述4中元素的绘制与更新显示
//定义fire对象 function fire(x, y) { this.x = x; this.y = y; this.aFires = []; this.aSparks = []; this.aSparks2 = []; this.update = update; function update(x, y) { this.aFires.push(new flame(x, y)); this.aSparks.push(new spark(x, y)); this.aSparks2.push(new spark(x, y)); for (var i = 0; i < this.aFires.length; i++) { if (this.aFires[i].alive) { this.aFires[i].update(); } else { this.aFires.splice(i, 1); } } //console.log(aFires.length) for (var i = 0; i < this.aSparks.length; i++) { if (this.aSparks[i].alive) { this.aSparks[i].update(); } else { this.aSparks.splice(i, 1); } } for (var i = 0; i < this.aSparks2.length; i++) { if (this.aSparks2[i].alive) { this.aSparks2[i].update(); } else { this.aSparks2.splice(i, 1); } } } this.draw = draw; function draw(ctx) { //设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上。 //source-over 默认。在目标图像上显示源图像。 //源图像 = 您打算放置到画布上的绘图。 //目标图像 = 您已经放置在画布上的绘图。 ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(15, 5, 2, 1)"; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); //火光阴影 var grd = ctx.createRadialGradient(this.x, this.y - 200, 200, this.x, this.y - 100, 0); grd.addColorStop(0, "rgb(15, 5, 2)"); grd.addColorStop(1, "rgb(30, 10, 2)"); ctx.beginPath(); ctx.arc(this.x, this.y - 100, 200, 0, 2 * Math.PI); ctx.fillStyle = grd; ctx.fill(); //Fire单词 ctx.font = "15em Amatic SC"; ctx.textAlign = "center"; ctx.strokeStyle = "rgb(50, 20, 0)"; ctx.fillStyle = "rgb(120, 10, 0)"; ctx.lineWidth = 2; ctx.strokeText("Fire", w / 2, h * .72); ctx.fillText("Fire", w / 2, h * .72); ctx.globalCompositeOperation = "overlay"; for (var i = 0; i < this.aFires.length; i++) { this.aFires[i].draw(ctx); } ctx.globalCompositeOperation = "soft-light"; for (var i = 0; i < this.aSparks.length; i++) { if ((i % 2) === 0) this.aSparks[i].draw(ctx); } ctx.globalCompositeOperation = "color-dodge"; for (var i = 0; i < this.aSparks2.length; i++) { this.aSparks2[i].draw(ctx); } } }
可以看到在draw方法中,实现了绘制4个元素。
在update方法中就是生成火焰和火花的实例,以及显示状态的变化。
最后实现一个fire的实例,引入fire的draw和update方法,就可以实现火焰效果了。
var current_fire = new fire(w * .5, h * .75);
function init() { current_fire.update(current_fire.x, current_fire.y); if (current_fire.x) { current_fire.draw(ctx); } requestAnimationFrame(init); }
而随鼠标移动就是要动态改变current_fire的x, y坐标。
window.onmousemove = function(e) { e = e || window.event; current_fire.x = e.clientX; current_fire.y = e.clientY; } window.onmouseout = function() { current_fire.x = w * .5; current_fire.y = h * .75; }
最后,源码下载地址https://github.com/sakurayj/canvas/tree/master/test 。