P5JS - 错误 canvas 内容比例

Question

我正在使用 P5JS 制作贪吃蛇游戏。当我开始创建 UI 时，一切都很好，直到我尝试制作一个栏（生活，进步）。为了显示状态，我决定将一定数量的像素复制到渲染纹理。首先，为了检查它是如何工作的，我创建了一个函数。

_cropOverlayTexture() {
    let width = this._overlayTexture.width;
    let height = this._overlayTexture.height;
    this._currentOverlayTexture = createImage(width, height);

    this._currentOverlayTexture.loadPixels();
    for(let i = 0; i < width; i++) {
        for(let j = 0; j < height; j++) {
            this._currentOverlayTexture.set(i, j, [20, 250, 0, 255]);
        }
    }

    this._currentOverlayTexture.updatePixels();
}

update() {
    if(this._currentStep !== this._oldStep) {
        this._cropOverlayTexture();
        this._oldStep = this._currentStep;
    }
}

draw() {
    image(this._barTexture, this._x, this._y, this._width, this._height);
    image(this._currentOverlayTexture, this._x, this._y, this._width, this._height);
}

此时canvas里面的内容相对于x-axis发生了偏移。（Canvas 的大小为 800 x 800）

我删除了这部分代码，但缺陷仍然存在。我试过改变绘图位置和比例，但比例很奇怪，而且图像看起来也很模糊。

function draw() {
    background(0);
    push();
    translate(0, 0);
    scale(0.375, 1);
    
    // draw UI
    
    pop();
}

作为对比，这是之前的样子：

我尝试切换到 WEBGL 模式。

function setup() {
    createCanvas(CANVAS_SIZE.X, CANVAS_SIZE.Y, WEBGL);
    // setup
}

function draw() {
    background(0);
    push();
    translate(-400, -400);
    scale(1, 1);
    
    // draw UI
    
    pop();
}

但这并没有帮助。

我也试过清除浏览器 cookies，重启 IDE，电脑，但没有任何帮助。我做错了什么，可能是什么问题？

P.S：例如，我决定删除所有代码并保留正方形的显示为 100 x 100 像素。

function setup() {  
    createCanvas(800, 800);  
    frameRate(30);  
}  

function draw() {  
    background(0);  
    fill("#ff2574");  
    rect(100, 100, 100, 100);  
}

但图像看起来仍然被拉伸。

Answer 1

我没能找到这个问题的原因。

不过我把出错的项目的文件内容转移到新项目重新下载p5js库就解决了

P5JS - 错误 canvas 内容比例

P5JS - wrong canvas content scale

javascript

user-interface

canvas

p5.js