4.8 把圆变换为椭圆

优质

小牛编辑

126浏览

2023-12-01

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

按照以下步骤，绘制一个椭圆：

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标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

要使用HTML5的画布API绘制椭圆，我们可以简单地调用translate()方法，把上下文平移到想要的位置，调用scale()方法在垂直方向或水平方向上拉伸上下文，然后绘制该圆。本节，我们通过横向拉伸画布上下文，来创建一个椭圆，该椭圆的宽度是高度2倍。

如果要为椭圆应用描边样式，我们使用save-restore组合来包裹创建椭圆的变换操作，以便它们不会影响后面椭圆的样式。

如果你亲自试验本节的例子，并删除save() 和 restore()方法，你将发现椭圆的顶部和底部的线宽是5px，而椭圆两侧的线宽是10px，这是因为在水平方向上，描边样式也跟圆一起被拉伸了。