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()。

Answer 2

正如Taylor Hayward评论的那样，可能是您在画布完全初始化之前尝试渲染文本。将alert();或console.log()电话放入drawStuff()，以确切了解电话的确定时间。

如果您发现它被提前调用，请尝试使用jQuery $(document).ready(...)。

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

2 个答案: