Javascript 如何在不拉伸或模糊图形的情况下，使画布达到身体的全宽和全高？
我想做一个画布，占据身体的全部宽度和高度（没有滚动），并且有非拉伸和非模糊的图形。每当我制作一张100vw和100vh的画布时，画面就会变得模糊和拉伸，尺寸不正确 例如：Javascript 如何在不拉伸或模糊图形的情况下，使画布达到身体的全宽和全高？,javascript,html,canvas,Javascript,Html,Canvas,我想做一个画布，占据身体的全部宽度和高度（没有滚动），并且有非拉伸和非模糊的图形。每当我制作一张100vw和100vh的画布时，画面就会变得模糊和拉伸，尺寸不正确 例如： <html> <body> <canvas id="c" style="border: 2px solid black;"></canvas> <style> body, html {padding: 0; margin: 0; overflow: hidden;}
<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>
正文，html{填充：0；边距：0；溢出：隐藏；}
var c=document.getElementById（“c”）；
var ctx=c.getContext（“2d”）；
函数绘图（）{
ctx.fillRect（100,50,100,75）；
c、 style.width=document.body.clientWidth；
c、 style.height=document.body.clientHeight；
}
draw（）；
谢谢。它被拉伸等原因是由于以下几个原因：
- 必须在设置画布的大小后绘制矩形
- 设置画布大小时，实际上并没有设置样式的高度和宽度，因为元素画布本身已经具有这些属性 还请注意，您希望body/html css高度为100%，因为它开始时是自动的，当canvas的高度设置为body的高度时，它只会填充body最初提供给它的与整个屏幕相比的小空间
draw（）函数绘图（）{
c、 width=document.body.clientWidth；//从两者中删除.style
c、 高度=document.body.clientHeight；
fillRect（100,50,100,75）；//fillRect post设置大小
}
body，html{填充：0；边距：0；溢出：隐藏；高度：100%；}
ctx.fillRect（）canvas.width=window.innerWidthcanvas.height=window.innerHeight