24-动态缩放画布

3.5.2　动态缩放画布

除了可以使用theCanvas.width和theCanvas.height属性调整画布尺寸外，还可以使用CSS样式来进行缩放。与调整尺寸不同，缩放需要对当前画布的位图区域重新采样，并使其适合新指定的CSS样式的width和height属性。例如，将画布缩放到400×400，可以使用如下CSS样式。

style = "width: 400px; height:400px"

为更新Text Arranger中画布的style.width和style.height属性，可在HTML页面上另外创建两个range控件。

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

接下来，为每个range控件设置事件处理器。这次为二者使用相同的处理器——canvas StyleSizeChanged()。

formElement = document.getElementById("canvasStyleWidth");
formElement.addEventListener("change", canvasStyleSizeChanged, false);
formElement = document.getElementById("canvasStyleHeight");
formElement.addEventListener("change", canvasStyleSizeChanged, false);

在事件处理器中，使用document.getElementById() 方法来获得所有range控件的数值。然后创建一个字符串，代表为画布设置的样式。

"width:" + styleWidth.value + "px; height:" + styleHeight.value +"px;";

最后，使用setAttribute() 方法来设置“样式”。

function canvasStyleSizeChanged(e) {
　　var styleWidth = document.getElementById("canvasStyleWidth");
　　var styleHeight = document.getElementById("canvasStyleHeight");
　　var styleValue = "width:" + styleWidth.value + "px; height:" +
　　　　styleHeight.value +"px;";
　　theCanvas.setAttribute("style", styleValue );
　　drawScreen();
}

提示

尝试改变theCanvas.width和theCanvas.height属性值的时候，如果要同时改变CSS缩放，会发生一些奇怪的现象：使用CSS缩放时，width和height属性会将画布更新为新的尺寸，但却不是用户所希望得到的效果。读者可以通过Text Arranger 3.0测试观察这些不同的样式和属性是如何交互的。