對(duì)一個(gè)矢量圖動(dòng)畫(huà)，開(kāi)啟位圖緩存能大大提高運(yùn)行效率。所謂開(kāi)啟位圖緩存，其實(shí)要自己動(dòng)手，先創(chuàng)建一個(gè)臨時(shí)canvas，然后把矢量圖繪制到這個(gè)canvas上，到了實(shí)際繪制時(shí)，直接把這個(gè)臨時(shí)canvas拷貝到真正canvas上。而位圖拷貝的速度是非常快的，比重新繪制矢量圖要快很多。

三部曲：

1、建立臨時(shí)canvas（位圖緩存）

p.cache = function(x, y, width, height, scale) {// draw to canvas.scale = scale||1;if (!this.cacheCanvas) { this.cacheCanvas = document.createElement("canvas");}this._cacheWidth = width;this._cacheHeight = height;this._cacheOffsetX = x;this._cacheOffsetY = y;this._cacheScale = scale;this.updateCache();}

2、繪制到臨時(shí)canvas

p.updateCache = function(compositeOperation) {var cacheCanvas = this.cacheCanvas, scale = this._cacheScale, offX = this._cacheOffsetX*scale, offY = this._cacheOffsetY*scale;var w = this._cacheWidth, h = this._cacheHeight, fBounds;if (!cacheCanvas) return;var ctx = cacheCanvas.getContext("2d");w = Math.ceil(w*scale);h = Math.ceil(h*scale);if (w != cacheCanvas.width || h != cacheCanvas.height) {cacheCanvas.width = w;cacheCanvas.height = h;} else if (!compositeOperation) {ctx.clearRect(0, 0, w+1, h+1);}ctx.save();ctx.globalCompositeOperation = compositeOperation;ctx.setTransform(scale, 0, 0, scale, -offX, -offY);this.draw(ctx, true);this._applyFilters();ctx.restore();};

3、copy到真正canvas

p.drawFromCache = function(ctx) {var cacheCanvas = this.cacheCanvas;if (!cacheCanvas) { return false; }var scale = this._cacheScale, offX = this._cacheOffsetX, offY = this._cacheOffsetY, fBounds;if (fBounds = this._applyFilterBounds(offX, offY, 0, 0)) {offX = fBounds.x;offY = fBounds.y;}ctx.drawImage(cacheCanvas, offX, offY, cacheCanvas.width/scale, cacheCanvas.height/scale);return true;};

?

但是，這樣會(huì)引起問(wèn)題。在Android上運(yùn)行，可以發(fā)現(xiàn)webview native層的內(nèi)存占用飛漲，關(guān)鍵因素就是這個(gè)位圖緩存。 雖然矢量圖可能在舞臺(tái)上被移除了，但由于JS層和DOM層兩個(gè)關(guān)聯(lián)，導(dǎo)致垃圾回收機(jī)制沒(méi)有正常發(fā)揮。 需要注意的是，在矢量圖被移除的時(shí)候，必須在JS側(cè)顯式地把臨時(shí)canvas置為null

轉(zhuǎn)載于:https://www.cnblogs.com/kenkofox/p/4624362.html

總結(jié)

以上是生活随笔為你收集整理的Canvas动画 位图缓存提高效率和对应的内存问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。