Question

我无法弄清楚我做错了什么。我试图在画布中绘制这个图像的第一个图块，但没有任何事情发生。

function Character(x, y, speed, TilesPos, TilesRow) {
            this.x = x;
            this.y = y;
            this.w = 25;
            this.h = 25;
            this.sp = speed;
            this.Pos = TilesPos;
            this.Row = TilesRow;
            this.MaxTiles = 11;
        }

        Character.prototype.draw = function () {
            ctx.drawImage(charImg, this.Pos * this.w, this.w * this.Row, this.w, this.h, this.x, this.y, this.w, this.h);
        };
        var character = new Character(cw / 2, (ch - 25), 1, 1, 1);
        function Draw() {
            ctx.clearRect(0, 0, cw, ch);
            if (charImg.complete){
                character.draw();
            }

        }

Answer 1

您永远不会设置画布的宽度和高度属性。默认大小为300x150。你在这些尺寸之外绘制你的图像，这就是为什么你没有看到它。如果使用CSS来调整大小，它只会拉伸画布以适合扭曲图像的尺寸，但不会更改画布坐标系。

<强> Live Demo

我添加/更改了这些行。

   var canvas = $('#My_Canvas')[0];
   canvas.width = 400;
   canvas.height = 400;
   var ctx = canvas.getContext("2d");

另外，如果您只使用canvas元素，则不需要jQuery，这会增加不必要的开销。

另外，对于动画而不是使用setInterval我强烈建议您结帐requestAnimationFrame

在画布内绘制图像

1 个答案: