绘制到 100% 宽度和高度的响应式画布答案

【问题标题】：drawing to responsive canvas that is 100% width and height绘制到 100% 宽度和高度的响应式画布
【发布时间】：2016-09-30 00:32:59
【问题描述】：

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

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

小提琴：https://jsfiddle.net/gs5a4z84/

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>

感谢您的所有帮助。

【问题讨论】：

还想在css中评论，如果我删除宽度：100% 和高度：100%，它将按我想要的方式工作，但就渲染而言，我需要一个会被拉伸的画布，有没有办法解决这个问题？
顺便说一句，链接元素不能有结束元素，而不是<link stuff></link>使用<link stuff>或<link stuff/>

标签： javascript css html5-canvas

【解决方案1】：

如果你对画布对象使用 CSS 宽度和高度属性，那么你实际上不会改变画布上有多少像素，而是改变它有多大。要解决您的问题，请使用 JavaScript 设置画布的宽度和高度属性：

JavaScript：

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

CSS：

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

【讨论】：

这行得通，但它也缩小了一切。该项目最初设计时将宽度和高度设置为 100%。没有别的办法吗？
@simon 你仍然可以将宽度和高度设置为 100%，但这并不完美，但在更大的屏幕上你将无法注意到它
我做一些测试后会给你这个问题的正确答案。谢谢@Bálint
是的，在缩放我的所有图像以匹配这个之后，一切正常，我实际上得到了显着的性能提升。谢谢！