我想制作一个 Canvas ，占据主体的整个宽度和高度(没有滚动)，并且具有非拉伸(stretch)和非模糊的绘图。每当我制作 Canvas 100vw 和 100vh 时，绘图就会变得模糊且图像拉伸(stretch)，并且尺寸不正确。
示例:
<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>
这段代码产生了一个黑色矩形，但是非常模糊，而且尺寸比我想要和期望的要大得多(考虑到 Canvas 的宽度和高度是整个 body ，而矩形的宽度和高度只有100和75)。这个问题有解决办法吗？
谢谢。
最佳答案
它被拉伸(stretch)等原因有以下几个原因:
- 必须在 Canvas 大小设置后绘制矩形
设置 Canvas 大小时，您实际上并没有设置样式高度和宽度，因为元素 Canvas 本身已经具有这些属性。
另请注意，您将希望您的 body/html css 高度为 100%，因为它以 auto 开头，当 Canvas 的高度设置为 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>
关于javascript - 如何使 Canvas 达到主体的宽度和高度，同时不拉伸(stretch)或模糊绘图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58702373/