canvas Object [object Object] has no method 'getContext'

最新推荐文章于 2025-06-30 10:20:59 发布

原创最新推荐文章于 2025-06-30 10:20:59 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一段HTML5 Canvas代码在Chrome浏览器中遇到的问题：尝试调用未定义的getContext方法。通过将代码置于window.onload函数内确保DOM完全加载后再获取Canvas元素，成功解决了此问题。

写了HTML5的canvas的一段代码，在chrome中报canvas Object [object Object] has no method 'getContext'

原因分析：因为js先于页面载入，还没有canvas，所以要在页面载入后才能获得canvas对象。

开始代码：

<span style="white-space:pre">	</span>var canvas = document.getElementById('gdCanvas');
	var context = canvas.getContext('2d');// 这里通过canvas获取处理API的上下文context
	context.beginPath();
	context.moveTo(150, 100);
	context.lineTo(300, 200);
	context.stroke();

修改代码：

<span style="color:#ff0000;">window.onload = function(){</span>
	var canvas = document.getElementById('gdCanvas');
	var context = canvas.getContext('2d');// 这里通过canvas获取处理API的上下文context
	context.beginPath();
	context.moveTo(150, 100);
	context.lineTo(300, 200);
	context.stroke();
<span style="color:#ff0000;">};</span>