sts*_*vik 28 javascript html5 canvas html5-canvas
我尝试了几种不同的方法,但我仍然遇到同样的错误.我之前已将图像加载到画布,但自从我几天前更新了Safari之后,我就遇到了错误.
我会发布我目前所拥有的内容,但我已尝试使用jQuery,html的onLoad属性等.
var cvs, ctx, img;
function init() {
cvs = document.getElementById("profilecanvas");
ctx = cvs.getContext("2d"); /* Error in getContext("2d") */
img = document.getElementById("profileImg");
drawImg();
}
function drawImg() {
ctx.drawImage(img, 0, 0);
}
window.onload = init();
ID正确并且对应于适当的canvas和img标记.但是,我一直在努力TypeError: 'null' is not an object (evaluating 'cvs.getContext'),似乎没有进一步.我确定这是一些ID10T错误,但我希望有人能给我一个线索,告诉我这是什么原因造成的？谢谢.
编辑:好的,所以这似乎<body onload="init()">现在使用.然而,它只显示偶尔,如果我尝试运行init()过的$(document).ready()或document.onload我仍然没有运气,并收到错误.有什么想法吗？
Dre*_*kes 84
对于在搜索getContext返回null 时点击此页面的其他人,如果您已经请求了不同类型的上下文,则会发生这种情况.
例如:
var canvas = ...;
var ctx2d = canvas.getContext('2d');
var ctx3d = canvas.getContext('webgl'); // will always be null
如果颠倒调用顺序,情况也同样如此.
Flo*_*ern 31
当你这样做:
window.onload = init();
该函数init()将立即执行(导致错误的原因,因为getContext()过早调用,即在加载DOM之前),并且将返回值init()存储到window.onload.
所以你想要真正做到这一点:
window.onload = init;
注意缺少().
nEJ*_*EJC 12
这与实际问题无关,但由于这个问题是谷歌搜索的第一个结果,getContex("2d") null我正在添加问题的解决方案:
确保你使用getContext("2d")而不是getContext("2D")- 注意小写d.
应该注意的是，上下文并不总是2d。我知道的所有可能的值：
'2d'
'webgl'
'webgl2'
'experimental-webgl'
'bitmaprenderer'
MDN getContext()： https: //developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters
来自上面的 MDN 文档：
渲染上下文可以是
2dwebglexperimental-webglwebgl2bitmaprenderer如果 contextType 与可能的绘图上下文不匹配，或者与请求的第一个 contextType 不同，null则返回。
只需将你的JavaScript放在页面的末尾就可以了......结束你的问题...我尝试了所有的东西,但这是最合乎逻辑和最简单的解决方案......因为JS只会在其他部分之后运行(即上页)已经加载..希望这个帮助