如何在不拉伸或模糊图纸的情况下使画布全宽和全高？

2024-05-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）。有没有解决此问题的方法？

谢谢。

它被拉伸等的原因是由于以下几个原因：

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

还要注意，由于画布/ css的高度是自动开始的，因此您希望body / html的CSS高度为100％，当将canvas的高度设置为主体的高度时，它只会填充主体最初给它的空间到整个屏幕。

您新的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>

如何在不拉伸或模糊图纸的情况下使画布全宽和全高？

skycom11 回答：如何在不拉伸或模糊图纸的情况下使画布全宽和全高？

大家都在问