使用mozImageSmoothingEnabled已被弃用

Question

又是一个被弃用的问题。我正在使用 JavaScript 创建俄罗斯方块游戏，但在尝试将方块绘制到画布上时，我一直遇到以下错误：

mozImageSmoothingEnabled 的使用已被弃用，请改用未带前缀的 imageSmoothingEnabled 属性。

但我不知道如何使用未带前缀的形式！我该如何解决这个问题呢？不管我怎么做，我都能看到画布被绘制了，但方块却无法显示。

这是我在名为 view.js 的文件中的代码：

export default class View {
    constructor(element, width, height, rows, columns) {
        this.element = element;
        this.width = width;
        this.height = height;

        this.canvas = document.createElement('canvas');
        this.canvas.width = this.width;
        this.canvas.height = this.height;

        this.context = this.canvas.getContext('2d');

        this.blockWidth = this.width / columns;
        this.blockHeight = this.height / rows;

        this.element.appendChild(this.canvas);
    }

    renderPlayfield(playfield) {
        for (let y = 0; y < playfield.length; y++) {
            const line = playfield[y];

            for (let x = 0; x < line.height; x++) {
                if (block) {
                    this.context.fillStyle = 'white';
                    this.context.strokeStyle = 'black';
                    this.context.lineWidth = 2;

                    this.context.fillRect(x * this.blockWidth, y * this.blockHeight, this.blockWidth, this.blockHeight);
                }
            }
        }
    }
}

然后在我的index.js文件中：

import Game from './src/game.js';
import View from './src/view.js';

const root = document.querySelector('#root');

const game = new Game();
const view = new View(root, 480, 640, 20, 10);

window.game = game;
window.view = view;

view.renderPlayfield(game.playfield);

- Irina

Answer 1

我在使用Firefox Developer Edition 89.0b10进行调试时遇到了相同的情况 - 在请求画布上下文后，警告弹出：

        var ctx = self.ctx = can.getContext("2d");

看起来是Firefox内部的小配置问题，除此之外，Firefox仍然是我所知道的最好的浏览器。

- Did Alik

Answer 2

你最初的代码 ctx.mozImageSmoothingEnabled = true; 能够运行吗？如果可以，你只需要将最初的代码替换为 ctx.imageSmoothingEnabled = true;。

这里有一个例子。

- Jun Yin