Question

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

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

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

请参阅下面的代码，该代码在屏幕中间绘制一个圆圈，40％宽，最大为400px。

代码：

<!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>

Answer 1

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

对于＃3，只要你没有在canvas元素上使用填充，就可以很容易（和跨浏览器）获得clientWidth和clientHeight的大小。

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

对于＃4，你说运气不对。可以在设置宽度和高度之前进行检查，如果不需要调整大小就可以单独使用画布，这样可以消除一些重绘，但是你无法摆脱所有重绘。

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

Answer 2

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

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

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

只有在想要像素完美的结果时才需要在调整画布元素大小后重绘画布内容。

Answer 3

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

假设您的画布高度= 400，窗口高度= 480，并且您想要在窗口高度更改为640时相对更改它的高度。

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

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

使用'window.innerHeight'（返回浏览器窗口的高度......类似'window.innerWidth'）任何你想要计算窗口相对位置的地方。

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

相对调整HTML Canvas的大小

3 个答案: