drawImage（）不工作答案

【问题标题】：drawImage() not workingdrawImage（）不工作
【发布时间】：2013-02-09 11:50:31
【问题描述】：

我正在阅读“使用 HTML5、CSS3 和 Javascript 制作等距社交实时游戏”。

我并没有深入了解它，我遇到了一个画布问题，让我在一天中的大部分时间都感到困惑。

drawImage() 似乎没有在绘图。我已经研究过这个问题并尝试了许多预加载图像的排列，但到目前为止没有任何效果。

这是我的代码：

HTML：

<canvas id="game" width="100" height="100">
    Your browser doesn't include support for the canvas element.
</canvas>

CSS：

html {
height:100%;
overflow:hidden
}

body {
margin:0px;
padding:0px;
height:100%;
}

和js：

 window.onload = function() {

var canvas = document.getElementById('game');

canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;

var c = canvas.getContext('2d');





function showIntro() {

    var phrase = "Click or tap screen to start";

    c.clearRect (0, 0, canvas.width, canvas.height);

    var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
    grd.addColorStop(0, "#9db7a0");
    grd.addColorStop(1, "#e6e6e6");

    c.fillStyle = grd;
    c.fillRect (0, 0, canvas.width, canvas.height);



    var logoImg = new Image();      
    logoImg.src = '../img/logo.png';

    var originalWidth = logoImg.width;

    logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
    logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);


  var logo = {
     img: logoImg,
     x: (canvas.width/2) - (logoImg.width/2),
     y: (canvas.height/2) - (logoImg.height/2)
  }

  c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);





    c.font = "bold 16px sans-serif";
    var mt = c.measureText(phrase);
    var xcoord = (canvas.width / 2 ) - (mt.width / 2);
    c.fillStyle = '#656565'
    c.fillText (phrase, xcoord, 30);
}

showIntro();


 }

任何帮助将不胜感激！

【问题讨论】：

标签： javascript canvas drawimage preloading

【解决方案1】：

你几乎拥有它......

您只需要在绘制之前给图像加载时间。

您使用此代码给图像加载时间：

var logoImg = new Image();
logoImg.onload = function() {

    // At this point, the image is fully loaded
    // So do your thing!

};
logoImg.src = "myPic.png";

这是完整的代码和小提琴：http://jsfiddle.net/m1erickson/GKK39/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var c=canvas.getContext("2d");

        function showIntro() {

            var phrase = "Click or tap screen to start";

            var logoImg=new Image();
            logoImg.onload=function(){

                c.clearRect (0, 0, canvas.width, canvas.height);

                var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
                grd.addColorStop(0, "#9db7a0");
                grd.addColorStop(1, "#e6e6e6");
                c.fillStyle = grd;
                c.fillRect (0, 0, canvas.width, canvas.height);

                var originalWidth = logoImg.width;
                logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
                logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

                var logo = {
                  img: logoImg,
                  x: (canvas.width/2) - (logoImg.width/2),
                  y: (canvas.height/2) - (logoImg.height/2)
                }
                c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

                c.font = "bold 16px sans-serif";
                var mt = c.measureText(phrase);
                var xcoord = (canvas.width / 2 ) - (mt.width / 2);
                c.fillStyle = '#656565'
                c.fillText (phrase, xcoord, 30);

            }
            logoImg.src="http://dl.dropbox.com/u/139992952/car.png";

        }

        showIntro();       

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

【解决方案2】：

上述答案的简化版本。

  //Create Canvas
  var canvas = document.createElement("canvas");
  canvas.width = 720 
  canvas.height = 500;

  //Get Context
  var ctx  = canvas.getContext("2d");
  ctx .fillStyle = "black";
  ctx .fillRect(0, 0, canvas.width, canvas.height);

  //Load Image
  var img = new Image();
  img.src = "https://images.pexels.com/photos/3722151/pexels-photo-3722151.jpeg";
  img.onload = function() {
  ctx .drawImage(
    img,
    0,
    0,
    canvas.width,
    canvas.height
  );
};

  //Add Canvas
  canvas.id = "fatLady";
  document.body.appendChild(canvas);

在 CodePen 上试试

https://codepen.io/hiteshsahu/pen/QWjrygb?editors=1111

【讨论】：