html椭圆的写法,4.8 把圆变换为椭圆 - HTML5 Canvas 实战

缩放最常用的应用之一，就是在水平方向或垂直方向拉伸一个圆，把它变成椭圆。本节，我们将通过平移和横向上拉伸画布上下文，再绘制圆，来创建一个椭圆。

图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章 摆动的气泡