使用 createElement() 创建 HTML Canvas 对象后如何调整其大小？
我正在使用以下 javascript 代码创建一个 HTML Canvas 对象：
var Canvas = document.createElement("canvas");
Canvas.style.width = "500px";
然后在其上绘制文本。
显示画布时，整个画布（包括内容）已放大以匹配 500px 宽度，这会导致难看的重采样。我真正想要的是内容保持相同的大小，只有画布本身变大。
有什么想法吗？
I'm creating a HTML Canvas object using this javascript code:
var Canvas = document.createElement("canvas");
Canvas.style.width = "500px";
and then i'm drawing text upon it.
When the canvas is displayed, the whole canvas has been scaled up (including content) to to match the 500px width, which results in ugly resampling. What i really want, is that the content stay the same size, only the canvas itself made bigger.
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试更改元素的宽度而不是 CSS 宽度。
Try changing the element’s width instead of its CSS width.
托马斯的答案是正确的，但听起来您也想保留画布上的现有内容。当您更改画布大小时，它会自动清除并重置为默认状态。因此，您需要重新绘制内容，或者将内容复制到另一个画布（使用
drawImage），调整画布大小，然后将内容复制回来（再次使用drawImage< /代码>）。Thomas' answer is correct, but it sound's like you also want to keep the existing content on the canvas. When you change the canvas size, it automatically gets cleared and reset to it's default state. Because of that, you will either need to redraw the contents, or copy the contents to another canvase (using
drawImage), resize the canvas, then copy the contents back (again, usingdrawImage).