Question

我编写代码的时间还不够长，但是，我正在尝试制作一个简单的“太空”入侵者风格的游戏，当我制作占位符时，我并没有考虑过如何实现自己的自定义图像。有没有办法用ctx.fillStyle或ctx.fillRect替代图像？还是有一种更简单更好的方法？我的图像将需要左右移动。这是我现在拥有的一个例子：

//Enemies
function enemy (x,y,w,h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.speed = 50;
    this.show = function(){
        ctx.fillStyle = "green";
        ctx.fillRect(this.x,this.y,this.w,this.h);
    }
    this.move = function(speed){
        this.clear();
        this.y += speed;
        this.show();    
    }
    this.clear = function(){       
        ctx.clearRect(this.x,this.y,this.w,this.h);
    }
}

Answer 1

首先，您必须使用所需图像的src属性创建图像。

<img src='sampleimage.png' id='sampleimage'>

在javascript中，添加以下代码：

window.onload = function() {
    var sampleImage = document.getElementById('sampleimage');
}

在显示功能中：

ctx.drawImage(sampleImage, this.x, this.y, this.w, this.h);

这里是tutorial on the ctx.drawImage function。

如何用图像替换ctx.fillStyle或ctx.fillRect？

1 个答案: