为什么画布图像大小在 Safari 中中断？答案

【问题标题】：Why canvas image size break in Safari?为什么画布图像大小在 Safari 中中断？
【发布时间】：2022-12-16 13:38:37
【问题描述】：

首先，网站的宽度和高度是基于用户屏幕的。

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

c.width = window.innerWidth;
c.height = window.innerHeight;

window.addEventListener("resize", function () {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
})

然后，我正在使用 drawImage

class castle {
    constructor() {
        const castle = new Image()
        castle.src = './Img/castle.png'

        castle.onload = () => {
            this.scale = 0.5
            this.image = castle
            this.width = this.image.width * this.scale
            this.height = this.image.height * this.scale
            this.position = {
                x: c.width / 2 - this.width / 2,
                y: c.height / 2 - this.height / 2
            }

            this.center = {
                x: c.width / 2,
                y: c.height / 2
            }
        }

    }

    draw() {
        ctx.drawImage(
            this.image,
            this.position.x,
            this.position.y,
            this.width,
            this.height
        )
    }
}

同一显示器：

为什么 Google Chrome 和 Safari 显示的图像大小不同？

我使用 Google Chrome 的项目的性能很好。但是，Safari 的图像尺寸太大了

我用谷歌搜索： image to canvas on chrome but not safari

恩... 我应该将所有图像上传到 imgur 吗？这比在我的项目中打开一个文件夹 Img 更好吗？

【问题讨论】：

我不确定最后两个问题如何与您的其余问题联系起来。对于您最初的问题，不同的浏览器可以不同地解释标准。其中一个或两个可能在其实现中存在错误。
我将从一些调试开始：console.log() 各种值，然后查看 safari 的确切位置。

标签： javascript canvas

【解决方案1】：

Safari 在处理 html 画布大小方面存在问题。可能这就是为什么您的图像呈现不同的原因。

画布大小必须是：宽度 * 高度 < 16777216.

不久前，我在 Safari Mobile 上调试我的一个项目时发生了这种情况。

【讨论】：