Html 5 canvas getElementById() returns null/undefined(Html 5 canvas getElementById() 返回 null/undefined)
问题描述
here's the code:
HTML:
<body onload="initializeMap()">
<div id="map_canvas" style="width:100%; height:100%; z-index:1"></div>
<canvas id="control" style="width:100%; height:100%; z-index:2">Does Not Support Canvas Element</canvas>
</body>
Javascript:
<script type="text/javascript">
var canvas = document.getElementById('control');
var context = canvas.getContext('2d');
function draw(){
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
}
</script>
the draw function is called after initialization of the google map so the DOM should have already loaded by then, correct? What might have I done incorrectly?
The DOM has already been loaded when the draw
-function is called, that is correct.
But the var canvas = document.getElementById('control');
-line is evaluated before that, because it is not in the draw
-function. It is executed immediately in the <head>
of the document BEFORE the elements have been rendered.
I would suggest you change your init function to something like that
var canvas,context;
function initializeMap() {
canvas = document.getElementById('control');
context = canvas.getContext('2d');
}
这篇关于Html 5 canvas getElementById() 返回 null/undefined的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:Html 5 canvas getElementById() 返回 null/undefined
基础教程推荐
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01