【前端词典】实现 Canvas 下雪背景引发的性能思考

前言

代码已上传至 github 【https://github.com/wanqihua/koa-canvas】

入题

需求给出的 UI 样式如下:

UI 的需求是雪花下落的方向有点倾斜角度,每片雪花的下落速度不一样但要保持在一个范围内。

需求了解的差不多就开始实现这个效果(在看这篇文章之前你需要对 canvas 的一些基本 API 了解)。

drawImage

drawImage 可传入 9 个参数,上图中的 5 个参数是比较常用的,另外几个参数是拿来剪切图片的。

直接使用 drawImage 来剪切图片,其性能不会太好,建议先将需要使用的部分用一个离屏 canvas 保存起来,需要用到的时候直接使用即可。

requestAnimationFrame

requestAnimationFrame 相对于 setinterval 处理动画有以下几个优势:

  1. 经过浏览器优化,动画更流畅
  2. 窗口没激活时,动画将停止,省计算资源
  3. 更省电,尤其是对移动终端

这个 API 不需要传入动画间隔时间,这个方法会告诉浏览器以最佳的方式进行动画重绘。

由于兼容性问题,可以使用以下方法对 requestAnimationFrame 进行重写:

window.requestAnimationFrame = (function(){        return  window.requestAnimationFrame       ||                 window.webkitRequestAnimationFrame ||                 window.mozRequestAnimationFrame    ||                 window.oRequestAnimationFrame      ||                 window.msRequestAnimationFrame     ||                 function (callback) {                    window.setTimeout(callback, 1000 / 60);                 };    })();

对于其他 API 烦请查阅文档。

第一次尝试

有一个大概想法后就开心的开始写代码了,基本思路就是使用 requestAnimationFrame 来刷新 canvas 画板。

由于雪花不规则,所以雪花是 UI 提供的图片,既然是图片我们就需要先将图片预加载好,要不然在转换图片的时候很可能影响性能。

使用的预加载方法如下:

function preloadImg(srcArr){    if(srcArr instanceof Array){        for(let i = 0; i < srcArr.length; i++){            let oImg = new Image();            oImg.src = srcArr[i];        }    }}

前前后后写了一个下午,算是写好了,在手机上查看的效果发现很是卡顿。100 片雪花 FPS 竟然才 40 多。而且在某些机型会出现抖动的情况。

要是产品看到这个效果,恐怕是又要召集相关人员开相关会议了。这么卡顿肯定是写了些开销大的代码,于是乎需要第二次尝试。

晚上还是需要按时下班的。不过下班回家后也不能闲着,开始找相关的资料,以便第二天快速的完成。

第二次尝试前的准备

经过一个晚上的查找学习,大概知道了以下几个优化 canvas 性能的方法:

1. 使用多层画布绘制复杂场景

分层的目的是降低完全不必要的渲染性能开销。

即:将变化频率高、幅度大的部分和变化频率小、幅度小的部分分成两个或两个以上的 canvas 对象。也就是说生成多个 canvas 实例,把它们重叠放置,每个 Canvas 使用不同的 z-index 来定义堆叠的次序。

<canvas style="position: absolute; z-index: 0"></canvas><canvas style="position: absolute; z-index: 1"></canvas>// js 代码

2. 使用 requestAnimationFrame 制作动画

上面有提到。

3. 清除画布尽量使用 clearRect

一般情况下的性能: clearRect > fillRect > canvas.width=canvas.width;

4. 使用离屏绘制进行预渲染

当时用 drawImage 绘制同样的一块区域:

  1. 若数据源(图片、canvas)和 canvas 画板的尺寸相仿,那么性能会比较好;
  2. 若数据源只是大图上的一部分,那么性能就会比较差;因为每一次绘制还包含了裁剪工作。

第二种情况我们就可以先把待绘制的区域裁剪好,保存在一个离屏的 canvas 对象中。在绘制每一帧的时候,在将这个对象绘制到 canvas 画板中。

drawImage 方法的第一个参数不仅可以接收 Image 对象,也可以接收另一个 Canvas 对象。而且,使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。

当每一帧需要调用的对象需要多次调用 canvasAPI 时,我们也可以使用离屏绘制进行预渲染的方式来提高性能。

即:

let cacheCanvas = document.createElement("canvas");let cacheCtx = this.cacheCanvas.getContext("2d");
cacheCtx.save();cacheCtx.lineWidth = 1;for(let i = 1;i < 40; i++){    cacheCtx.beginPath();    cacheCtx.strokeStyle = this.color[i];    cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);    cacheCtx.stroke();}this.cacheCtx.restore();
// 在绘制每一帧的时候,绘制这个图形context.drawImage(cacheCtx, x, y);

cacheCtx 的宽高尽量设置成实际使用的宽高,否则过多空白区域也会造成性能的损耗。

下图显示了使用离屏绘制进行预渲染技术所带来的性能改善情况:

5. 尽量少调用 canvasAPI ,尽可能集中绘制

如下代码:

for (var i = 0; i < points.length - 1; i++) {    var p1 = points[i];    var p2 = points[i + 1];    context.beginPath();    context.moveTo(p1.x, p1.y);    context.lineTo(p2.x, p2.y);    context.stroke();} 

可以改成:

