缩放最常用的应用之一,就是在水平方向或垂直方向拉伸一个圆,把它变成椭圆。本节,我们将通过平移和横向上拉伸画布上下文,再绘制圆,来创建一个椭圆。
图4-10 圆变换为椭圆
绘制步骤
按照以下步骤,绘制一个椭圆:
1. 定义画布上下文:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
2. 把当前变换状态,即默认状态,压入栈顶:
context.save(); //保存状态
3. 定义圆的尺寸:
var centerX = 0;
var centerY = 0;
var radius = 50;
4. 把画布上下文平移到画布的中央,然后缩放上下文的宽度,使之向外拉伸:
context.translate(canvas.width / 2, canvas.height / 2); context.scale(2, 1);
5. 绘制该圆:
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
6. 恢复到前一状态,即默认状态,也就是将当前状态弹栈:
context.restore(); // 恢复初始状态
7. 为椭圆应用样式:
context.fillStyle = "#8ED6FF"; context.fill();
context.lineWidth = 5;
context.strokeStyle = "black"; context.stroke();
};
8. 在HTML文档的body部分嵌入canvas标签:
工作原理
要使用HTML5的画布API绘制椭圆,我们可以简单地调用translate()方法,把上下文平移到想要的位置,调用scale()方法在垂直方向或水平方向上拉伸上下文,然后绘制该圆。本节,我们通过横向拉伸画布上下文,来创建一个椭圆,该椭圆的宽度是高度2倍。
如果要为椭圆应用描边样式,我们使用save-restore组合来包裹创建椭圆的变换操作,以便它们不会影响后面椭圆的样式。
如果你亲自试验本节的例子,并删除save() 和 restore()方法,你将发现椭圆的顶部和底部的线宽是5px,而椭圆两侧的线宽是10px,这是因为在水平方向上,描边样式也跟圆一起被拉伸了。
相关参考
第5章 摆动的气泡