如何在不拉伸或模糊绘图的情况下使画布全宽和身体高度？答案

【问题标题】：How to make canvas full width and height of body while not stretching or blurring drawings?如何在不拉伸或模糊绘图的情况下使画布全宽和身体高度？
【发布时间】：2019-11-05 17:37:18
【问题描述】：

我想制作一个画布，它占据身体的整个宽度和高度（没有滚动），并且没有拉伸和模糊的绘图。每当我制作 100vw 和 100vh 的画布时，绘图会变得模糊和拉伸图像，尺寸不正确。

例子：

<html>
<body>
<canvas id="c" style="border: 2px solid black;"></canvas>
<style> body, html {padding: 0; margin: 0; overflow: hidden;} </style>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");

function draw() {
ctx.fillRect(100, 50, 100, 75);
c.style.width = document.body.clientWidth;
c.style.height = document.body.clientHeight;
}
draw();
</script>

这段代码生成了一个黑色的矩形，但是非常模糊，而且尺寸比我想象的要大得多（考虑到画布的宽度和高度是整个身体，矩形的宽度和高度只有 100 和75)。这个问题有什么解决办法吗？

谢谢。

【问题讨论】：

我相信这是因为您在矩形之后分配了高度。尝试将设置画布大小的两个序列放在ctx.fillRect() 之前，或者在html 元素<canvas height="100%" width="100%"> 上设置画布的实际高度。告诉我这是怎么回事
如果我用 100vw 和 100vh 设置画布样式，这会起作用吗？
也许，它被拉伸的原因是因为你在设置大小之前绘制了矩形，只要你在画布上绘制任何东西之前设置了大小，它就不应该被拉伸等等。跨度>
另外，当我将宽度和高度更改为 100vw 和 100vh 时，画布会自动调整为大约 100 x 100。这是为什么呢？
设置 canvas.width = window.innerWidth; 和 canvas.height = window.innerHeight 我似乎没有得到任何模糊或拉伸

标签： javascript html canvas

【解决方案1】：

之所以会拉长等原因有以下几个原因：

矩形必须在画布大小设置好后才能绘制
在设置画布大小时，您实际上并没有设置样式的高度和宽度，因为元素画布本身已经具有这些属性。

还请注意，您将希望您的 body/html css 高度为 100%，因为它以 auto 开始，当画布的高度设置为 body 的高度时，它只会填充最初比较的小空间 body到整个屏幕。

您的新 draw() 函数应如下所示

function draw() {
c.width = document.body.clientWidth; // Remove .style from both
c.height = document.body.clientHeight;
ctx.fillRect(100, 50, 100, 75); // fillRect post setting size
}

和css

<style> body, html {padding: 0; margin: 0; overflow: hidden; height:100%;} </style>

【讨论】：

非常感谢，这行得通！只是想知道，有什么方法可以使绘图更清晰一点？我会将此标记为答案，但请回复:)
这已经很清楚了，它可能只是由于大小而显得有点模糊？可能还有另一个图形库，例如 OpenGL，它会产生更清晰的显示，但与 HTML 的 Canvas 相比，该框架将具有完全不同的设置
谢谢你，这非常有用和有用。 +1 并标记为答案！