如何调整 html 中 canvas 元素的大小而不缩放它并降低质量？

Question

我正在 web 上开发一个基本的建模应用程序。我有一个板作为canvas元素。 我正在尝试设置它的大小。 当我在 css 中设置它的height和width时，它会缩放整个 canvas，这会降低质量。 我试着这样做：

 const canvas = $("#canvas"); const ctx = canvas[0].getContext("2d"); $(window).on("load", () => { canvas.width = $(".board").width(); canvas.height = $(".board").height(); })

 .board { height: 40rem; width: 90rem; background-color: white; border: 1px solid black; } #canvas { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="header-div"> <h1>Diagram Modeling Tool</h1> </div> <hr> <div class="work-space"> <div class="toolbar"> <p>Components</p> <hr class="components-line"> <div class="components"> <div class="component arrow"> <img class="arrow-image" src="images/arrow.png"> </div> <div class="component rectangle"> <img class="rectangle-image" src="images/rectangle.png"> </div> </div> </div> <div class="board"> <canvas id="canvas"></canvas> </div> </div>

我希望它完全覆盖它所在的 div 元素的大小。相反，我得到的是：

如何在不缩放 canvas 并降低质量的情况下设置大小？

Answer 1

当您使用 jQuery 时，您可能需要阅读以下答案： jQuery 相当于获取 Canvas 的上下文

我将[0]添加到canvas[0].width和canvas[0].height到您的 jQuery 代码，然后添加了一些绘图调用以显示没有任何内容被缩放。

 const canvas = $("#canvas"); const ctx = canvas[0].getContext("2d"); $(window).on("load", () => { canvas[0].width = $(".board").width(); canvas[0].height = $(".board").height(); ctx.fillRect(50, 50, 50, 50); ctx.fillRect(350, 50, 50, 50); ctx.fillRect(350, 350, 50, 50); ctx.fillRect(50, 350, 50, 50); })

 .board { height: 40rem; width: 90rem; background-color: white; border: 1px solid black; } #canvas { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="work-space"> <div class="board"> <canvas id="canvas"></canvas> </div> </div>