context.beginPath();for (var i = 0; i < points.length - 1; i++) {    var p1 = points[i];    var p2 = points[i + 1];    context.moveTo(p1.x, p1.y);    context.lineTo(p2.x, p2.y);}context.stroke();

tips: 写粒子效果时,可以使用方形替代圆形,因为粒子小,所以方和圆看上去差不多。有人问为什么?很容易理解,画一个圆需要三个步骤:先 beginPath,然后用 arc 画弧,再用 fill。而画方只需要一个 fillRect。当粒子对象达一定数量时性能差距就会显示出来了。

6. 像素级别操作尽量避免浮点运算

进行 canvas 动画绘制时,若坐标是浮点数,可能会出现 CSSSub-pixel 的问题.也就是会自动将浮点数值四舍五入转为整数,在动画的过程中就可能出现抖动的情况,同时也可能让元素的边缘出现抗锯齿失真情况。

虽然 javascript 提供了一些取整方法,像 Math.floorMath.ceilparseInt,但 parseInt这个方法做了一些额外的工作(比如检测数据是不是有效的数值、先将参数转换成了字符串等),所以,直接用 parseInt 的话相对来说比较消耗性能。 可以直接用以下巧妙的方法进行取整:

function getInt(num){    var rounded;    rounded = (0.5 + num) | 0;    return rounded;}

另 for 循环的效率是最高的,感兴趣的可以自行实验。

第二次尝试

通过昨天晚上的查阅,对这个动画做了以下几点优化:

  1. 使用离屏绘制进行预渲染
  2. 减少部分 API 的使用
  3. 浮点数取整
  4. 缓存变量
  5. 使用 for 循环,替代 forEach
  6. 将整体代码使用原型链方式改写了一遍

方案写好了就开始愉快的写代码了。

200 片雪花的时候 FPS 基本稳定在 60,而且抖动的情况也没了; 增加到 1000 片的时候, FPS 还是基本稳定在 60; 增加到 1500 片的时候,稍微有点零星的卡帧; 增加到 2000 片的时候,开始卡顿。

这说明这个动画还是没有优化好,还有优化空间,请各位大佬不吝指教。

推荐使用 stats.js 插件,这个插件可以显示动画运行时的 FPS。

主要代码

let snowBox = function () {    let canvasEl = document.getElementById("snowFall");    let ctx = canvasEl.getContext('2d');    canvasEl.width = window.innerWidth;    canvasEl.height = window.innerHeight;    let lineList = []; // 雪的容器    let snow = function () {        let _this = this;        _this.cacheCanvas = document.createElement("canvas");        _this.cacheCtx = _this.cacheCanvas.getContext("2d");        _this.cacheCanvas.width = 10;        _this.cacheCanvas.height = 10;        _this.speed = [1, 1.5, 2][Math.floor(Math.random()*3)];                // 雪花下落的三种速度,便于取整        _this.posx = Math.round(Math.random() * canvasEl.width);               // 雪花x坐标        _this.posy = Math.round(Math.random() * canvasEl.height);              // 雪花y坐标        _this.img = `./img/snow_(${Math.ceil(Math.random() * 9)}).png`;        // img        _this.w = _this.getInt(5 + Math.random() * 6);        _this.h = _this.getInt(5 + Math.random() * 6);        _this.cacheSnow();    };
    snow.prototype = {        cacheSnow: function () {            let _this = this;            // _this.cacheCtx.save();            let img = new Image();   // 创建img元素            img.src = _this.img;            _this.cacheCtx.drawImage(img, 0, 0, _this.w, _this.h);            // _this.cacheCtx.restore();        },        fall: function () {            let _this = this;            if (_this.posy > canvasEl.height + 5) {                _this.posy = _this.getInt(0 - _this.h);                _this.posx = _this.getInt(canvasEl.width * Math.random());            }            if (_this.posx > canvasEl.width + 5) {                _this.posx = _this.getInt(0 - _this.w);                _this.posy = _this.getInt(canvasEl.height * Math.random());            }            // 如果雪花在可视区域            if (_this.posy <= canvasEl.height || _this.posx <= canvasEl.width) {                _this.posy = _this.posy + _this.speed;                _this.posx = _this.posx + _this.speed * .5;            }            _this.paint();        },        paint: function () {            ctx.drawImage(this.cacheCanvas, this.posx, this.posy)        },        getInt: function(num){            let rounded;            rounded = (0.5 + num) | 0;            return rounded;        }    };
    let control;    control = {        start: function (num) {            for (let i = 0; i < num; i++) {                let s = new snow();                lineList.push(s);            }            (function loop() {                ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);                for (let i = 0; i < num; i++) {                    lineList[i].fall();                }                requestAnimationFrame(loop)            })();        }    };    return control;}();
window.onload = function(){    snowBox.start(2000)};

建议从 github clone 代码到本地运行。

后话

这篇文章虽然说是关于 canvas 动画的性能优化。一些大佬也已经看出,其他方面的性能优化方案和这个大抵相同,无非是:

  1. 减少 API 的使用
  2. 使用缓存(重点)
  3. 合并频繁使用的 API
  4. 避免使用高耗能的 API
  5. 用 webWorker 来处理一些比较耗时的计算
  6. ……

原文发布于微信公众号 - 小生方勤(XSFQ_HSD)

原文发表时间:2019-03-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券