如何使用 JavaScript 将画布大小调整为像素数量

Question

我正在尝试将画布宽度调整为给定的像素量，如下所示：

if (condition==true) {
    canvasVar.width = pixel amount;
}

if 语句正在执行，但画布的大小调整很奇怪。我尝试过很多方法：

var canvasVar = document.getElementById('canvasId');
var contextVar = canvasVar.getContext('2d');

//all numbers in pixels.
canvasVar.style.width = 20; //doesn't do anything.
canvasVar.width = 20; //resizes the HEIGHT!!!
contextVar.canvas.width = 20; //also resizes height.

应用方法2和3后的画布宽度/高度值为656（正常值）和1405（正常值= 328）。

注意：我使用 CSS 设置画布默认宽度/高度，并且我还使用 Yii PHP 框架。

我还尝试通过

20

扩展名来关注

px

。给出错误“意外的标识符”。

Answer 1

画布有“2”个高度和宽度属性。其中一个指定画布的分辨率，另一个指定尺寸

canvasVar[0].width = 20; // canvas consists of 20 virtual px in width
canvasVar[0].style.width = '400 px' // canvas gets a width of 400 px