在HTML5的CANVAS上绘制椭圆的几种方法
html5
HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结。各种方法各有优缺,视情况选用。各方法的参数相同:
参数方程法
该方法利用椭圆的参数方程来绘制椭圆
复制代码
均匀压缩法
这种方法利用了数学中的均匀压缩原理将圆进行均匀压缩为椭圆,理论上为能够得到标准的椭圆.
复制代码
下面的代码会出现线宽不一致的问题,解决办法:
均匀压缩法中把
context.stroke(); context.restore();
改為
context.restore(); context.stroke();
就可以
三次贝塞尔曲线法一
三次贝塞尔曲线绘制椭圆在实际绘制时是一种近似,在理论上也是一种近似。 但因为其效率较高,在计算机矢量图形学中,常用于绘制椭圆,但是具体的理论我不是很清楚。 近似程度在于两个控制点位置的选取。这种方法的控制点位置是我自己试验得出,精度还可以.
复制代码
三次贝塞尔曲线法二
这种方法是从StackOverFlow中一个帖子的回复中改变而来,精度较高,也是通常用来绘制椭圆的方法.
复制代码
光栅法
这种方法可以根据Canvas能够操作像素的特点,利用图形学中的基本算法来绘制椭圆。 例如中点画椭圆算法等。
其中一个例子是园友“豆豆狗”的一篇博文“HTML5 Canvas 提高班(一) —— 光栅图形学(1)中点画圆算法”。这种方法由于比较“原始”,灵活性大,效率高,精度高,但要想实现一个有使用价值的绘制椭圆的函数,比较复杂。比如,要当线宽改变时,算法就复杂一些。
原文出自:Cloudy Waterman
- context为Canvas的2D绘图环境对象,
- x为椭圆中心横坐标,
- y为椭圆中心纵坐标,
- a为椭圆横半轴长,
-
b为椭圆纵半轴长。
参数方程法
该方法利用椭圆的参数方程来绘制椭圆
- //-----------用参数方程绘制椭圆---------------------
- //函数的参数x,y为椭圆中心;a,b分别为椭圆横半轴、
- //纵半轴长度,不可同时为0
- //该方法的缺点是,当linWidth较宽,椭圆较扁时
- //椭圆内部长轴端较为尖锐,不平滑,效率较低
- function ParamEllipse(context, x, y, a, b)
- {
- //max是等于1除以长轴值a和b中的较大者
- //i每次循环增加1/max,表示度数的增加
- //这样可以使得每次循环所绘制的路径(弧线)接近1像素
- var step = (a > b) ? 1 / a : 1 / b;
- context.beginPath();
- context.moveTo(x + a, y); //从椭圆的左端点开始绘制
- for (var i = 0; i
- {
- //参数方程为x = a * cos(i), y = b * sin(i),
- //参数为i,表示度数(弧度)
- context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
- }
- context.closePath();
- context.stroke();
- };
均匀压缩法
这种方法利用了数学中的均匀压缩原理将圆进行均匀压缩为椭圆,理论上为能够得到标准的椭圆.
- //------------均匀压缩法绘制椭圆--------------------
- //其方法是用arc方法绘制圆,结合scale进行
- //横轴或纵轴方向缩放(均匀压缩)
- //这种方法绘制的椭圆的边离长轴端越近越粗,长轴端点的线宽是正常值
- //边离短轴越近、椭圆越扁越细,甚至产生间断,这是scale导致的结果
- //这种缺点某些时候是优点,比如在表现环的立体效果(行星光环)时
- //对于参数a或b为0的情况,这种方法不适用
- function EvenCompEllipse(context, x, y, a, b)
- {
- context.save();
- //选择a、b中的较大者作为arc方法的半径参数
- var r = (a > b) ? a : b;
- var ratioX = a / r; //横轴缩放比率
- var ratioY = b / r; //纵轴缩放比率
- context.scale(ratioX, ratioY); //进行缩放(均匀压缩)
- context.beginPath();
- //从椭圆的左端点开始逆时针绘制
- context.moveTo((x + a) / ratioX, y / ratioY);
- context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
- context.closePath();
- context.stroke();
- context.restore();
- };
下面的代码会出现线宽不一致的问题,解决办法:
均匀压缩法中把
context.stroke(); context.restore();
改為
context.restore(); context.stroke();
就可以
三次贝塞尔曲线法一
三次贝塞尔曲线绘制椭圆在实际绘制时是一种近似,在理论上也是一种近似。 但因为其效率较高,在计算机矢量图形学中,常用于绘制椭圆,但是具体的理论我不是很清楚。 近似程度在于两个控制点位置的选取。这种方法的控制点位置是我自己试验得出,精度还可以.
- //---------使用三次贝塞尔曲线模拟椭圆1---------------------
- //此方法也会产生当lineWidth较宽,椭圆较扁时,
- //长轴端较尖锐,不平滑的现象
- function BezierEllipse1(context, x, y, a, b)
- {
- //关键是bezierCurveTo中两个控制点的设置
- //0.5和0.6是两个关键系数(在本函数中为试验而得)
- var ox = 0.5 * a,
- oy = 0.6 * b;
-
- context.save();
- context.translate(x, y);
- context.beginPath();
- //从椭圆纵轴下端开始逆时针方向绘制
- context.moveTo(0, b);
- context.bezierCurveTo(ox, b, a, oy, a, 0);
- context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
- context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
- context.bezierCurveTo(-a, oy, -ox, b, 0, b);
- context.closePath();
- context.stroke();
- context.restore();
-
- };
三次贝塞尔曲线法二
这种方法是从StackOverFlow中一个帖子的回复中改变而来,精度较高,也是通常用来绘制椭圆的方法.
- //---------使用三次贝塞尔曲线模拟椭圆2---------------------
- //此方法也会产生当lineWidth较宽,椭圆较扁时
- //,长轴端较尖锐,不平滑的现象
- //这种方法比前一个贝塞尔方法精确度高,但效率稍差
- function BezierEllipse2(ctx, x, y, a, b)
- {
- var k = .5522848,
- ox = a * k, // 水平控制点偏移量
- oy = b * k; // 垂直控制点偏移量
-
- ctx.beginPath();
- //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
- ctx.moveTo(x - a, y);
- ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
- ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
- ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
- ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
- ctx.closePath();
- ctx.stroke();
- };
光栅法
这种方法可以根据Canvas能够操作像素的特点,利用图形学中的基本算法来绘制椭圆。 例如中点画椭圆算法等。
其中一个例子是园友“豆豆狗”的一篇博文“HTML5 Canvas 提高班(一) —— 光栅图形学(1)中点画圆算法”。这种方法由于比较“原始”,灵活性大,效率高,精度高,但要想实现一个有使用价值的绘制椭圆的函数,比较复杂。比如,要当线宽改变时,算法就复杂一些。
原文出自:Cloudy Waterman
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事
レポ:チームメイトを復活させる方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
2週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
4週間前
By DDD
R.E.P.O.ファイルの保存場所:それはどこにあり、それを保護する方法は?
4週間前
By DDD

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7367
15


Java チュートリアル
1628
14


CakePHP チュートリアル
1354
52


Laravel チュートリアル
1266
25


PHP チュートリアル
1214
29



HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
