Javascript 绘制到100%宽度和高度的响应画布_Javascript_Css_Html5 Canvas

Javascript 绘制到100%宽度和高度的响应画布

javascript css html5-canvas

Javascript 绘制到100%宽度和高度的响应画布,javascript,css,html5-canvas,Javascript,Css,Html5 Canvas,我试图在一个大画布上获得一个跟随鼠标光标的形状。此代码未按预期工作。如果画布的宽度/高度为屏幕的100%，如何将其修改为相对画布大小另外，我知道requestanimationframe，但是为了演示这个问题，请忽略它（我正在使用它，但是它的计时非常复杂，与本例无关）小提琴： CSS: HTML/JS： <!DOCTYPE html> <html> <head> <link href="main.css" rel="style

我试图在一个大画布上获得一个跟随鼠标光标的形状。此代码未按预期工作。如果画布的宽度/高度为屏幕的100%，如何将其修改为相对画布大小

另外，我知道requestanimationframe，但是为了演示这个问题，请忽略它（我正在使用它，但是它的计时非常复杂，与本例无关）

小提琴：

CSS:

HTML/JS：

<!DOCTYPE html>
<html>
    <head>
        <link href="main.css" rel="stylesheet"</link>
    </head>
    <body>
        <div id="wrapper">
            <canvas id="ctx" width="256" height="144"></canvas>
        </div>
        <script>    
            var mouseX, mouseY;
            const WIDTH = 256;
            const HEIGHT = 144;
            var ctx = document.getElementById('ctx').getContext('2d');
            ctx.canvas.addEventListener('mousemove', setMousePosition, false);
            function setMousePosition(e) {
                mouseX = e.clientX;
                mouseY = e.clientY;
            }
            function drawCursor() {
                ctx.clearRect(0,0,WIDTH,HEIGHT);
                ctx.fillStyle = "#FF6A6A";
                ctx.fillRect(mouseX, mouseY, 16, 16);
            }
            setInterval(function (){
                drawCursor();
            }, 40);
        </script>
    </body>
</html>


如果对画布对象使用CSS宽度和高度属性，那么实际上不会更改画布上有多少像素，而是更改画布的大小。要解决问题，请使用JavaScript设置画布的宽度和高度属性：
ctx.canvas.width = innerWidth;
ctx.canvas.height = innerHeight;

JavaScript:
ctx.canvas.width = innerWidth;
ctx.canvas.height = innerHeight;

CSS:
我还想评论一下，在css中，如果我删除宽度：100%和高度：100%，它将按照我想要的方式工作，但问题是，就渲染而言，我需要一个拉伸的画布，有没有办法解决这个问题？顺便说一句，link元素不能有一个closing元素，而不是
使用
或这是可行的，但它也缩小了所有的规模。该项目最初的设计宽度和高度设置为100%。没有其他方法吗？@simon您仍然可以将宽度和高度设置为100%，但这并不完美，但在更大的屏幕上，您将无法注意到它。在我进行一些测试后，我将为您提供此问题的正确答案。谢谢@BálintYes，在缩放了我所有的图像以匹配这一点后，一切都正常，我的性能得到了显著提升。非常感谢。
body, canvas {
    margin: 0;
    padding: 0;
}