HTML5 Canvas_html5 チュートリアル スキルで楕円を描画するためのいくつかの方法のまとめ
HTML5 の Canvas は、楕円を描画するためのメソッドを直接提供しません。以下にいくつかの描画メソッドをまとめます。それぞれの方法には利点と欠点があるため、状況に応じて選択する必要があります。各メソッドのパラメータは同じです:
context は Canvas の 2D 描画環境オブジェクト、
x は楕円の中心の横座標、
y は楕円の中心の縦座標、
aは楕円の横半軸の長さ、
b は楕円の縦半軸の長さです。
パラメトリック方程式メソッド
このメソッドは、楕円のパラメトリック方程式を使用して楕円を描画します
//----------パラメトリック方程式を使用して楕円を描画します---------- ------ -----
//関数のパラメータ x と y は楕円の中心であり、a、b は楕円の横半軸と縦半軸の長さです。
//この方法の欠点は、linWidth が広くなり、楕円が平らになることです。
//楕円の内側の長軸の端は鋭くなりますが、そうではありません。滑らかで効率は低い
function ParamEllipse(context, x, y, a, b)
{
//max は、主軸の値 a と大きい方で割った 1 に等しいb
//i はループごとに 1/max ずつ増加し、度の増加を示します
//これは機能します 各サイクルで描画されるパス (円弧) を 1 ピクセルに近づけます
var step = (a > ; b) ? 1 / a : 1 / b;
context.beginPath();
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.ストローク();
};
この方法は、数学における均一圧縮の原理を使用します。理論的には、次のコードにより線幅が不一致になる問題が発生します。解決策については、5 を参照してください。
//水平軸または垂直軸方向にスケールします (均一圧縮)
//この方法で描画される楕円の端は、長軸の端に近づくほど太くなります、長軸の端の線の幅は通常の値です
//側面短軸に近づくほど、楕円は平らで薄くなり、スケールの結果である不連続性も生じます
//リング(惑星ハロー)の立体感を表現する場合など、この欠点が利点となる場合もあります
//パラメータaまたはbが0の場合、この方法は適用できません
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
// a と b の大きい方を円弧メソッドの半径パラメータとして選択します
var r = (a > b) ? a : b;
var rateX = a / r; //横軸スケーリング比
var rateY = b / r; context.scale(ratioX, rateY); // スケーリング (均一圧縮)
context.beginPath();
// 楕円の左端から反時計回りに描画
context.moveTo((x a) / 比率 X, y / 比率 Y);
context.arc(x / 比率 X, y / 比率 Y, r, 0, 2 * Math.PI);
context.closePath(); );
context.restore();
};
3 次ベジェ曲線描画楕円は実際には近似ですこれは理論上の近似値でもあります。 ただし、効率が高いため、コンピュータのベクター グラフィックスで楕円を描画するのによく使用されますが、具体的な理論についてはよくわかりません。 近似の程度は、2 つの制御点の位置の選択によって決まります。この方法の制御点の位置は私自身の実験によって得られたものであり、精度は問題ありません。
コードをコピー
の 2 つの制御点の設定です//0.5 と 0.6 は 2 つの重要な係数です (この関数の実験から得られます) )
var ox = 0.5 * a,
oy = 0.6 * b;
context.translate(x, y);
//楕円の垂直方向から、軸の下端が反時計回りに描画されます。
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, -a, 0); >context.bezierCurveTo(-a, oy, - ox, b, 0, b);
context.stop();
context.restore();
3 次ベジェ曲線メソッド 2
このメソッドは、StackOverFlow での返信から投稿に変更されました。精度が高く、楕円を描画するためによく使用されるメソッドでもあります。 >
//、長軸の端は鋭く、滑らかではありません
//この方法は前のベジェ法よりも正確ですが、効率がわずかに劣ります
関数 BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // 水平制御点オフセット
oy = b * k; // 垂直制御点オフセット Quantity
ctx.beginPath( );
//楕円の左端から時計回りに 4 つの 3 次ベジェ曲線を描画します
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); oy, x ox, y b, x, y b);
ctx.bezierCurveTo(x - ox, y b, x - a, y oy, x - a, y); >ctx.ストローク();
};
ラスターメソッド
このメソッドは、グラフィックスの基本的なアルゴリズムを使用してピクセルを操作します。楕円。 例えば、中点楕円描画アルゴリズムなど。
デモ ラスター手法に加えて楕円関数を描画するいくつかのデモを以下に示します。デモ コードは次のとおりです。
コードをコピーします。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7618
15
1389
52
89
11
31
136
キャンバスを使用している学校はどこですか?
Aug 18, 2023 pm 05:59 PM
Canvas を使用している学校には、スタンフォード大学、MIT、コロンビア大学、カリフォルニア大学バークレー校などが含まれます。詳細な紹介: 1. スタンフォード大学は、主要なオンライン学習プラットフォームとして Canvas を使用しています。スタンフォード大学の教師と学生は、Canvas を使用してコースの内容を管理および伝達し、オンライン ディスカッション、課題の提出、試験などの機能を通じて学習します。2. マ州Polytechnic Institute と MIT もオンライン学習管理システムとして Canvas を使用しており、Canvas プラットフォームを通じてコース管理を行っています。3. コロンビア大学など。
キャンバス矢印プラグインとは何ですか?
Aug 21, 2023 pm 02:14 PM
キャンバス矢印プラグインには、1. シンプルで使いやすい API を備え、カスタムの矢印効果を作成できる Fabric.js、2. 矢印を描画する機能を提供し、さまざまな矢印を作成できる Konva.js が含まれます。スタイル; 3. 豊富なグラフィックス処理機能を提供し、さまざまな矢印効果を実現できる Pixi.js; 4. 矢印のスタイルやアニメーションを簡単に作成および制御できる Two.js; 5. さまざまな矢印効果を作成できる Arrow.js ; 6. 大まかな.jsでは、手描きの矢印などが作成できます。
キャンバスクロックの詳細は何ですか？
Aug 21, 2023 pm 05:07 PM
キャンバス時計の詳細には、時計の外観、目盛り、デジタル時計、時針、分針、秒針、中心点、アニメーション効果、その他のスタイルなどが含まれます。詳細な紹介: 1. 時計の外観、キャンバスを使用して時計の外観として円形の文字盤を描画し、文字盤のサイズ、色、境界線などのスタイルを設定できます; 2. 目盛り線、目盛り線を描画します。位置; 3. デジタル時計、現在の時と分を示すために文字盤にデジタル時計を描くことができます; 4. 時針、分針、秒針など。
html2canvas にはどのようなバージョンがありますか?
Aug 22, 2023 pm 05:58 PM
html2canvas のバージョンには、html2canvas v0.x、html2canvas v1.x などが含まれます。詳細な紹介: 1. html2canvas v0.x (html2canvas の初期バージョン) 最新の安定バージョンは v0.5.0-alpha1 です。これは、多くのプロジェクトで広く使用され、検証されている成熟したバージョンです。2. html2canvas v1.x、これは html2canvas の新しいバージョンです。
キャンバス フレームワークを学び、一般的に使用されるキャンバス フレームワークについて詳しく説明します
Jan 17, 2024 am 11:03 AM
Canvas フレームワークを探索する: 一般的に使用される Canvas フレームワークを理解するには、特定のコード例が必要です。 はじめに: Canvas は HTML5 で提供される描画 API であり、これを通じて豊富なグラフィックスやアニメーション効果を実現できます。描画の効率と利便性を向上させるために、多くの開発者がさまざまな Canvas フレームワークを開発しました。この記事では、一般的に使用される Canvas フレームワークをいくつか紹介し、読者がこれらのフレームワークの使用方法をより深く理解できるように、具体的なコード例を示します。 1.EaselJSフレームワークEa
uniapp は、キャンバスを使用してチャートやアニメーション効果を描画する方法を実装します。
Oct 18, 2023 am 10:42 AM
キャンバスを使用して uniapp でチャートやアニメーション効果を描画する方法には、特定のコード例が必要です。 1. はじめに モバイル デバイスの普及に伴い、モバイル端末上でさまざまなチャートやアニメーション効果を表示する必要があるアプリケーションがますます増えています。 uniapp は、Vue.js に基づくクロスプラットフォーム開発フレームワークとして、キャンバスを使用してチャートやアニメーション効果を描画する機能を提供します。この記事では、uniapp がキャンバスを使用してチャートやアニメーション効果を実現する方法を紹介し、具体的なコード例を示します。 2.キャンバス
tkinter Canvas にはどのようなプロパティがありますか?
Aug 21, 2023 pm 05:46 PM
tkinter Canvas 属性には、bg、bd、relief、width、height、cursor、highlightbackground、highlightcolor、highlightthickness、insertbackground、insertwidth、selectbackground、selectforeground、xscrollcommand 属性などが含まれます。詳しい紹介
ゲーム開発におけるキャンバスの強力な役割と応用を探る
Jan 17, 2024 am 11:00 AM
ゲーム開発におけるキャンバスの力と応用を理解する 概要: インターネット技術の急速な発展に伴い、Web ゲームはプレイヤーの間でますます人気が高まっています。 Web ゲーム開発の重要な部分として、キャンバス テクノロジーがゲーム開発に徐々に登場し、その強力なパワーと応用性を示しています。この記事では、ゲーム開発におけるキャンバスの可能性を紹介し、具体的なコード例を通じてその応用例を示します。 1. Canvas テクノロジの概要 Canvas は HTML5 の新しい要素で、これにより次のことが可能になります。
