淺談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都會包含到，同時涉及的有 線性代數 物理 圖形學等相關的基礎知識。

歡迎各位客官收藏關注 投硬幣包養

本文中緩存測試用例