条件 context.drawImage() 函数答案

【问题标题】：conditional context.drawImage() function条件 context.drawImage() 函数
【发布时间】：2022-10-07 22:30:47
【问题描述】：

我在类的绘图函数中有一个 context.drawImage() 函数。

当我传递静态值时，它工作得很好： context.drawImage(this.image, this.position.x -12, this.position.y -12)

但我想要的是有条件地传递值： context.drawImage(this.scared ? this.image, this.position.x -12, this.position.y -12 : this.imageScared, this.position.x -12, this.position.y -12)。

这是行不通的。

class Ghost {
  static speed = 2;
  constructor({position, velocity, color = 'red', image, imageScared}) {
    this.position = position;
    this.velocity = velocity;
    this.radius = 15 * 0.8;
    this.color = color;
    this.prevCollisions = []
    this.speed = 2;
    this.scared = false;
    this.image = image;
    this.imageScared = imageScared;
  }
  draw() {
    context.beginPath();
context.arc(this.position.x,this.position.y, this.radius, 0, Math.PI * 2)
context.fillStyle = this.scared ? 'blue' : this.color;
context.fill();
context.closePath();
context.drawImage( if (this.scared) { this.image, this.position.x -12, this.position.y -12 } else { this.imageScared, this.position.x -12, this.position.y -12 } )
  }
  update() {
    this.draw();
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;
  }
}

【问题讨论】：

标签： javascript canvas html5-canvas conditional-statements drawimage

【解决方案1】：

看起来您使用了三元运算符，然后编写了 if 语句作为参数？无论如何，您可以在 context.drawImage 语句中使用三元。

context.drawImage( this.scared ? this.image : this.imageScared, this.position.x -12, this.position.y -12 );

    class Ghost {
      static speed = 2;
      constructor({position, velocity, color = 'red', image, imageScared}) {
        this.position = position;
        this.velocity = velocity;
        this.radius = 15 * 0.8;
        this.color = color;
        this.prevCollisions = []
        this.speed = 2;
        this.scared = false;
        this.image = image;
        this.imageScared = imageScared;
      }
      draw() {
        context.beginPath();
        context.arc(this.position.x,this.position.y, this.radius, 0, Math.PI * 2)
        context.fillStyle = this.scared ? 'blue' : this.color;
        context.fill();
        context.closePath();
        context.drawImage( this.scared ? this.image : this.imageScared, this.position.x -12, this.position.y -12 );
      }
      update() {
        this.draw();
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;
      }
    }

【讨论】：

【解决方案2】：

第一条 Web 开发者规则：使用打开的开发者工具。只需按 F12 并检查控制台是否有错误，您就会发现发生了什么。即使您按“运行代码 sn-p”，错误也会显示。你的语法不好。

也许用其他有意义的语言，但不是 JavaScript。您不能有条件参数取决于 if，在参数内内联 if。

只需更改此行

context.drawImage( if (this.scared) { this.image, this.position.x -12, this.position.y -12 } else { this.imageScared, this.position.x -12, this.position.y -12 } )

到这条线

if (this.scared) {
    context.drawImage(this.image, this.position.x - 12, this.position.y - 12)
} else {
    context.drawImage(this.imageScared, this.position.x - 12, this.position.y - 12)
)

您也可以在每个参数上使用三元组，但我认为这段代码更接近您的代码，因此您会理解其中的区别。

【讨论】：