Question

这是代码：

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>

在google map初始化之后调用draw函数，这样DOM应该已经加载了，对吗？我可能做错了什么？

Answer 1

调用draw - 函数时已经加载了DOM，这是正确的。

但是var canvas = document.getElementById('control'); - 行在此之前被评估，因为它不在draw - 函数中。在元素渲染之前，它会立即在文档的<head>中执行。

我建议您将init函数更改为类似

var canvas,context;
function initializeMap() {
   canvas = document.getElementById('control');
   context = canvas.getContext('2d');
}

Answer 2

如果您的javascript在body之前加载，则画布将为undefined，因为浏览器尚未加载/呈现它。

Html 5 canvas getElementById（）返回null / undefined

2 个答案: