0

我有这段代码来创建我的 html 画布标题：

<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>

但是我的文字只有在我重新调整窗口大小时才会出现......这个功能有什么问题？

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

4

2 回答 2

2

这是因为drawStuff()仅在调用您的函数时才调用该函数resizeCanvas。 resizeCanvas当您的窗口中发生调整大小事件时正在运行（请参见行window.addEventListener：）

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

于 2013-02-21T20:49:43.630 回答
0

正如 Taylor Hayward 评论的那样，您可能正试图在画布完全初始化之前渲染文本。放置和alert();/或console.log()调用drawStuff()以查看确切的调用时间。

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

于 2013-02-26T10:12:57.287 回答