相对调整HTML画布大小 [英] Relatively sizing HTML Canvas
问题描述
HTML5 < canvas> 元素不接受其 width 和的相对大小（百分比） height 属性。
The HTML5 <canvas> element does not accept relative sizes (percent) for its width and height properties.
我想要完成的是让我的画布相对于窗口大小。这是我到目前为止，但我想知道是否有一个更好的方法是：
What I'm trying to accomplish is to have my canvas sized relative to the window. This is what I've come up with so far, but I'm wondering if there is a better way that is:
- Simpler
- 不需要在
< div> < canvas>>。 - 不依赖于jQuery（我使用它来获取父div的宽度/高度）
- 理想情况下， （但我认为这可能是一个要求）
- Simpler
- Does not require wrapping the
<canvas>in a<div>. - Not dependent on jQuery (I use it to get the width/height of the parent div)
- Ideally, doesn't redraw on browser resize (but I think that might be a requirement)
请参阅下面的代码，它在屏幕中间绘制一个圆圈， 40％宽，最大400px。
See below for the code, which draws a circle in the middle of the screen, 40% wide up to a maximum of 400px.
现场演示： http://jsbin.com/elosil/2
代码：
<!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>
推荐答案
画布 code>和属性与同一画布的 width 和 height styles。 width 和 height 属性是画布渲染表面的大小（以像素为单位），而样式选择一个位置浏览器应该从呈现表面绘制内容的文档。它只是这样发生， width 和 height 样式的默认值，如果他们没有指定是渲染表面的宽度和高度。所以你是正确的＃1：没有理由包装在一个div。
The canvas width and height attributes are separate from the same canvas's width and height styles. The width and height attributes are the size of the canvas's rendering surface, in pixels, whereas its styles choose a location in the document where the browser should draw the content from the rendering surface. It just so happens that the default value for the width and height styles, if they're not specified, is the rendering surface's width and height. So you're right about #1: there's no reason to wrap it in a div. You can set percentage values for all of the styles on your canvas element, just like any other element.
对于＃3，这是非常容易的（和跨浏览器），你可以设置canvas元素上的所有样式的百分比值。获得与clientWidth和clientHeight的大小，只要你不使用padding在你的canvas元素。
For #3, it's pretty easy (and cross-browser) to get the size of things with clientWidth and clientHeight, as long as you're not using padding on your canvas element.
我编写了略微简化的版本在这里。
I coded up the slightly simplified version here.
对于＃4，你是对运气不好。可以在设置宽度和高度之前进行检查，如果不需要调整大小，则可以单独使用canvas，这将消除一些重绘，但是你不能删除所有的重绘。
For #4, you're right about being out of luck. It's possible to check before setting width and height and leave the canvas alone if it doesn't need resizing, which would eliminate some of the redraws, but you can't get rid of all of them.
编辑：波特曼指出，我搞砸了中心的风格。更新版本此处。
Portman pointed out I messed up the centering style. Updated version here.
这篇关于相对调整HTML画布大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
