javascript - 即时修改 Canvas HTML5 的大小

Question

我正在创建一个在 Canvas 中制作思维导图的应用程序，现在我在调整元素大小方面遇到了问题。最初我有这个:

<div id="lienzo">

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

                This text is displayed if your browser does not support HTML5 Canvas.

            </canvas>

        </div>

但是任何时候我想改变 Canvas 的大小，即改变元素 Canvas 的宽度和高度。

我试过用以下方法移除 Canvas :

$('canvas').remove();

然后创建一个新的元素 Canvas :

$("<canvas/>",{id:'canvas2'}).appendTo('#lienzo'); 
$('canvas').width(500);
$('canvas').height(500);

后来我做了这个，我在 Canvas 中重绘了元素，但是这个元素看起来像素化了

当然，在新 Canvas 中我无法选择元素。

我试图直接更改 Canvas 的尺寸，但我遇到了同样的问题。

在解释完所有内容之后，问题是，我如何在不更改 Canvas 中的项目的情况下即时更改 Canvas 的大小。有什么想法吗？

谢谢你的时间

Answer 1

那是因为 jQuery 的 .width() 和 .height() 方法用 CSS 改变了元素的大小，这相当于缩放它，它不会'不要更改 Canvas 元素中的任何内容。如果您想更改 Canvas 显示的像素数，您需要设置 Canvas 元素的 .width 和 .height 属性。试试这个:

$('#canvas2')[0].width = 500;
$('#canvas2')[0].height = 500;