到底什麼是離屏canvas，怎麼使用它

2021-09-13 23:50:25 字數 1168 閱讀 8174

我們都知道在canvas中繪製相關資料是會顯示出來的。但是離屏canvas並不會。不管你在上面做上面操作都不會顯示出來。需要呼叫顯示在當前非離屏canvas上才會顯示

canvas繪製本身就是不斷的更新幀從而達到動畫的效果。離屏canvas本身可以說就是一樣。你在建立好的canvas上調取離屏canvas（在上面畫好圖之後，就當做這個是乙個）顯示出來就好了。但是具體如何實現請看下面的**。看完你應該就清楚了

首先建立乙個canvas的標籤

var canvas = document.getelementbyid("canvas");//非離屏canvas這個是上面html中定義好的


canvas.width = 400;


canvas.height = 400;


var ctx = canvas.getcontext("2d");


var  offcanvas = document.createelement("canvas");//離屏canvas 通過**建立出來的


offcanvas.width=400;


offcanvas.height=400;


var offcontext = offcanvas.getcontext("2d");


//對離屏canvas 進行繪製  （所有的繪製在離屏canvas上面進行繪製 ）


offcontext.rect(0,0,400,400);


offcontext.fillstyle='blue';


offcontext.fill();


setinterval(function() );
有沒發現什麼。將之前的離屏canvas（offcanvas）當做，然後繪製在非離屏canvas上，是的，最後一步到了顯示的時候繪製在非離屏canvas上，繪製的內容就顯示出來了。下面就是將離屏繪製在當前的canvas上的api

ctx.drawimage(offcanvas, 0, 0);
離屏canvas可以用過動態建立出來，如下

var  offcanvas = document.createelement("canvas");
你可以先在離屏canvas上做一些複雜的操作，然後處理完畢後，使用上面這句話。放在非離屏的canvas上就好

canvas效能優化 離屏渲染

為了使使用者達到更好的體驗，做動畫的時候都知道用requestanimationframe了，但是他也是有極限的，當繪製的東西足夠多或者複雜的時候，頻繁的刪除與重繪降低了很多效能。在canvas中粒子系統應該算是比較常見的一種了，現在建立乙個canvas畫布，並繪製100個粒子在整個畫布上由上至下做...

canvas離屏 旋轉效果實踐 旋轉的雪花

效果展示 理論基礎 常見的canvas優化 模糊問題 旋轉效果 1 封裝畫線函式 function drawline ctx,x1,y1,x2,y2,color 2 畫雪花的六條線 function canvassinglesnow snowsize return singlesnow 首先這裡用到...

到底什麼是 O R Mapper

一次和乙個群裡面的朋友聊天，有人說最近發現了新的設計資料庫方法，就是把資料庫的列和物件屬性一一對應，這樣設計很方便。我說寒，那有這麼容易的，實際情況複雜去了，怎麼能一一對應。原文 http dot junkies.weblog seichert posts 4677.aspx 讓我們從o r開始。字...