html椭圆的写法,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标签：

工作原理

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

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

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

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

过椭圆外一点引两条切线方程_椭圆的一些结论汇总
1. 布利安桑定理:椭圆外切六边形的对角线连线共点. 2. 帕斯卡定理:椭圆内接六边形三对边的交点共线. 3. 割线定理:从椭圆外一点向椭圆引两条割线,交于四点,对角线交点为Q, 的连线与椭圆交于 ...
R语言ggplot2可视化：ggplot2可视化散点图并使用geom_mark_ellipse函数在数据簇或数据分组的数据点周围添加椭圆（ellipse）进行注释（对椭圆包围的区域进行着色为阴影区域）
R语言ggplot2可视化:ggplot2可视化散点图并使用geom_mark_ellipse函数在数据簇或数据分组的数据点周围添加椭圆(ellipse)进行注释(对椭圆包围的区域进行着色为阴影区域) ...
html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆发布时间:2021-07-08 16:32:10 来源:亿速云阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
html如何画出四个圆圈,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
画椭圆 - HTML5 Canvas 作图
8.function DrawEllipse(Canvas,O,OA,OB) 功能:画椭圆参数:O:椭圆中心的坐标: OA,OB:长轴.短轴的长度源代码: function DrawEllipse ...
html5 arc 椭圆,html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟. 我们首先要明确画一个椭圆需要那些参数,基本的几 ...
python椭圆代码_Python实现霍夫圆和椭圆变换代码详解
这篇文章主要介绍了Python实现霍夫圆和椭圆变换代码详解,具有一定借鉴价值,需要的朋友可以参考下在极坐标中,圆的表示方式为: x=x0 rcosθ y=y0 rsinθ 圆心为(x0,y0),r为 ...
python椭圆面积_利用matplotlib实现2个椭圆的重叠区域
你不能用matplotlib来计算交集的面积(至少据我所知不是这样),但是你可以用shapely来计算,然后用matplotlib将结果可视化.下面是一个快速演示:from matplotlib im ...

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

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

最新文章

热门文章