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 がコメントしたように、キャンバスが完全に初期化される前にテキストをレンダリングしようとしている可能性があります。andalert();またはconsole.log()call を入れて、drawStuff()いつ呼び出されたかを正確に確認します。

早期に呼び出されていることがわかった場合は、 jQuery を使用してみてください$(document).ready(...)。

于 2013-02-26T10:12:57.287 に答える