动态修改画布 HTML5 的大小
我正在创建一个应用程序来在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
那是因为 jQuery
.width()
和.height()
方法用 CSS 改变了元素的大小,这相当于缩放它,它不会改变任何东西在画布元素内。如果要更改画布显示的像素数,您需要设置画布元素的.width
和.height
属性。试试这个: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: