【知识】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()方法