如何自动缩放HTML5 <canvas>元素以适应页面?
例如,我可以得到一个<div>通过设置高度和宽度属性为100%缩放,但一个<canvas>不会缩放,会吗?
如何自动缩放HTML5 <canvas>元素以适应页面?
例如,我可以得到一个<div>通过设置高度和宽度属性为100%缩放,但一个<canvas>不会缩放,会吗?
当前回答
使用jQuery,您可以跟踪窗口调整大小和改变画布的宽度使用jQuery以及。
就像这样
$(window).resize(function() { $ (" # myCanvas”)。Width ($(window).width()) }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
其他回答
这对我很管用。 伪代码:
// screen width and height
scr = {w:document.documentElement.clientWidth,h:document.documentElement.clientHeight}
canvas.width = scr.w
canvas.height = scr.h
另外,就像devyn说的,您可以替换“document.documentElement”。宽度和高度均为“inner”的客户端:
**document.documentElement.client**Width
**inner**Width
**document.documentElement.client**Height
**inner**Height
它仍然有效。
使用jQuery,您可以跟踪窗口调整大小和改变画布的宽度使用jQuery以及。
就像这样
$(window).resize(function() { $ (" # myCanvas”)。Width ($(window).width()) }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
我使用的是sketch.js,所以在我为画布运行init命令后,我用jquery改变宽度和高度。它将维度基于父元素。
$ (' # DrawCanvas ') .sketch () .attr(“高度”,$ (' # DrawCanvas ') .parent () .height ()) .attr(“宽度”,$ (' # DrawCanvas ') .parent () .width ());
(function() {
// get viewport size
getViewportSize = function() {
return {
height: window.innerHeight,
width: window.innerWidth
};
};
// update canvas size
updateSizes = function() {
var viewportSize = getViewportSize();
$('#myCanvas').width(viewportSize.width).height(viewportSize.height);
$('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
};
// run on load
updateSizes();
// handle window resizing
$(window).on('resize', function() {
updateSizes();
});
}());
基本上你要做的是将onresize事件绑定到你的body,一旦你捕捉到事件,你只需要使用window调整画布的大小。innerWidth和window.innerHeight。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Canvas Resize</title>
<script type="text/javascript">
function resize_canvas(){
canvas = document.getElementById("canvas");
if (canvas.width < window.innerWidth)
{
canvas.width = window.innerWidth;
}
if (canvas.height < window.innerHeight)
{
canvas.height = window.innerHeight;
}
}
</script>
</head>
<body onresize="resize_canvas()">
<canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>