这有效:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="/js/msgv/widgets/excanvas2.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function canvasTest(){
console.log("beginning canvasTest");
var b_canvas = document.getElementById("regularCanvas");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</script>
</head>
<body onLoad="canvasTest()">
<canvas id="regularCanvas" style="border: 1px dotted; float: left;" class="clear" height="225" width="300"></canvas>
</body>
</html>
这不会:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
两者之间的唯一区别是我在页面中加载它的位置。当我在头部加载 excanvas 时,一切正常。当我将它加载到身体底部时出现错误。
<script type="text/javascript" charset="utf-8">
function canvasTest(){
console.log("beginning canvasTest");
var b_canvas = document.getElementById("regularCanvas");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</script>
</head>
<body onLoad="canvasTest()">
<canvas id="regularCanvas" style="border: 1px dotted; float: left;" class="clear" height="225" width="300"></canvas>
<script src="/js/msgv/widgets/excanvas2.js" type="text/javascript"></script>
</body>
</html>