HTML5 Canvas实战
4.8 把圆变换为椭圆
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

平移画布上下文

旋转画布上下文

缩放画布上下文

创建镜像变换

创建自定义变换

切割画布上下文

使用栈处理多个变换

把圆变换为椭圆

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

圆变换为椭圆
图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标签:

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

工作原理

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

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

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

相关参考

  • 第5章 摆动的气泡

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验