【知識】canvas的getContext( )方法中contextType參數：'2d'/'webgl'/'webgl2'...

今天偶爾接觸到了一個laya的項目，其中需要獲取到頁面的canvas元素並進行操作。

1、然后碰到了第一個問題：獲取到的canvas元素為null

排除寫法錯誤之外，再考慮到的就是頁面還沒加載完成，所以獲取不到。這個時候做個判斷即可：

window.onlaod = function() { // 當使用jquery中的$(document).ready(function(){})也可能不奏效(當canvas元素是動態生成的情況)
　　// 兩者區別：window.onload是當頁面所以資源都加載完畢之后觸發 $(document).ready是只要dom元素繪制完成即可觸發 var canvas = document.getElementById('layaCanvas');
    var context = canvas.getContext('2d'); // null
}

 

2、然后又遇到了第二個問題，context獲取為null

百度找了很多方法都沒解決為什么context獲取為空的原因，最后了解了一下laya發現，laya項目中有canvas模式和webgl模式，當是webgl模式的時候，通過canvas.getContext('2d')自然是獲取不到的，修改寫法：

window.onload = function() {
    var canvas = document.getElementById("layaCanvas");
    var context = canvas.getContext('webgl2');
}

 

【知識總結】

contextType參數有以下四種：

“2d”：創建一個CanvasRenderingContext2D對象作為2D渲染的上下文。
“webgl”(或“experimental-webgl”)：創建一個WebGLRenderingContext對象作為3D渲染的上下文，只在實現了WebGL 2的瀏覽器上可用，實驗性特性。
“webgl2”：創建一個WebGL2RenderingContext對象作為3D渲染的上下文，只在實現了WebGL 3的瀏覽器上可用。
“bitmaprenderer”：創建一個ImageBitmapRenderingContext，用於將位圖渲染到canvas上下文上，實驗性特性。

 

【參考文章】

canvas中的getContext()方法