HTML5
<canvas>元素的宽度和高度属性不接受相对大小(百分比).
我想要完成的是让我的画布相对于窗口大小.这是我到目前为止,但我想知道是否有更好的方法是：
更简单
>不需要打包< canvas>在< div>中.
>不依赖于jQuery(我用它来获取父div的宽度/高度)
>理想情况下,浏览器不重绘大小(但我认为这可能是一个要求)
见下面的代码,在屏幕中间画一个圆圈,40％宽,最大为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,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>
解决方法
画布宽度和高度属性与相同的画布宽度和高度样式是分开的. width和height属性是画布渲染表面的大小(以像素为单位),而其样式选择文档中的位置,浏览器应从渲染表面绘制内容.只是宽度和高度样式的默认值(如果没有指定)就是渲染表面的宽度和高度.所以你是对的#1：没有理由将它包装在一个div.您可以设置canvas元素上所有样式的百分比值,就像任何其他元素一样.
对于#3,只要你没有在canvas元素上使用填充,它很容易(和跨浏览器)来获取clientWidth和clientHeight的大小.
我编写了稍微简化的版本here.
对于#4,你是正确的运气.在设置宽度和高度之前可以检查,如果不需要调整大小,可以单独放置画布,这样可以消除一些重绘,但是您无法摆脱所有这些重绘.
编辑：波特曼指出,我搞砸了中心的风格.更新版本here.
