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').remove();

稍后使用：

创建一个新的元素画布

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

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

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

我试图直接改变Canvas的测量，但我遇到了同样的问题。

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

感谢您的时间

Answer 1

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

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

动态修改画布HTML5的大小

1 个答案: