Javascript 用css设置画布的宽度和高度可以缩放整个画面

我有一个画布，我想能够自定义的大小。但是，当我在CSS中设置

宽度

和

高度

属性时，整个画布都会缩放。此外，我不能用JS中的

ctx.scale（1,1）

将其设置回原位

我已经看到并提出了没有可接受的解决方案的问题

这是我的相关代码：

HTML:

<img id="sprites-img" src="roguelikeSheet_transparent.png">
<canvas id="user-map"></canvas>

#user-map {
    transform: scale(1,1);
    width: 512px;
    height: 256px;
}

$( ()=> {
    $('#user-map').click( (evt)=> {
        let clickX = evt.offsetX;
        let clickY = evt.offsetY;

        console.log(clickX, clickY);

        let mapX = Math.floor(clickX/16)*16 ; // not working, scaled incorrectly
        let mapY = Math.floor(clickY/16)*16  ;

        console.log(mapX, mapY);

        placeSprite(mapX, mapY);
    });
});

function placeSprite(mapX, mapY) {
    let startX = selectedSprite[X]*17 - 1;
    let startY = selectedSprite[Y]*17 - 1;

    let ctx = document.getElementById('user-map').getContext('2d');
    ctx.clearRect(mapX, mapY, 16, 16);
    ctx.drawImage(document.getElementById('sprites-img'), startX, startY, 16, 16,
        mapX, mapY, 16, 16);
}

JS:

<img id="sprites-img" src="roguelikeSheet_transparent.png">
<canvas id="user-map"></canvas>

#user-map {
    transform: scale(1,1);
    width: 512px;
    height: 256px;
}

$( ()=> {
    $('#user-map').click( (evt)=> {
        let clickX = evt.offsetX;
        let clickY = evt.offsetY;

        console.log(clickX, clickY);

        let mapX = Math.floor(clickX/16)*16 ; // not working, scaled incorrectly
        let mapY = Math.floor(clickY/16)*16  ;

        console.log(mapX, mapY);

        placeSprite(mapX, mapY);
    });
});

function placeSprite(mapX, mapY) {
    let startX = selectedSprite[X]*17 - 1;
    let startY = selectedSprite[Y]*17 - 1;

    let ctx = document.getElementById('user-map').getContext('2d');
    ctx.clearRect(mapX, mapY, 16, 16);
    ctx.drawImage(document.getElementById('sprites-img'), startX, startY, 16, 16,
        mapX, mapY, 16, 16);
}

---

我知道

ctx.drawImage（）

的规格，如上所述。

这是出于设计。默认情况下，缩放画布将缩放其中的所有内容。只需将画布放入带有

显示：flex；
证明内容：中心；
对齐项目：居中
并扩大规模

我不是100%清楚你希望完成什么，如果这不起作用，请提供更多的细节
 这里的selectedSprite是什么？您链接的两个问题都有所需的解决方案，即使用属性而不是CSS。canvas就是这样工作的：canvas.setAttribute（'width'，window.innerWidth）；canvas.setAttribute（'height'，window.innerHeight）；谢谢你的回答。我尝试添加：#画布容器{宽度：512px；高度：256px；显示：flex；对齐内容：中心；对齐项目：中心；}，但仍然无法工作。它根本不会缩放画布。我想做的是使画布更大（宽度和高度），而不会自动缩放和扭曲绘制在画布上的图像。