相对大小的 HTML Canvas答案

【问题标题】：Relatively sizing HTML Canvas相对大小的 HTML Canvas
【发布时间】：2020-07-02 21:09:36
【问题描述】：

HTML5 <canvas> 元素不接受其width 和height 属性的相对大小（百分比）。

我想要完成的是让我的画布相对于窗口大小。到目前为止，这是我想出的，但我想知道是否有更好的方法：

更简单
不需要将<canvas> 包装在<div> 中。
不依赖jQuery（我用它来获取父div的宽/高）
理想情况下，不会在浏览器调整大小时重绘（但我认为这可能是一项要求）

代码见下文，它在屏幕中间画了一个圆圈，宽度为 40%，最大为 400 像素。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas of relative width</title>
    <style>
        body { margin: 0; padding: 0; background-color: #ccc; }
        #relative { width: 40%; margin: 100px auto; height: 400px; border: solid 4px #999; background-color: White; }
    </style>
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        function draw() {
            // draw a circle in the center of the canvas
            var canvas = document.getElementById('canvas');
            var relative = document.getElementById('relative');
            canvas.width = $(relative).width();
            canvas.height = $(relative).height();
            var w = canvas.width;
            var h = canvas.height;
            var size = (w > h) ? h : w; // set the radius of the circle to be the lesser of the width or height;
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(w / 2, h / 2, size/2, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();
        }

        $(function () {
            $(window).resize(draw);
        });
    </script>
</head>
<body onload="draw()">
    <div id="relative">
        <canvas id="canvas"></canvas>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

画布width 和height 属性与同一画布的width 和height 样式是分开的。 width 和 height 属性是画布渲染表面的大小，以像素为单位，而其样式选择文档中浏览器应从渲染表面绘制内容的位置。碰巧width 和height 样式的默认值，如果没有指定，是渲染表面的宽度和高度。所以你是对的＃1：没有理由将它包装在一个 div 中。您可以为画布元素上的所有样式设置百分比值，就像任何其他元素一样。

对于 #3，只要您不在画布元素上使用填充，就可以很容易（并且跨浏览器）使用 clientWidth 和 clientHeight 获取事物的大小。

我编写了稍微简化的版本here。

对于#4，你说的不走运是对的。可以在设置宽度和高度之前进行检查，如果不需要调整画布大小，则无需调整画布，这将消除一些重绘，但您无法摆脱所有重绘。

编辑：波特曼指出我搞砸了居中风格。更新版本here。

【讨论】：

谢谢。有趣的是，如果您想要居中，您似乎确实需要将canvas 包裹在div 中。 margin: 0 auto 似乎不像 div 那样将画布居中。
@Portman 不，你仍然可以。我只是忘了把 display:block 放在画布样式中（它的默认值是 inline-block，它不会以这种方式居中）。使用此修复更新答案。

【解决方案2】：

正如 sethobrien 所说，canvas 元素具有两对宽度/高度属性。

canvas.width / canvas.height 大约是包含绘图命令结果的缓冲区的像素大小。
canvas.style.width / canvas.style.height 大约是用于在浏览器窗口中显示画布对象的大小，它们可以是 css 支持的任何单位。

您确实可以只设置一次canvas.width 和canvas.height，在画布中绘制，以百分比设置样式大小参数，然后忘记重新绘制画布内容。当然，这意味着浏览器只会像从网络加载的常规图像一样自行进行缩放，因此可见结果将显示像素缩放伪影。

仅当您想要像素完美的结果时，您才需要在调整画布元素大小后重新绘制画布内容。

【讨论】：

【解决方案3】：

好的。这是我用来实现相同的技术。

假设你的画布高度=400，窗口高度=480，如果窗口高度变为640，你想相对改变它的高度。

canvas = document.getElementById("canvas"); 
canvas.height=window.innerHeight*400/480;

p.s：不要在html标签内初始化画布的高度。

在您想要计算窗口相对位置的任何位置使用“window.innerHeight”（返回浏览器窗口的高度。类似“window.innerWidth”）。

希望你得到你需要的东西。

【讨论】：