我有以下HTML。它绘制了一个科罗拉多州的标志，但前提是我将window.onload()函数中的行移到drawLogo()函数中，所以我认为问题不在于drawLogo()没有被调用，而是全局canvas, ctx, x,和y在某种程度上不是真正的全局。我想在同一个画布中放入做其他事情的其他函数，所以这就是为什么我希望canvas, ctx, x,和y是全局的。
我知道window.onload()会被执行，因为我也可以通过将对drawLogo()的调用放在window.onload()中来让它绘制标志。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logo</title>
<script type="text/javascript">
var canvas;
var ctx;
var x;
var y;
window.onload = function () {
canvas = document.getElementById('logo');
ctx = canvas.getContext('2d');
x = canvas.width;
y = canvas.height;
};
var drawLogo = function() {
var radius = 23;
var counterClockwise = false;
ctx.beginPath();
ctx.rect(3, 20, 75, 30);
ctx.fillStyle = 'rgba(0,0,255,0.8)';
ctx.fill();
ctx.beginPath();
//ctx.globalAlpha = 0.5;
ctx.rect(3, y-60, 75, 30);
ctx.fillStyle = 'rgba(0,0,255,0.8)';
ctx.fill();
ctx.beginPath();
ctx.arc(40, 70, 30, 0, 2 * Math.PI, counterClockwise);
ctx.fillStyle = 'Yellow';
ctx.fill();
ctx.beginPath();
ctx.arc(40, 70, 30, 2.15 * Math.PI, 3.85 * Math.PI, counterClockwise);
ctx.strokeStyle = '#cc3333';
ctx.lineWidth = 18;
ctx.stroke();
};
</script>
</head>
<body>
<div>
<canvas id="logo" width="600" height="150"></canvas>
<script type="text/javascript">
drawLogo();
</script>
</div>
</body>
</html>
window.onload在加载整个页面时被调用，这意味着CSS、JS文件、字体、图像以及几乎所有内容都被下载。
当加载页面时评估script标记时，将执行drawLogo函数。
然后发生的情况是，在填充全局变量之前调用drawLogo函数。
一个简单的解决方案是将drawLogo函数放在window.onload函数中。在您的情况下，我还建议用更快的onready更改onload事件，但这是一件小事。