将画布放大到父宽度和高度答案

【问题标题】：enlarging canvas to parent width and height将画布放大到父宽度和高度
【发布时间】：2011-11-03 13:19:30
【问题描述】：

我正在尝试使用 Javascript 在 HTML5 画布上绘制一些形状。

当画布的宽度和高度是硬编码大小时，例如 800x600，一切正常。

我想做的是拉伸画布的宽度以适应父级（父级的大小可以是任何东西）。当我在 CSS 中应用 width: 100% 和 height: 100% 属性时，绘制的形状从与其实际应有的不同起点开始。

此链接中提供了我正在处理的示例： http://jsfiddle.net/jR4ne/

请帮助我了解这里出了什么问题。画布似乎被拉伸而不是被放大。我希望将画布放大以适合父级。

【问题讨论】：

【解决方案1】：

对于您的情况，您不应该使用 CSS 来更改大小。您必须为画布指定宽度和高度（以像素为单位）。您可以将以下代码添加到您的 JS () 中，它将满足您的要求：

canvasNode.width = document.body.scrollWidth;
canvasNode.height = document.body.scrollHeight;

当然，你的父母可能指的是不同的东西，你需要相应地改变宽度和高度。更多信息请参考这里：http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

【讨论】：

【解决方案2】：

在将画布调整为 100% 宽度之前，画布似乎初始化得太早了：绘制的矩形也以拉伸模式呈现。我建议将初始化代码放入 onload 函数中，例如

<body onload="setupCanvas()">

或使用 jQuery：

$( function() { setupCanvas(); } );

我还建议从 HTML 中删除宽度/高度属性（不确定它们是否只是暂时存在，因为 css 宽度 100% 不起作用？）

【讨论】：