Question

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

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

我想要做的是拉伸画布的宽度以适合父级（父级的大小可以是任何东西）。当我在CSS中应用宽度：100％和高度：100％属性时，绘制的形状从实际应该的起点开始。

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

请帮助我理解这里出了什么问题。看起来画布正在被拉伸而不是被放大。我希望画布能够放大以适应父母。

Answer 1

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

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

当然，你的父母可能会提到不同的东西，你需要相应地改变宽度和高度。有关详细信息，请参阅此处：http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Answer 2

在将画布调整为100％宽度之前，看起来画布的初始化过早：绘制的矩形也以拉伸模式渲染。我建议将初始化代码放入onload函数，例如

<body onload="setupCanvas()">

或使用jQuery：

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

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