无法在画布上设置高度和宽度

Question

我正在使用 javascript 创建一个画布对象并尝试在其上设置高度和宽度，但它没有创建具有所需尺寸的画布。 请告诉我哪里出错了。 这是代码 -

const canvas = document.createElement('canvas');
const a = document.createElement('a');
canvas.style.height = '1000px';
canvas.style.width = '1000px';
a.href = canvas.toDataUrl('image/jpg');
a.download = 'download.jpg';
a.click();

下载的图像似乎尺寸小得多，而不是指定的尺寸（1000px * 1000px）

Answer 1

如果要设置 HTMLCanvasElement 的宽度/高度，则需要直接在 canvas 元素上设置它们，而不是在其样式上设置。 所以它应该是这样的：

const canvas = document.createElement('canvas');
const a = document.createElement('a');
canvas.height = '1000px';
canvas.width = '1000px';
a.href = canvas.toDataURL('image/jpg');
a.download = 'download.jpg';
a.click();

此外，您拼错了函数.toDataURL() ，URL 在那里大写。

Answer 2

尝试使用属性，而不是样式： canvas.height而不是canvas.style.height 。 一个是呈现的分辨率，另一个是实际像素高度。 这令人困惑，但让您控制升级。

<canvas id="canvas" width="1000" height="1000"></canvas>

应该给你一个 1000x1000 分辨率的画布。