Question

好的，所以我和我的朋友正试图用html和js制作游戏。我是必须为程序构建基础以显示地图上使用的块的人。但出于某种原因，它根本不想在画布上绘制我的图像。我需要显示一个24x32的32x32像素块阵列，我的图像需要能够改变。我已经在线查看了，并且它说使用函数drawImage（）的所有地方，但我的程序并没有看到它属于2d上下文中的画布。这是我的代码：

的index.html：

<html lang="en">
    <head>
    </head>
    <body>
        <div class="canvas">
            <canvas id="canvas" height="768" width="1024" style="border:1px solid black">
                Your browser does not support canvas element.
            </canvas>

            <script type="text/javascript" src="Main.js"></script>
            <script type="text/javascript" src="World Loader.js"></script>
        </div>
    </body>
</html>

Main.js：

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.font = "20px Arial";
var FPS = 60;
var Mode = 0;

function displayTick(){
    Map.DisplayChunk(0,0);
}

function gameTick(){

}

Chunk.LoadNew();
window.setInterval(displayTick, 1000 / FPS);
window.setInterval(gameTick, 600);

和World_Loader.js：

var Block={
    WalkThrough:true,
    SeeThrough:true,
    Interactable:false,
    Occupied:false,
    Sprite:Image,
    Type:"",
    X:0,
    Y:0
};

var Chunk={
    matrix:Block[32][24],
    background:Image,
    display:function(xindex, yindex){
        ctx.drawImage(Background,0,0);
        x=xindex;
        y=yindex;
        for(y=0; y<24; Y++){
            for(x=0; x<32; x++){
            ctx.drawImage(matrix[X][Y].sprite,X*32,Y*32);
            };
        };
    },
    loadNew:function(){
        for(Y=0; Y<24; Y++){
            for(X=0; X<32; X++){
            block=new Block;
            block.Sprite.src="test.png";
            this.matrix[X][Y]=block;
            };
        };
    }
};

var World={
    matrix:Chunk[5][5],
    indexX:0,
    indexY:0
};

我还是js的新手，并试图自学，所以可能有很多错误和东西。但是，任何人都可以看到它不想在画布上画画吗？

Answer 1

你的脚本存在一些问题（sintax错误，范围问题等），你应该从更简单的东西开始，我建议你开始阅读这个online book。无论如何，你可以看到一个简单的脚本来填充并在画布上显示一小块图像。

var Map = (function () {
      var options = arguments[0] || {};
      var _grid = [];
      var _rNum = options.rowuUm || 10;
      var _cNum = options.colNum || 10;

      var _block = function (x, y) {
        this.img = document.getElementById('on');
        this.X = x;
        this.Y = y;

      };

      return {
        init: function () {
          for (var i = 0; i < _rNum; i++) {
            _grid[i] = [];
            for (var j = 0; j < _cNum; j++) {
              _grid[i][j] = new _block(i, j);
            }
          }
        },

        paint: function (canvasId) {
          var cnv = document.getElementById(canvasId);
          var ctx = cnv.getContext('2d');
          var img = new Image();
          img.src = 'on.jpg';
          img.onload = function () {
            for (var i = 0; i < _rNum; i++) {
              for (var j = 0; j < _cNum; j++) {
                ctx.drawImage(img, i * 32, j * 32);

              }
            }
          };
        },
      }
    })();

    Map.init();
    Map.paint('canvas');

无法在js中将图像绘制到画布上

1 个答案: