我无法正确绘制 chrome 中的图像答案

【问题标题】：I cannot draw the image in chrome correctly我无法正确绘制 chrome 中的图像
【发布时间】：2013-01-16 08:18:57
【问题描述】：

这里简单的 code1 可以正常工作 Demo jsFiddle ，我希望在 code2 中得到相同的结果

这里的code2Demo jsfiddle有两个问题。

比例不正确到 1400x700 像素

我只能从function loadImage()内部成功绘制

   function loadImage(){
        oG.width = 1400;
        oG.height = 700;
        oG.drawImage(scrollImg,0,0);
    }

我想从scrollObject.draw()

画画

    var scrollObject = {
        draw : function() {
            oG.drawImage(scrollImg,0,0);
        }
    };

我该怎么做？非常感谢。

代码1；

<!DOCTYPE HTML>
<html>
<head>
<style>
 body {
        margin: 0px;
        padding: 0px;
      }

#mycanvas{

    border: 1px solid #9C9898;
    }
</style>

</head>
<body >
   <canvas id="mycanvas" width="1400" height="700" ></canvas>
   <script type="text/javascript">

  // get the canvas element using the DOM http://jsfiddle.net/centerwow/Z2UzF/show/
 var context = document.getElementById('mycanvas').getContext("2d");
    context.width = 1400 ;
    context.height = 700 ;

    var img = new Image();
    img.src = "http://s9.postimage.org/433ecr79b/grid.png";
    img.onload = function () {
        context.clearRect(0,0,1400,700);
        context.drawImage(img, 0, 0);

    }
</script>
</body>
</html>

代码2：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> image not display correct</title>
    <style type='text/css'>
    body {
      background-color:black;
    }
    .Container {
      position: relative;
      margin-left:auto;
      margin-right:auto;
      top:10px;
      background-image:url('http://s8.postimage.org/jnu65wk2d/Box_Grass200x100.jpg');
      background-repeat:repeat;
      width:1000px;
      height:500px;
      z-index:0;
      overflow:hidden;
    }

    #layer1{
      position:absolute;
      padding:0;
      margin: 0px;
      z-index:2;
      top:-100px;
      left:-200px;
      width:1400px;
      height:700px;
    }
    </style>
</head>
<body >
    <div class="Container"> 
        <canvas id="layer1">LAYER1</canvas>
    </div>
        <script type='text/javascript'>//http://jsfiddle.net/centerwow/Z2UzF/1/show/

           function loadImage(){
                oG.width = 1400;
                oG.height = 700;
                oG.drawImage(scrollImg,0,0);
            }   

            //layer 1 image then will be object objectGame = oG
        var oG = document.getElementById('layer1').getContext("2d");
                scrollImg = new Image();
                scrollImg.src = "http://s9.postimage.org/433ecr79b/grid.png"; //image size 1400x700px
                scrollImg.onload = loadImage;

            var scrollObject = {
            // Basic attributes

                draw : function() {
                    oG.drawImage(scrollImg,0,0);
                }
            };

            // Now moving it
            function move() {
            //handle with object background
            //clearRect(x, y, width, height)    
                oG.clearRect(0,0,1400,700);
                scrollObject.draw();
            }

        move();

        </script>
</body>
</html>

【问题讨论】：

只需 drawImage(img,0,0,1400,700);。满了
请进入我构建的这个例子Demo jsFiddle你需要在加载页面后首先点击屏幕然后你需要按箭头键直到图像显示告诉我我是否错了谢谢
scrollVal > imgWidth 或

标签： javascript image html canvas draw

【解决方案1】：

您只能在loadImage() 上绘图，因为当您触发move() 时，图像尚未加载。您可以使用assetmanager 下载您的资产，例如图像、声音等。这里有一个很棒的构建指南 - http://www.html5rocks.com/en/tutorials/games/assetmanager/

对于比例，您可以将宽度和高度参数传递给drawImage 函数。

context.drawImage(image, x, y, width, height);

您还设置了2d-context 的高度和宽度，这是您无法做到的。在<canvas> 属性中设置宽度和高度。我曾经在使用css时遇到过高度/宽度问题，所以我不建议在此处设置宽度/高度。

【讨论】：

请进入我构建的这个例子Demo jsFiddle你需要在加载页面后首先点击屏幕然后你需要按箭头键直到图像显示告诉我如果我错了 谢谢
是的，但是当我想更改代码中的一些小东西时，无法像我提供的示例那样工作 code2 demo jsfiddle
你必须更具体才能让我帮助你。与 code2 相比，注释 ^^ 中的代码有什么不同？