Por*_*man 11 javascript html5 canvas
HTML5的<canvas>元件不接受它的相对尺寸(百分比)width和height属性.
我想要完成的是让我的画布相对于窗口大小.这是我到目前为止所提出的,但我想知道是否有更好的方法:
<canvas>中<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, 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>
set*_*ien 15
画布width和height属性与相同的画布width和height样式分开.在width和height属性是帆布的呈现表面的大小,以像素为单位,而它的样式中选择文档中的位置,其中,浏览器应该借鉴的呈现表面的内容.只是如果没有指定,width并且height样式的默认值是渲染表面的宽度和高度.所以你对#1是正确的:没有理由将它包装在div中.您可以为canvas元素上的所有样式设置百分比值,就像任何其他元素一样.
对于#3,只要你没有在canvas元素上使用填充,就可以很容易地(和跨浏览器)获得clientWidth和clientHeight的大小.
我在这里编写了略微简化的版本.
对于#4,你说运气不对.可以在设置宽度和高度之前进行检查,如果不需要调整大小就可以单独使用画布,这样可以消除一些重绘,但是你无法摆脱所有重绘.
编辑:波特曼指出我搞砸了中心风格.这里有更新版本.
就像sethobrien所说的那样,canvas元素具有两对宽度/高度的属性.
canvas.width/ canvas.height是关于缓冲区像素的大小,它将包含绘图命令的结果.
canvas.style.width/ canvas.style.height是关于用于在浏览器窗口中显示画布对象的大小,它们可以是css支持的任何单位.
事实上,你可以设置canvas.width和canvas.height只有一次,做绘图画布,设置百分比的风格尺寸参数,然后忘掉重绘帆布内容.当然,这意味着浏览器只会像从网络加载的常规图像那样进行缩放,因此可见结果将显示像素缩放瑕疵.
只有在想要像素完美的结果时,才需要在调整canvas元素大小后重绘画布内容.