23-动态调整画布尺寸

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

3.5.1　动态调整画布尺寸

在本章开发的代码中，创建了对HTML页面上Canvas对象的引用（id为canvasOne）并使用其获得Canvas对象的2D环境。

var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");

尽管2D环境非常重要（这里需要用它在画布上绘图）但是本书没有讨论Canvas对象本身。本章使用Canvas对象的width属性在画布上使文本居中。同时，Canvas对象也有名为height的属性，这两个属性可以用来动态地调整Canvas对象的尺寸（按照实际需要）。在类似以下情况中，会使用到此方法。

将画布更新到加载的video对象的实际尺寸。
页面加载后，动态更新动画画布。
其他更具创意的应用，比如本章接下来将要尝试的应用。

调整画布尺寸非常容易，只需设置Canvas对象的width和height属性，然后重绘画布内容即可。

Canvas.width = 600;
Canvas.height = 500;
drawScreen();

Canvas 2D API将这个功能描述为“缩放”画布，但实际上并不是这样的，而是画布内容在同样尺寸和同样位置简单地重绘到更大的画布中。而且，如果没有重绘画布内容，它看起来是无效的，那么画布将清空回到空白状态。要正确缩放画布，应使用CSS的width和height属性，如后面将要描述的那样。在第2章和第4章，对使用矩阵变换缩放画布都有讨论。

本节将添加随意调整画布尺寸的功能，并给出一个好的示例来说明如何调整画布的大小，以及如何调整已经绘制的内容。

首先，为HTML

添加两个新的range控件。可能读者已经猜到，笔者真的很喜欢这个新的HTML5的range控件，因此才会不断地尝试，从而找到它尽可能多的应用——尽管它与HTML5 Canvas无关。

将控件的id设置为canvasWidth和canvasHeight。

Canvas Width:
<input type="range" id="canvasWidth"
　　 　 min="0"
　　　  max="1000"
　　 　 step="1"
　　 　 value="500"/>
 <br>
　Canvas Height:
　<input type="range" id="canvasHeight"
　　 　 min="0"
　　 　 max="1000"
　　 　 step="1"
　　 　 value="300"/>
 <br>

接下来，为canvasApp() 函数中的新表单元素添加事件监听器。

formElement = document.getElementById("canvasWidth");
formElement.addEventListener('change', canvasWidthChanged, false);
formElement = document.getElementById("canvasHeight");
formElement.addEventListener('change', canvasHeightChanged, false);

最后，添加事件处理器。请注意，程序就在这些函数中设置了Canvas（代表屏幕上Canvas对象的变量）的width和height属性。然后，还需要确认在每个函数中都调用了drawScreen() ，以使画布能够在新调整尺寸的区域中重绘。如果不这样做，页面上的画布就会清空回到空白状态。

function canvasWidthChanged(e) {
　　　var target = e.target;
　　　theCanvas.width = target.value;
　　　drawScreen();
　 }
function canvasHeightChanged(e) {
　　　var target = e.target;
　　　theCanvas.height = target.value;
　　　drawScreen();
　 }

还需要在drawScreen() 函数中改变绘制应用程序背景的方式，这样就可以支持重新调整尺寸的画布。通过使用theCanvas的width和height属性可以创建背景和边框。

context.fillStyle = '#ffffaa';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//边框
context.strokeStyle = '#000000';
context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);

Previous 上一篇本节目录 Next 下一篇

23-动态调整画布尺寸

3.5.1 动态调整画布尺寸

3.5.1　动态调整画布尺寸