canvas之性能优化篇(2020) – 《杏彩》杏彩平台,杏彩平台登录网址,杏彩官网

canvas之性能优化篇(2020)

看了很多大佬的文章,自己也对项目做了一些优化,其实有很多地方平常码代码的时候稍微注意一下就能节约很多性能开销

1.离屏渲染

在离屏canvas上预渲染相似的图形或重复的对象,通俗的解释是将离屏canvas当成预渲染,在离屏canvas上绘制好一整块图形,绘制好后在放到视图canvas中,适合每一帧画图运算复杂的图形

比如你想把一张图片放到canvas上,使用drawImage()方法,有三种写法

// 将image放到目标canvas指定位置void ctx.drawImage(image, dx, dy); // 将image放到目标canvas指定位置,指定宽高渲染void ctx.drawImage(image, dx, dy, dWidth, dHeight);// 将image裁剪之后放到目标canvas指定位置,指定宽高渲染void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

第一种只是把图片原样放到canvas里,第二章指定宽高就意味着放大或者缩小图片后再放进去,带三种是裁剪后再放大或者缩小放到canvas中,这三种写法操作依次增加,性能开销也是依次提高
而离屏渲染就可以让我们先把图片裁剪成想要的尺寸内容保存起来,绘制的时候就可以使用第一种写法简单的把图片放进去就完了

// 在离屏 canvas 上绘制var offscreencanvas = document.createElement('canvas');// 宽高赋值为想要的图片尺寸offscreencanvas.width = dWidth;offscreencanvas.height = dHeight;// 裁剪offscreencanvas.getContext('2d').drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);// 在视图canvas中绘制viewcontext.drawImage(canvas, x, y);

作者:没事儿啊
链接:https://www.jianshu.com/p/891cce4c2baf
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。