drawImage（）不一致工作

当您将名为logo.png的图片放在与此html文件相同的目录中并尝试在网络浏览器中运行时，图片仅在IE中10次刷新中出现1次， t在Firefox中首次出现，但在进一步刷新后才出现。drawImage（）不一致工作

这是怎么回事？

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

来源

2014-03-31 Wicelo

的问题是，你是不是等待图像当你调用drawImage()加载。

您可以使用类似：

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

虽然确保在这发生之前，你不开始修改画布。

来源

2014-03-31 09:32:13 aurbano

drawImage（）不一致工作

回答

相关问题