Question

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

另外，我知道requestanimationframe，但为了证明这个问题，请忽略它（我正在使用它，但它是一个复杂的时序，与这个例子无关）。

CSS：

* { margin: 0; padding: 0;}

body, html { height:100%; }

canvas {
    image-rendering: -moz-crisp-edges;    /* Firefox */
    image-rendering: pixelated;           /* Chrome */
    position:absolute;
    width:100%;
    height:100%;
}

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>

感谢您的帮助。

Answer 1

如果对画布对象使用CSS width和height属性，那么您实际上不会更改画布上有多少像素，但它有多大。要解决您的问题，请使用JavaScript设置画布的width和height属性：

JavaScript的：

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

CSS：

body, canvas {
    margin: 0;
    padding: 0;
}

绘制到100％宽度和高度的响应式画布

1 个答案: