动态修改画布 HTML5 的大小

发布于 2024-11-04 00:22:36 字数 766 浏览 0 评论 0原文

我正在创建一个应用程序来在 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 的尺寸,但我遇到了同样的问题。

解释完所有内容后,问题是,如何在画布中的项目不发生变化的情况下动态更改画布的大小。有什么想法吗?

谢谢您的宝贵时间

I am creating an applicattion to make mindmaps in Canvas and now i have problems with the resize of elements. Initially i have this:

<div id="lienzo">

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

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

            </canvas>

        </div>

But any time i want to change the size of the canvas,ie change the width and height of the element canvas.

I have tried remove the canvas with:

$('canvas').remove();

And later create a new element canvas with:

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

Later i did this i redraw the element in Canvas but this elements look pixelated

Of course, in the new canvas I can´t selected the element.

I tried to change directly measures of Canvas but i have the same problem.

After explaining all, the question is, how could i change the size of Canvas on the fly without that the items in the canvas change. Any idea?

Thanks you for your time

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浸婚纱 2024-11-11 00:22:36

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

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

That's because the jQuery .width() and .height() methods change the size of the element with CSS, this is equivalent to scaling it, it doesn't change anything within the canvas element. If you want to change the number of pixels the canvas displays you need to set the .width and .height properties of the canvas element. Try this:

$('#canvas2')[0].width = 500;
$('#canvas2')[0].height = 500;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文