Html 5 canvas getElementById() 返回 null/undefined

沃梦达教程前端问题

2022-01-01

Html 5 canvas getElementById() returns null/undefined(Html 5 canvas getElementById() 返回 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

上一篇：无法克隆 OffscreenCanvas，因为它已分离

下一篇：在 KineticJS 中创建一个带有 mousedown 事件的矩形