0

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

这里的code2 Demo jsfiddle有两个问题。

  1. 比例尺与 1400x700 像素不正确

  2. 我只能从内部汲取成功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>
4

1 回答 1

0

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

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

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

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

于 2013-01-16T08:23:33.903 回答