0

ここでは、デモjsFiddleで正常に動作する単純なcode1、code2で同じ結果が必要です

ここでは、 2 つの問題がある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()したときに画像がまだロードされていないため、描画できるのは のみです。を使用して、assetmanager画像やサウンドなどのアセットをダウンロードできます。アセットを作成するための優れたガイドは次のとおりです - 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 に答える