如何使用javascript将画布大小调整为像素量答案

【问题标题】：How to resize canvas with javascript to pixel amount如何使用javascript将画布大小调整为像素量
【发布时间】：2015-08-05 14:07:36
【问题描述】：

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

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 框架。

谢谢。

编辑：我还尝试通过 px 扩展来关注 20。给出错误提示“意外的标识符”。

【问题讨论】：

你能发布显示问题的 js fiddle
我用 jsfiddle 尝试了你所说的，canvasVar.width = 20; 工作完美。我正在使用一系列其他可能会影响这一点的技术，包括一种名为 chart js 的技术。
调试时总是将事物隔离，然后将它们放在一起。节省您的时间和挫败感

标签： javascript css html canvas yii

【解决方案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

【讨论】：

当我添加数组括号时，它给了我这个：Cannot set property 'width' of undefined。我还尝试按照您所说的样式建议（将其放在引号中），但没有效果。