Canvas 优化指南

栏目: Html5 · 发布时间: 6年前

内容简介:Canvas 优化指南

Canvas 性能是一个非常值得关注的问题,这次用 Canvas 也同样遇到了需要性能优化的点:我们在之前使用 Canvas 实现了 background: cover 的效果,但是这导致了 resize 的反复绘制,CPU 使用率飙升。

使用离屏渲染

对于这种场景,MDN 中的解释是「在离屏canvas上预渲染相似的图形或重复的对象」。

当然,实际上,MDN 中的解释不够详细,既没有说明为什么使用离屏 Canvas,也没有离屏 Canvas 的意思:

我们可以把离屏 Canvas 理解为一个预渲染的机制,我们通过先绘制好整块图案,之后在局部区域时就不需要再进行反复的图片渲染,在 drawImage 中可以直接对图片进行裁剪。

处理前:

function render() {
  draw(context);    // 具体代码省略
}

增加了离屏渲染:

// 离屏渲染
var m_canvas = document.createElement('canvas');
m_canvas.width = 64;    // 渲染整体
m_canvas.height = 64;
var m_context = m_canvas.getContext(‘2d’);
draw(m_context);

function render() {
  context.drawImage(m_canvas, 0, 0);
}

对于一些监听后渲染,如果创建 Image 再进行渲染,会消耗大量 CPU,如果使用了离屏渲染,实测在高频事件(自己的是 window.resize )中 CPU 使用率减少了一倍之多。

集中绘制

绘制操作会消耗比较多的资源,所以最好是一次绘制,将命令全部存储到缓冲区中。

优化前:

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();

避免浮点数坐标

浏览器为了抗锯齿会对浮点数进行额外的处理,可以通过数学类函数进行取整操作:

ctx.drawImage(myImage, Math.floor(0.3), Math.floor(0.5));

使用多个画布渲染复杂的场景

对于一些复杂的场景,可以将不变的场景和变化的物体进行区分渲染,下面是一段 demo,这样需要变更并渲染的像素更小:

<div id="stage">
  <canvas id="ui-layer" width="480" height="320"></canvas>
  <canvas id="game-layer" width="480" height="320"></canvas>
  <canvas id="background-layer" width="480" height="320"></canvas>
</div>

<style>
  #stage {
    width: 480px;
    height: 320px;
    position: relative;
    border: 2px solid black
  }
  canvas { position: absolute; }
  #ui-layer { z-index: 3 }
  #game-layer { z-index: 2 }
  #background-layer { z-index: 1 }
</style>

扩展阅读

  1. canvas的优化
  2. canvas的性能优化 - 司徒正美的博客
  3. 提高 HTML5 画布性能 - html5rocks

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大型网站系统与Java中间件开发实践

大型网站系统与Java中间件开发实践

曾宪杰 / 电子工业出版社 / 2014-4-24 / 65.00

本书围绕大型网站和支撑大型网站架构的 Java 中间件的实践展开介绍。从分布式系统的知识切入,让读者对分布式系统有基本的了解;然后介绍大型网站随着数据量、访问量增长而发生的架构变迁;接着讲述构建 Java 中间件的相关知识;之后的几章都是根据笔者的经验来介绍支撑大型网站架构的 Java 中间件系统的设计和实践。希望读者通过本书可以了解大型网站架构变迁过程中的较为通用的问题和解法,并了解构建支撑大型......一起来看看 《大型网站系统与Java中间件开发实践》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具