调整 HTML5 画布大小以适应窗口
如何自动缩放 HTML5 <canvas> 元素以适应页面？
例如，我可以通过将 height 和 width 属性设置为 100% 来缩放 <div>，但 <canvas> 不会缩放，对吗？
我相信我已经找到了一个优雅的解决方案：
JavaScript
/* important! for alignment, you should make things
* relative to the canvas' current width/height.
*/
function draw() {
var ctx = (a canvas context);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//...drawing code...
}
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
}
到目前为止，对我没有任何重大的负面性能影响。
以下解决方案最适合我。由于我对编码比较陌生，因此我喜欢通过视觉确认某些东西正在按我期望的方式工作。我在以下网站找到它：http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/
这是代码：
(function() { var // 使用其 id 获取对 canvas 元素的引用 htmlCanvas = document.getElementById('c'), // 获取 canvas 元素上用于绘图的图形上下文 context = htmlCanvas.getContext(' 2d'); // 开始监听resize事件并绘制canvas.initialize(); function initialize() { //注册一个事件监听器调用resizeCanvas()函数 //每次窗口resize时 window.addEventListener( 'resize', resizeCanvas, false); // 第一次绘制画布边框。resizeCanvas(); } // 显示自定义画布。在这种情况下，它是一个蓝色，5 像素 // 边框随着浏览器窗口调整大小。 function redraw() { context.strokeStyle = 'blue'; context.lineWidth = '5'; context.strokeRect(0, 0, window.innerWidth, window.innerHeight); } // 每次 DOM 窗口调整大小事件触发时运行. // 重置画布尺寸以匹配窗口， // 然后相应地绘制新边框 function resizeCanvas() { htmlCanvas.width = window.innerWidth; html Canvas.height = window.innerHeight;重绘（）； } })(); html，正文 { 宽度：100%;高度：100%；边距：0px；边框：0；溢出：隐藏； /* 禁用滚动条 */ display: block; /* 两侧没有浮动内容 */ }
蓝色边框向您显示调整大小画布的边缘，并且始终沿着窗口的边缘，在所有 4 个面上都可见，而上述其他一些答案并非如此。希望能帮助到你。
overflow: hidden 和 display: block 是让我正常工作所缺少的。
基本上你要做的就是将 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>
根据浏览器客户端的尺寸设置画布坐标空间的宽度和高度要求您在调整浏览器大小时调整大小并重绘。
一个不那么复杂的解决方案是在 Javascript 变量中维护可绘制尺寸，但根据 screen.width、screen.height 尺寸设置画布尺寸。使用 CSS 来适应：
#containingDiv {
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
浏览器窗口通常不会比屏幕本身大（除非屏幕分辨率被误报，因为它可能是不匹配的双显示器），所以背景不会显示，像素比例不会改变。除非您使用 CSS 来缩放画布，否则画布像素将与屏幕分辨率成正比。
添加到上述@jerseyboy 解决方案的纯CSS 方法。适用于 Firefox（在 v29 中测试）、Chrome（在 v34 中测试）和 Internet Explorer（在 v11 中测试）。
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
canvas {
background-color: #ccc;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
</script>
</body>
</html>
示例链接：http://temporaer.net/open/so/140502_canvas-fit-to-window.html
但要小心，正如@jerseyboy 在他的评论中所说：
用 CSS 重新缩放画布很麻烦。至少在 Chrome 和 Safari 上，鼠标/触摸事件位置不会与画布像素位置 1:1 对应，您必须转换坐标系。
function resize() {
var canvas = document.getElementById('game');
var canvasRatio = canvas.height / canvas.width;
var windowRatio = window.innerHeight / window.innerWidth;
var width;
var height;
if (windowRatio < canvasRatio) {
height = window.innerHeight;
width = height / canvasRatio;
} else {
width = window.innerWidth;
height = width * canvasRatio;
}
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
};
window.addEventListener('resize', resize, false);
设置初始大小。
const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
调整窗口大小时更新大小。
function windowResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
window.addEventListener('resize', windowResize);
如果您的 div 完全填满了网页，那么您可以填满该 div，这样就有一个可以填满 div 的画布。
您可能会觉得这很有趣，因为您可能需要使用 CSS 来使用百分比，但这取决于您使用的浏览器，以及它与规范的一致性程度：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
画布元素的内在尺寸等于坐标空间的大小，数字以 CSS 像素解释。但是，可以通过样式表任意调整元素的大小。在渲染过程中，图像被缩放以适应此布局大小。
您可能需要获取 div 的 offsetWidth 和高度，或者获取窗口高度/宽度并将其设置为像素值。
CSS
body { margin: 0; }
canvas { display: block; }
JavaScript
window.addEventListener("load", function()
{
var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
var context = canvas.getContext('2d');
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height);
context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height);
context.stroke();
}
function resize()
{
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
draw();
}
window.addEventListener("resize", resize);
resize();
});
如果您有兴趣保留纵横比并在纯 CSS 中这样做（给定纵横比），您可以执行以下操作。键是 ::content 元素上的 padding-bottom，用于调整 container 元素的大小。这是相对于其父级宽度的大小，默认情况下为 100%。此处指定的比率必须与 canvas 元素上的大小比率相匹配。
// Javascript var canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); context.fillStyle = '#ff0000'; context.fillRect(500, 200, 200, 200); context.fillStyle = '#000000'; context.font = '30px 衬线'; context.fillText('这是一些不应该被扭曲的文本，只是缩放', 10, 40); /*CSS*/ .container { 位置：相对；背景颜色：绿色； } .container::after { 内容：' ';显示：块；填充：0 0 50%； } .wrapper { 位置：绝对；顶部：0；右：0；左：0；底部：0； } 画布 { 宽度：100%;高度：100%； }
使用 jQuery，您也可以使用 jQuery 跟踪窗口大小并更改画布的宽度。
类似的东西
$( window ).resize(function() { $("#myCanvas").width($( window ).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();
});
}());
这是一个小而完整的代码片段，它结合了所有答案。按：“运行代码片段”，然后按“整页”并调整窗口大小以查看它的运行情况：
函数刷新（referenceWidth，referenceHeight，drawFunction）{ const myCanvas = document.getElementById("myCanvas"); myCanvas.width = myCanvas.clientWidth; myCanvas.height = myCanvas.clientHeight; const ratio = Math.min( myCanvas.width / referenceWidth, myCanvas.height / referenceHeight ); const ctx = myCanvas.getContext("2d"); ctx.scale（比率，比率）； drawFunction(ctx, ratio); window.requestAnimationFrame(() => { refresh(referenceWidth, referenceHeight, drawFunction); }); } //100, 100 是“参考”大小。选择任何你想要的。 refresh(100, 100, (ctx, ratio) => { //自定义绘制代码！这里随便画。 const referenceLineWidth = 1; ctx.lineWidth = referenceLineWidth / ratio; ctx.beginPath(); ctx.strokeStyle = "蓝色"; ctx.arc(50, 50, 49, 0, 2 * Math.PI); ctx.stroke(); }); div {宽度：90vw；高度：90vh； } 画布 { 宽度：100%;高度：100%；适合对象：包含； }
此代码片段使用 canvas.clientWidth 和 canvas.clientHeight 而不是 window.innerWidth 和 window.innerHeight 使代码片段在复杂布局中正确运行。但是，如果您只是将它放在使用全窗口的 div 中，它也适用于全窗口。这种方式更灵活。
该片段使用新的 window.requestAnimationFrame 来重复调整画布每一帧的大小。如果您不能使用它，请改用 setTimeout。而且，这是低效的。为了提高效率，存储 clientWidth 和 clientHeight 并且仅在 clientWidth 和 clientHeight 发生变化时重新计算和重绘。
“参考”分辨率的概念使您可以使用一种分辨率编写所有绘图命令......并且它会自动调整到客户端大小，而无需更改绘图代码。
该片段是不言自明的，但如果您更喜欢用英文解释：https://medium.com/@doomgoober/resizing-canvas-vector-graphics-without-aliasing-7a1f9e684e4d
我认为这正是我们应该做的：http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/
function resizeGame() {
var gameArea = document.getElementById('gameArea');
var widthToHeight = 4 / 3;
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
var newWidthToHeight = newWidth / newHeight;
if (newWidthToHeight > widthToHeight) {
newWidth = newHeight * widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
} else {
newHeight = newWidth / widthToHeight;
gameArea.style.width = newWidth + 'px';
gameArea.style.height = newHeight + 'px';
}
gameArea.style.marginTop = (-newHeight / 2) + 'px';
gameArea.style.marginLeft = (-newWidth / 2) + 'px';
var gameCanvas = document.getElementById('gameCanvas');
gameCanvas.width = newWidth;
gameCanvas.height = newHeight;
}
window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);
这对我有用。伪代码：
// screen width and height
scr = {w:document.documentElement.clientWidth,h:document.documentElement.clientHeight}
canvas.width = scr.w
canvas.height = scr.h
此外，就像 devyn 所说，您可以将“document.documentElement.client”替换为“inner”的宽度和高度：
**document.documentElement.client**Width
**inner**Width
**document.documentElement.client**Height
**inner**Height
它仍然有效。
我使用的是sketch.js，所以在为画布运行init命令后，我用jquery更改了宽度和高度。它基于父元素的尺寸。
$('#DrawCanvas').sketch().attr('height',$('#DrawCanvas').parent().height()).attr('width',$('#DrawCanvas').parent （）。宽度（））;
关注公众号
不定期副业成功案例分享
body, html { margin: 0px;}禁用边距