javascript - 仅在窗口调整大小时绘制文本

Question

我有这段代码来创建我的 html Canvas 标题:

<script type="text/javascript">
    (function () {
        var canvas = document.getElementById('header-canvas'),
            context = canvas.getContext('2d');

        // resize the canvas to fill browser window dynamically
        window.addEventListener('resize', resizeCanvas, false);

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = 120;

            drawStuff();
        }
        resizeCanvas();

        function drawStuff() {
            var c = document.getElementById("header-canvas"),
                ctx = c.getContext("2d"),
                grd = ctx.createLinearGradient(0, 0, 0, c.height),
                x = c.width / 2;
            y = c.height / 2;

            grd.addColorStop(0, "#0ac5f4");
            grd.addColorStop(1, "#7ae0fa");

            ctx.fillStyle = grd;
            ctx.fillRect(0, 0, c.width, c.height);

            ctx.font = '30px LatoHL';
            ctx.textAlign = 'center';
            ctx.fillStyle = 'white';
            ctx.fillText('MACKENZIE GRAY', x, y);
        }
    })();
</script>

但我的文本仅在我调整窗口大小时显示...该功能有什么问题？

编辑:我应该补充一点，渐变确实出现了。

Answer 1

这是因为 drawStuff() 函数仅在调用 resizeCanvas 函数时被调用。 resizeCanvas 在窗口中发生调整大小事件时运行(请参阅行:window.addEventListener)

要解决此问题，只需在加载文档时运行 drawStuff()。