离屏 Canvas 原理与 SpriteBuffer
Posted liangklfang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了离屏 Canvas 原理与 SpriteBuffer相关的知识，希望对你有一定的参考价值。
本章节主要讲述 html5 Canvas 中常见的离屏渲染相关内容，同时讲解了离屏渲染技术在 SpriteBuffer 中的应用。
1.离屏渲染
1.1 离屏渲染简介
关于离屏渲染中有两个比较重要的方法，分别是 context.getImageData()和 context.putImageData()。那么离屏渲染到底是什么呢？顾名思义，它表示在某些地方渲染内容，这个某些地方并不是屏幕，而是内存。有一个术语也经常被提起，那就是"预渲染"。通俗的讲，这个"预渲染"技术是为了提升视觉体验(反应和运行时性能)而存在的，因为往内存中渲染要比往屏幕中渲染内容快得多，这在使用 context.drawImage()的时候特别明显。
1.2 如何运用离屏渲染
只有在真实 DOM 中存在的 Canvas 才会出现在用户的视野中,那些根本不存在于 DOM 中的 Canvas 元素可以使用离屏渲染，因为其内容不会被渲染在屏幕中。因此，为了理解离屏渲染只需要动态创建一个 Canvas 元素，同时该元素无需插入到 DOM 中。下面是一个简单的例子:
<html>
<head以上是关于离屏 Canvas 原理与 SpriteBuffer的主要内容，如果未能解决你的问题，请参考以下文章