用css设置画布的宽度和高度可以缩放整个东西[重复]答案

【问题标题】：setting width and height of canvas with css scales the whole thing [duplicate]用css设置画布的宽度和高度可以缩放整个东西[重复]
【发布时间】：2020-05-28 19:42:19
【问题描述】：

我有一个画布，我希望能够自定义其大小。但是，当我在 CSS 中设置 width 和 height 属性时，整个画布都会被缩放。此外，我无法在 JS 中使用 ctx.scale(1,1) 将其设置回来。

我已经看到this 和this 的问题没有可接受的解决方案。

这是我的相关代码：

HTML：

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

CSS：

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

JS：

$( ()=> {
    $('#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() 的规格，如MDN 所述。

【问题讨论】：

这里的selectedSprite是什么？
您链接的两个问题都有使用属性而不是 CSS 的所需解决方案。这就是画布的工作原理
解决方案是这样做：canvas.setAttribute('width', window.innerWidth); canvas.setAttribute('height', window.innerHeight);

标签： javascript jquery html css html5-canvas

【解决方案1】：

这是设计使然。默认情况下，缩放画布将缩放其中的所有内容。只需将画布放在 div 容器中 display: flex; justify-content: center; align-items: center; 并扩大规模。

如果这不起作用，我不是 100% 清楚您希望完成什么，请提供更多细节。

【讨论】：

感谢您的回答。我尝试添加：#canvas-container { width: 512px;高度：256px；显示：弯曲；证明内容：中心；对齐项目：居中； } 和

它仍然不起作用。它根本不缩放画布。
我想要做的是使画布更大（宽度和高度），而不会自动缩放和扭曲在其上绘制的图像。