我不能绘制图像在Chrome中

这里简单的代码1，其做工精细Demo jsFiddle，我想在代码2我不能绘制图像在Chrome中

在这里，码2 Demo jsfiddle其中有两个问题相同的结果。

规模是不正确的1400x700 PIX

我只能成功从内部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); 
     } 
    };

吸取借鉴

我该怎么做？非常感谢。

code1;

<!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>

来源

2013-01-16 user1954217

Just drawImage（img，0,0,1400,700）;.它完整 – judgement

请进入这个例子，我建立[演示jsFiddle]（http://jsfiddle.net/centerwow/Z2UzF/3/show/）你需要先加载页面后点击屏幕上，然后你需要按关键箭头，直到图像显示告诉我，如果我错了谢谢 – user1954217

当scrollVal> imgWidth或<0时出现此错误。检查arg scrollVal – judgement

只能借鉴loadImage()，因为当你触发move()图像尚未加载。您可以使用assetmanager下载您喜欢的资产图像，声音等。这里是一个伟大的指导，建立一个 - http://www.html5rocks.com/en/tutorials/games/assetmanager/

而对于规模，你可以通过一个宽度和高度参数的drawImage功能。

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

您还设置2d-context的高度和宽度，你不能这样做。在<canvas>属性中设置宽度和高度。当我使用css时，曾经遇到高度/宽度问题，所以我不建议在那里设置宽度/高度。

来源

2013-01-16 08:23:33 TryingToImprove

请进入我构建的[Demo jsFiddle]（http://jsfiddle.net/centerwow/Z2UzF/3/show/）这个例子，你需要先加载页面后点击屏幕，然后你需要按下箭头键直到图像显示**告诉我，如果我错了**谢谢 – user1954217

我不遵循？它似乎工作正常？：s – TryingToImprove

是的，但是当我想在代码中改变一些小的东西时，就不能像我提供的代码那样工作[demo jsfiddle]（http://jsfiddle.net/centerwow/Z2UzF/2/） – user1954217

我不能绘制图像在Chrome中

回答

相关问题