Question

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

这里的code2 Demo 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);
        }
    };

我该怎么做？非常感谢。

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>

Answer 1

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

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

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

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

我无法正确地在chrome中绘制图像

1 个答案: