gpt4 book ai didi

javascript - 为什么 HTML Canvas 有两种不同的尺寸?

转载 作者:行者123 更新时间:2023-11-29 10:26:14 25 4
gpt4 key购买 nike

<分区>

我目前正在开发一个 HTML/Javascript 元素,我在其中使用 HTML Canvas 和 Context2D 进行绘图。或多或少,我正在绘制一个没有固定图 block 大小的二维世界的一部分。

let width = canvas.width;
let height = canvas.height;
let cellHeight = height/rows * viewSizeMultiplier.y,cellWidth = width/columns * viewSizeMultiplier.x;

viewSizeMultiplier 相当于 map 上 8 个 Tiles 的 1/8。单击 Canvas 时获取特定的 Tile 使我感到很吃力,因为 canvas.size 不会通过调整窗口大小来自行调整。

.canvas { 
width: 60%;
height: 80%;
left:5%;
top:10%;
}

这就是我在 CSS 中实现 Canvas 的方式。为了在我的屏幕上显示当前的 Tile,我必须像这样计算不同尺寸的纵横比:

function  getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect(),
scaleX = canvas.width / rect.width,
scaleY = canvas.height / rect.height;

return {
x: (evt.clientX - rect.left) * scaleX,
y: (evt.clientY - rect.top) * scaleY
}
}

所以我的问题是为什么会有 2 种不同尺寸的 Canvas ?如果它使用 canvas.size 大小,它会调整它的分辨率吗?

添加的代码段:

let canvas = document.getElementsByClassName('canvas')[0];
const canvasWidth= canvas.width;
const actualWidth =canvas.getBoundingClientRect().width;
console.log(canvasWidth,actualWidth);//300 , 522

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com