如何在 javascript 中使用构造函数和图像？

Posted 2023-03-25

【中文标题】如何在 javascript 中使用构造函数和图像？

【英文标题】：How to use constructors and images in javascript?

【发布时间】：2022-01-06 14:32:06

【问题描述】：

我有以下代码段旨在将图像绘制到画布上。此代码有效：

var ctx = canvas.getContext('2d');

class Rectangle 
    constructor(x, y, scale, source) 
        this.scale = scale;
        this.source = source;
        this.x = x;
        this.y = y;
    

    update() 
        var sprite = new Image();
        sprite.src = this.source;
        sprite.onload = function () 
            ctx.drawImage(sprite, this.x, this.y, sprite.width/3, sprite.height/3);
        
    


const rect = new Rectangle(0, 0, 1, 'circle.jpeg');
rect.update();

但是，当我替换这一行时：

ctx.drawImage(sprite, this.x, this.y, sprite.width/3, sprite.height/3);

用这个：

ctx.drawImage(sprite, this.x, this.y, sprite.width/this.scale, sprite.height/this.scale);

画布根本不显示任何东西。所有这些应该做的就是用构造函数中的值替换之前的 3（我在创建新实例时将其设置为 1）。为什么什么都画不出来？

【问题讨论】：

试试() =>而不是function()

onload 处理程序执行时将this 设置为sprite，它没有.scale

【参考方案1】：

当我们调用更新时，我会将精灵移动到构造函数，我们不必创建新图像，其背后的想法是可以有效地多次调用更新函数。

请参阅下面的示例：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

class Rectangle 
  constructor(x, y, scale, source) 
    this.scale = scale;
    this.x = x;
    this.y = y;
    this.sprite = new Image();
    this.sprite.src = source;
    this.sprite.onload = () => 
      this.update()
    ;
  

  update() 
    if (this.sprite) 
      ctx.drawImage(this.sprite, this.x, this.y, this.sprite.width / this.scale, this.sprite.height / this.scale);
    
  


const rect = new Rectangle(0, 0, 3, 'http://i.stack.imgur.com/UFBxY.png');

canvas.addEventListener("click", () => 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  rect.x += 5;
  rect.update();
);

<canvas id="canvas"></canvas>

您可以看到，正如 @skara9 在 cmets 中所建议的那样，我使用的是 () => 而不是 function()，我正在那里调用更新。

在这个示例中，我还添加了canvas.addEventListener("click"，它显示了当用户单击画布时，绘图如何向右移动一点，逻辑很简单，我们增加rect.x 的值，然后我们调用@987654327 @ 将在新位置绘制图像。