Question

我有以下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>

Answer 1

加载整个页面时会调用

window.onload，这意味着CSS，JS文件，字体，图像和几乎所有内容都会被下载。

在加载页面时评估drawLogo标记时，会执行script函数。

然后发生的事情是在填充全局变量之前调用drawLogo函数。

一个简单的解决方案是将drawLogo函数放在window.onload函数中。我还建议您更快地更改onload事件onready，但这只是一件小事。

在窗口中调用函数，在主体中调用onload

1 个答案: