drawImage() не работает последовательно

Когда вы помещаете изображение с именем logo.png в тот же каталог, что и этот html-файл, и пытаетесь запустить его в веб-браузере, изображение появляется только 1 раз из 10 обновлений в IE и не появляется в Firefox в первый раз, но появляется появляются после дальнейших обновлений.

Что, черт возьми, происходит?

(метод drawImage() вызывается в функции showIntro())

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Example 1 - Title Screen</title>
    <script>
        window.onload = function () {
            var canvas = document.getElementById('myCanvas');
            var c = canvas.getContext('2d');
            var State = {
                _current: 0,
                INTRO: 0,
                LOADING: 1,
                LOADED: 2
            }
            window.addEventListener('click', handleClick, false);
            window.addEventListener('resize', doResize, false);
            doResize();
            function handleClick() {
                State._current = State.LOADING;
                fadeToWhite();
            }
            function doResize() {
                canvas.width = document.body.clientWidth;
                canvas.height = document.body.clientHeight;
                switch (State._current) {
                    case State.INTRO:
                        showIntro();
                        break;
                }
            }
            function fadeToWhite(alphaVal) {
                // If the function hasn't received any parameters, start with 0.02
                var alphaVal = (alphaVal == undefined) ? 0.02 : parseFloat(alphaVal) + 0.02;
                // Set the color to white
                c.fillStyle = '#FFFFFF';
                // Set the Global Alpha
                c.globalAlpha = alphaVal;
                // Make a rectangle as big as the canvas
                c.fillRect(0, 0, canvas.width, canvas.height);
                if (alphaVal < 1.0) {
                    setTimeout(function () {
                        fadeToWhite(alphaVal);
                    }, 30);
                }
            }

            function showIntro() {
                var phrase = "Click or tap the screen to start the game";
                // Clear the canvas
                c.clearRect(0, 0, canvas.width, canvas.height);
                // Make a nice blue gradient
                var grd = c.createLinearGradient(0, canvas.height, canvas.width, 0);
                grd.addColorStop(0, '#ceefff');
                grd.addColorStop(1, '#52bcff');
                c.fillStyle = grd;
                c.fillRect(0, 0, canvas.width, canvas.height);
                var logoImg = new Image();
                logoImg.src = './logo.png';
                // Store the original width value so that we can keep
                // the same width/height ratio later
                var originalWidth = logoImg.width;
                // Compute the new width and height values
                logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
                logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
                // Create an small utility object
                var logo = {
                    img: logoImg,
                    x: (canvas.width / 2) - (logoImg.width / 2),
                    y: (canvas.height / 2) - (logoImg.height / 2)
                }
                // Present the image
                c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
                // Change the color to black
                c.fillStyle = '#000000';
                c.font = 'bold 16px Arial, sans-serif';
                var textSize = c.measureText(phrase);
                var xCoord = (canvas.width / 2) - (textSize.width / 2);
                c.fillText(phrase, xCoord, (logo.y + logo.img.height) + 50);
            }
        }
    </script>
    <style type="text/css" media="screen">
      html { height: 100%; overflow: hidden }
      body {
        margin: 0px;
        padding: 0px;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="100" height="100">
      Your browser doesn't include support for the canvas tag.
    </canvas>
  </body>
</html>
Источник

1 ответ

Решение

Проблема в том, что вы не ждете загрузки изображения при вызове drawImage(),

Вы можете использовать что-то вроде:

logo.img.onload = function(){
    c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
};

Хотя убедитесь, что вы не начинаете изменять холст, пока это не произошло.

Источник
Другие вопросы по тегам