浅谈canvas在web开发中的应用与优化

这周由于给朋友的游戏配场景的BGM，没能写什么教程demo(其实就是懒)，可是又不能让大家看出我啥也没干，因而就有了这篇应用与优化的话题，同时也是一篇预告贴，下周开始，将会是一期连续的实战 我的头像生成器

原料: vue express mongo canvas node

火候: 每章都会有关核心实现，不会索然无味

周期: 1-2周内完成

特点: 如何根据用户的输入qq邮箱来生成独一无二的我的头像

预告到此结束.......

进入正题

何时用dom 何时canvas/svg

dom方便操做是由于由于dom具备层级结构与一大堆爽手的交互api，可是在浏览器渲染的时候却并不轻松，大量嵌套dom将增大浏览器深度遍历的时间，因此才有了virtual dom与diff的配合利器。

canvas单层渲染，哪怕是如同以前的伪3d中的层级效果，也只是在同一层dom中，并不会由于渲染问题增大浏览器在渲染页面时的耗时。 开发时，咱们能够考虑将一些浅交互的效果统一抛给canvas(如轮播图)去处理，这样，咱们就能够在加强视觉效果的同时下降浏览器的渲染损耗。

有关getImageData跨域的问题

这个问题也是有不少人在群里问个人，其实通常出现这种问题大可能是本地运行的时候，这个问题网上也有答案的，办法有点低俗，就是推荐你换一个浏览器或者挂在服务器上。 由于本地的文件夹默认是没有域名的。

"Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 复制代码

若是你在服务器上也跨域了，那你能够试试

var img = new Image();
img.crossOrigin = '';
img.onload = function () {
    ctx.drawImage(this, 0, 0);
    ctx.getImageData(0, 0,200,200);
};
复制代码

缓存问题

在使用canvas的时候，可能会存在没有图形被绘制出来的状况，除却代码的问题，则是由于上一帧的图形还未绘制完成，便被clearRect了，因此咱们会须要一个缓存进行来预处理，这里须要的就是离屏处理。

var offscreen = document.createElement("canvas");
offscreen.width = 1000;
offscreen.height = 1000;
var offctx =offscreen.getContext("2d");
复制代码

咱们建立了离屏画布后，能够把须要处理绘制的东西交由它处理，绘制后再直接使用drawImage来将它绘制到主画布上。

当须要处理的对象越多，一个离屏可能也会形成画面卡顿的其状况，这时候，咱们就能够把离屏规划给小对象，让每一个对象都拥有一个本身的绘制环境，这样，就大大提高了渲染的流畅度。 这里是个测试用例，我不知道大家如何，我这边跑个千把个小球没啥问题

像素处理的选择

当咱们要作像素的处理的时候，可使用bitmap或者Arradata,这时咱们就须要去作一个选择，bitmap具备宽高，咱们能够较容易对平面内的像素点去进行坐标的定位，可是其同时其时间复杂度与空间复杂度就比Arraydata要高，因此在选择的时候要根据实际状况来作选择。

如何学习canvas

有人问了我这个问题，canvas的api不多，哪怕webgl都比它要多，只是webgl的难点不在于api，而是在于shader的编写。

1. 若是你打算只作2d，那么能够考虑入手一款软件ps/sketch,算法上不作要求，毕竟我也很菜，可是要有必定的高数与物理基础，以及少许图形学的基础，若是你是PS玩的比较熟的，那就另当别论，我是从初二开始入的PS的坑，上手canvas因此有必定优点。
2. 在学canvas的时候，网上有不少比较浅显的视频教程，能够去看一看，更多的是要接触图形引擎(包括包含画面逻辑的游戏)，想想它们如何实现，能够提高逻辑的思惟
3. 若是向入手webgl,那能够先从three.js来上手，再去了解webgl,是真的挺难的，我也是个菜鸡，不过在学习的过程当中，能够很大的提高你对图形的绘制渲染了解。

以上几种是常遇到的问题，也有可能我没有提到的，能够向我提问，我会尽量地为大家解惑。

不按期更新canvas与svg的相关技术教程，有实战型，也会有主原理型的，2d 2.5d 3d都会包含到，同时涉及的有 线性代数 物理 图形学等相关的基础知识。

欢迎各位客官收藏关注 投硬币包养

本文中缓存测试用例