[データ可視化] データ可視化キャンバス

1. キャンバスを理解する

◼Canvas とは
---- Canvas は、もともと 2004 年に Apple によって Mac OS X WebKit コンポーネント用に導入され、ダッシュボード ウィジェットや Safari ブラウザなどのアプリケーションのサポートを提供しました。その後、Gecko カーネル ブラウザ (特に Mozilla Firefox)、Opera、Chrome で実装され、Web ハイパーテキスト アプリケーション技術ワーキング グループによって次世代 Web 技術の標準要素 (HTML5 新要素) として提案されました。
---- Canvas は、JavaScript 描画 API (パス、四角形、円、テキスト、画像を描画するメソッドなど) を多数提供しており、要素はさまざまな 2D グラフィックスを描画できます。
---- Canvas APIは主に2Dグラフィックスに焦点を当てています。もちろん、要素オブジェクトの WebGL API を使用して 2D および 3D グラフィックスを描画することもできます。
◼Canvasの応用シナリオ
---- アニメーション、ゲーム画面、データの視覚化、画像編集、リアルタイムビデオ処理などに使用できます。
◼キャンバスブラウザの互換性

2. Canvasのメリットとデメリット

◼Canvas の利点:
---- Canvas が提供する機能はより原始的で、ピクセル処理、動的レンダリング、および画像編集、ヒート マップ、グレア トレイル エフェクトなどの大量のデータを使用した描画に適しています。
---- Canvas は、画像を多用するゲーム開発に非常に適しており、多くのオブジェクトを頻繁に再描画するのに適しています。
---- Canvas では、結果の画像を .png または .jpg 形式で保存でき、画像のピクセルレベルの処理に適しています。
◼Canvas のデメリット:
---- モバイル側では、Canvas の数が多いため、メモリ使用量が携帯電話の容量を超え、ブラウザがクラッシュします。
---- Canvas描画はJavaScriptスクリプト(allinjs)のみで操作できます。
---- キャンバスは個々のピクセルで構成されるグラフィックであり、ズームインするとグラフィックが粗くなり、ピクセル化され、ぼやけてしまいます。

3. Canvas の初体験

◼ Canvas 使用上の注意:
---- は element と非常によく似ていますが、唯一の違いは、src 属性と alt 属性がないことです。
---- ラベルには幅と高さの 2 つの属性しかありません (デフォルトの単位は px)。幅と高さが設定されていない場合、キャンバスは幅 300 ピクセル、高さ 150 ピクセルで初期化されます。
---- 要素とは異なり、要素には終了タグ () が必要です。終了タグがない場合、ドキュメントの残りの部分は代替コンテンツとみなされ、表示されません。
---- Canvas.getContext() メソッドの存在をテストして、ブラウザが Canvas をサポートしているかどうかを確認します。
◼Canvas初体験
---- Canvas一般テンプレート
---- Canvasは正方形を描きます

4. キャンバスグリッドと座標空間

◼描画を開始する前に、Canvas グリッド (キャンバス グリッド) と座標系を理解する必要があります。
◼キャンバスグリッドまたは座標空間
----HTMLテンプレートに幅150px、高さ150pxの要素があるとします。デフォルトでは、要素はグリッドで覆われます。
---- 一般に、グリッドの 1 単位は、canvas 要素の 1 ピクセルに相当します。
---- グリッドの原点は座標(0,0)の左上隅にあります。すべての要素はこの原点を基準にして配置されます。
----グリッドは座標空間（座標系）として捉えることもでき、座標の原点はキャンバス要素の左上隅にあり、これを初期座標系と呼びます（青で示す）右図の正方形、左上の角の座標は左から x ピクセル、上から y ピクセル、座標 (x, y)
---- 変換できるグリッドまたは座標空間とその変換方法原点を別の位置に移動したり、グリッドを回転したり、後で説明するようにスケールしたりすることもできます。
注: 原点を移動した後、デフォルトでは、後続のすべての変換は新しい座標系の変換に基づきます。

5. 長方形を描く（Rectangle）

◼Canvas では、長方形を描画する方法として、長方形法とパス法という 2 つの方法がサポートされています。
---- パスとは、さまざまな色と幅の線分または曲線で接続されたさまざまな形状の点の集合です。
---- 長方形を除くその他のグラフィックスは、1 つまたは複数のパスを組み合わせて形成されます。
---- 通常、私たちは多くのパスを介して複雑なグラフィックを描画します。
◼Canvas 描画の四角形メソッド: ---- fillRect(x, y, width, height) :
塗りつぶされた四角形を描画します
---- ストロークRect(x, y, width, height): 四角形の境界線を描画します-
--- clearRect(x, y, width, height): 指定した矩形領域をクリアし、クリアした部分を完全に透明にします。
◼メソッドパラメータ:
---- 上記のメソッドにはすべて同じパラメータが含まれています。
---- x と y は、キャンバス上に描画される四角形の左上隅の座標 (原点を基準とした座標) を指定します (未定義はサポートされていません)。
---- 幅と高さは長方形のサイズを設定します。

6. パスを理解する

◼ パスとは何ですか?
---- グラフィックスの基本要素はパスです。パスは、さまざまな色と幅の線分または曲線で接続されたさまざまな形状の点の集合です。
---- パスは多数のサブパスで構成でき、これらのサブパスはすべてリスト内にあり、リスト内のすべてのサブパス (線、円弧など) がグラフィックスを形成します。
---- パスは、サブパスであっても通常は閉じられています。
◼ パスを使用してグラフィックスを描画する手順:
---- 1. まず、パスの開始点 (beginPath) を作成する必要があります。
---- 2. 次に、描画コマンドを使用してパス (円弧、lineTo) を描画します。
---- 3. 次に、パスを閉じます (closePath、必要ありません)。
---- 4. パスが生成されると、グラフィックスをストロークまたは塗りつぶしでレンダリングできます。
◼ パスを描画するときに使用する関数は次のとおりです
---- beginPath(): 新しいパスを作成します。パスが生成された後、グラフィックス描画コマンドは新しいパス上に描画するように指示されます。古い道に関連付けられています。
---- closePath(): パスを閉じた後、グラフィック描画コマンドは再び beginPath の前のコンテキストを指します。
---- ストローク(): 線を通してグラフィックのアウトライン/ストロークを描画します (現在のパス グラフィックの場合)。
---- fill(): パスのコンテンツ領域を塗りつぶしてソリッド グラフィックを生成します (現在のパス グラフィックの場合)。

7. パス - 直線を描きます

◼ ブラシを移動する (moveTo) メソッド
---- moveTo メソッドは何も描画できませんが、パス リストの一部でもあります
---- moveTo は、紙、ペン先、または上で動作すると想像できます。鉛筆の移動 ある点から別の点に移動するプロセス。
---- moveTo(x, y): 指定された座標 x と y にペンを移動します。
---- キャンバスが初期化されるとき、または beginPath() が呼び出されるとき、通常は moveTo(x,y) 関数を使用して開始点を設定します。
---- 不連続なパスを描画するには、moveTo 関数を使用します。

◼ 直線を描く(lineTo)メソッド
---- lineTo(x, y): 現在位置から指定した(x, y)位置まで直線を描きます。
---- このメソッドには、座標系の線の終点を表す 2 つのパラメータ (x, y) があります。
---- 始点は前の描画パスに関連付けられており、前のパスの終点が次の始点になります。
---- もちろん、moveTo(x,y)関数で開始点を変更することもできます。
◼ 直線を描く
---- ステップ 1: beginPath() を呼び出してパスを生成します。基本的に、パスは多くのサブパス (線、円弧など) で構成されます。
---- ステップ 2: moveTo 関数と lineTo 関数を呼び出してパスを描画します (パスは連続でも不連続でも構いません)。
---- ステップ 3: パスを閉じる closePath() は必須ではありませんが、通常はパスを閉じます。
---- ステップ 4: ストローク()関数を呼び出して線をストロークします。

8. パス - 三角形を描く (Triangle)

◼ 三角形を描画する手順
---- ステップ 1: beginPath() を呼び出してパスを生成します。
---- ステップ 2: moveTo() 関数と lineTo() 関数を呼び出してパスを描画します。
---- 3 番目のステップ: パス closePath() を閉じます。必要ありません。
1) closePath() メソッドは、現在の点から開始点まで直線を描いてグラフを閉じます。
2) グラフがすでに閉じている場合、つまり現在の点が開始点である場合、この関数は何も行いません。
---- ステップ 4: ストローク() 関数を呼び出して線をストロークするか、fill() 関数を呼び出して線を塗りつぶします (fill を使用すると、パスは自動的に閉じられますが、ストロークは閉じられません)。

9. パス - 円弧(Arc)、円(Circle)を描きます

◼ 円弧または円を描くには、arc() メソッドを使用します。
---- arc(x, y, radius, startAngle, endAngle, antiwatchwise)、このメソッドには 6 つのパラメータがあります:
1) x, y: 円弧が描かれる円の中心の座標。
2) 半径: 円弧の半径。
3) startAngle、endAngle: このパラメータは、開始円弧と終了円弧をラジアンで定義します。これらはすべて X 軸を基準としています。
4) 反時計回り: ブール値です。true の場合は反時計回り、false の場合は時計回りで、デフォルトは false です。
◼ ラジアンの計算
---- arc()関数における角度の単位は角度ではなくラジアンです。
---- 角度とラジアンの JS 表現: ラジアン = ( Math.PI / 180 ) * 角度、つまり 1 角度 = Math.PI/180 ラジアン
1) 例: 90°回転: Math.PI / 2 ; 180°回転: Math.PI; 360°回転: Math.PI * 2; -90°回転: -Math.PI / 2;
◼ 円弧を描く手順
---- 最初の手順: beginPath() を呼び出すパスを生成します。
---- ステップ 2: arc() 関数を呼び出して円弧を描画します。
---- 3 番目のステップ: パス closePath() を閉じます。必要ありません。
---- ステップ 4: ストローク() 関数を呼び出してストロークするか、fill() 関数を呼び出してフィルします (fill を使用すると、パスは自動的に閉じられます)

10. パス長方形(長方形)

◼ 長方形を描画する別の方法:
---- rect() 関数を呼び出して描画します。つまり、現在のパスに長方形のパスを追加します。
---- rect(x, y, width, height)
-- -- 描画 左上隅の座標が (x, y)、幅と高さが幅と高さである長方形。
◼ 注:
---- このメソッドが実行されると、moveTo(x,y) メソッドは自動的に座標パラメーター (0,0) を設定します。つまり、現在のストロークは自動的にデフォルトの座標にリセットされます。

11. パス - 円弧(Arc)、円(Circle)を描きます

◼ 円弧または円を描くには、arc() メソッドを使用します。
---- arc(x, y, radius, startAngle, endAngle, antiwatchwise)、このメソッドには 6 つのパラメータがあります:
1) x、y: 円弧が描かれる円の中心の座標。
2) 半径: 円弧の半径。
3) startAngle、endAngle: このパラメータは、開始円弧と終了円弧をラジアンで定義します。これらはすべて X 軸を基準としています。
4) 反時計回り: ブール値です。true の場合は反時計回り、false の場合は時計回りで、デフォルトは false です。
◼ ラジアンの計算
---- arc()関数における角度の単位は角度ではなくラジアンです。
---- 角度とラジアンの JS 表現: ラジアン = ( Math.PI / 180 ) * 角度、つまり 1 角度 = Math.PI/180 ラジアン
---- 例: 90°回転: Math.PI / 180 PI / 2; 180°回転: Math.PI; 360°回転: Math.PI * 2; -90°回転: -Math.PI / 2;
◼ 円弧を描く手順
---- ステップ 1: beginPath を呼び出す() を使用してパスを生成します。
---- ステップ 2: arc() 関数を呼び出して円弧を描画します。
---- 3 番目のステップ: パス closePath() を閉じます。必要ありません。
---- ステップ 4: ストローク() 関数を呼び出してストロークするか、fill() 関数を呼び出してフィルします (フィルを使用すると、パスは自動的に閉じられます)。

12. パス長方形(長方形)

◼ 長方形を描画する別の方法:
---- rect() 関数を呼び出して描画します。つまり、現在のパスに長方形のパスを追加します。
---- rect(x, y, width, height)
-- -- 描画 左上隅の座標が (x, y)、幅と高さが幅と高さである長方形。
◼ 注:
---- このメソッドが実行されると、moveTo(x,y) メソッドは自動的に座標パラメーター (0,0) を設定します。つまり、現在のストロークは自動的にデフォルトの座標にリセットされます。

13. 色

◼ 私たちはグラフィックを描画する多くの方法を学びました。グラフに色を付けたい場合、それを行うための 2 つの重要な属性があります:
---- fillStyle = color: グラフの塗りつぶしの色を設定します。これは fill() 関数の前に呼び出す必要があります。
---- ストロークスタイル = カラー: グラフィックのアウトラインの色を設定します。ストローク() 関数の前に呼び出す必要があります。

◼ color
---- color には、CSS カラー値を表す文字列を指定できます。サポート: キーワード、16 進数、rgb、rgba 形式。
---- デフォルトでは、線色と塗りつぶしの色は両方とも黒（CSS カラー値 #000000）です。
◼ 注意
---- ストロークスタイルまたはフィルスタイルの値が設定されると、新しい値が新しく描画されるグラフィックスのデフォルト値になります。
---- グラフィックスに異なる色を付けたい場合は、fillStyle またはストロークStyle の値をリセットする必要があります。
◼ 補足
---- fill() 関数はグラフィックの塗りつぶし、fillStyle 属性は塗りつぶしの色を設定します
---- ストローク() 関数はグラフィックのストローク、ストロークスタイル属性はストロークの色を設定します

14. 透明性

◼ 単色のグラフィックを描画するだけでなく、キャンバスを使用して半透明のグラフィックを描画することもできます。
◼ 方法 1:ストロークスタイル属性とフィルスタイル属性を RGBA と結合します。

◼ 方法 2: globalAlpha 属性
---- globalAlpha = 0~1
✓ この属性は、キャンバス内のすべてのグラフィックスの透明度に影響します
✓ 有効な値の範囲は 0.0 (完全に透明) ～ 1.0 (完全に不透明) で、デフォルトは1.0。

15. 線のスタイル

◼lineTo () 関数を呼び出して描画される線は、一連の属性を通じて線のスタイルを設定できます。
---- lineWidth = 値: 線幅を設定します。
---- lineCap = type: 線端のスタイルを設定します。
---- lineJoin = type: 線間の。
---- …
◼ lineWidth
---- 線幅設定のプロパティ値は正の数である必要があります。デフォルト値は 1.0px で、単位は必要ありません。(ゼロ、マイナス、無限大、NaN の値は無視されます)
---- 線幅とは、指定されたパスの中心から両側までの太さを指します。つまり、線幅の半分がパスの両側に描画されます。
---- (3,1)から(3,5)まで幅1.0の線を描きたい場合、2番目の図と同じ結果が得られます。
---- パスの両側を半ピクセル延長して、1ピクセルの線（紺色の部分）を塗りつぶしてレンダリングします
---- 両側の残りの半ピクセルは、次のハーフトーンで塗りつぶされます。実際のブラシの色（水色部分）
---- 実際に線が描かれる領域は（水色と紺色の部分）で、塗りつぶしの色が1ピクセルより大きいため、幅 1.0 は多くの場合不正確です。
---- この問題を解決するには、経路を正確に制御する必要があります。たとえば、1 ピクセルの線はパスの両側で半ピクセル延長し、3 番目の図のように (3.5 ,1) から (3.5, 5) まで線を描きます。そのエッジはちょうどピクセル境界に当たります。塗りつぶしは正確です。幅 1.0 の線です。

◼ lineCap: 属性の値は、線分の終点の外観を決定します。次の 3 つのいずれかになります。
---- butt 切り捨て、デフォルトは butt です。
---- 丸い円
---- 正方形 正方形◼
lineJoin: 属性の値は、グラフ内の線分の接続の外観を決定します。次の 3 つのいずれかになります:
---- ラウンド ラウンド
---- ベベル ベベル
---- マイター シュート ゲージ、デフォルトはマイターです。

16. テキストを描画する

◼ Canvas はテキストをレンダリングする 2 つのメソッドを提供します:
---- fillText(text, x, y [, maxWidth])
---- (x,y) 位置で、指定されたテキストを塗りつぶします
---- 最大幅描画します (オプション)。
---- ストロークテキスト(text, x, y [, maxWidth])
---- (x,y) 位置に、テキスト境界線を描画します
---- 描画する最大幅 (オプション)。
◼ テキスト スタイル (テキストを描画する前に呼び出す必要があります)
---- font = value: 現在描画されているテキストのスタイル。この文字列は、CSS フォント プロパティと同じ構文を使用します。デフォルトのフォントは 10px サンセリフです。
---- textAlign = 値: テキストの配置オプション。オプションの値には、開始、終了、左、右、または中央が含まれます。デフォルト値は開始
---- textBaseline = 値: ベースライン配置オプションです。可能な値には、上部、吊り下げ、中央、アルファベット、表意文字、下部が含まれます。
---- デフォルト値はアルファベットです。

17. 絵を描く

◼ 画像を描画するには、drawImage メソッドを使用して画像をキャンバスにレンダリングします。drawImage メソッドには 3 つの形式があります。
----drawImage(image, x, y)
---- ここで、image はイメージまたはキャンバス オブジェクトで、x と y はターゲット キャンバス内の開始座標です。
----drawImage(image, x, y, width, height)
---- このメソッドにはさらに 2 つのパラメータ (幅と高さ) があり、これら 2 つのパラメータは、キャンバスに描画するときのスケーリングを制御するために使用されます
。 --drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
---- 最初のパラメータは他のパラメータと同じで、画像または別のキャンバス参照です。他の 8 つのパラメータは右の図を参照するのが最適です。最初の 4 つは画像ソースのスライス位置とサイズを定義し、最後の 4 つはスライスのターゲット表示位置とサイズを定義します。
◼ 画像ソース、キャンバス API は、画像ソースとして次のタイプのいずれかを使用できます:
---- HTMLImageElement: これらの画像は、Image() 関数または任意の要素によって構築されます。
---- HTMLVideoElement: HTML 要素を画像ソースとして使用すると、ビデオから現在のフレームを画像として取得できます。
---- HTMLCanvasElement: 別の要素を画像ソースとして使用できます。
----…

18. キャンバスの描画状態 - 保存と復元

◼ キャンバスの描画状態
---- は、現在の描画スタイルと変形のスナップショットです。
---- Canvas が描画しているとき、対応する描画状態が生成されます。実際、将来の再利用のためにいくつかの描画状態をスタックに保存することができます。
---- Canvasの描画状態の保存と復元には、パラメータを持たないsaveメソッドとrestoreメソッドがペアで存在します。
◼ (Canvas) ペイント状態の保存と復元
---- save(): キャンバス (Canvas) のすべてのペイント状態を保存
---- Restore(): キャンバス (Canvas) のすべてのペイント状態を復元
◼ Canvas ペイント状態には以下が含まれます:
---- 現在適用されている変形 (つまり、移動、回転、拡大縮小)
---- およびこれらの属性: ストロークスタイル、フィルスタイル、グローバルアルファ、ライン幅、ラインキャップ、ラインジョイン、マイターリミット、シャドウオフセットX、
シャドウオフセットY、シャドウブラー、シャドウカラー、 font 、 textAlign 、 textBaseline…
---- 現在のクリッピング パス (クリッピング パス)

19. 変身

◼ CSS3 と同様に、Canvas も変形をサポートしています。変形は、座標の原点を別の点に移動したり、グリッドの回転や拡大縮小を行うことができる、より強力な方法です。
◼ キャンバスを変形するには 4 つの方法があります:
---- translation(x, y): キャンバスとその原点を別の位置に移動するために使用されます。
---- 右図に示すように、x は左右のオフセット、y は上下のオフセットです (単位は必要ありません)。
---- 回転(角度): 原点を中心にキャンバスを回転する、つまり、z 軸に沿って回転するために使用されます。
---- angle は回転のラジアンで、時計回りで、単位はラジアンです。
----scale(x, y): キャンバス内のグラフィックスのピクセル数を増減したり、グラフィックスを縮小または拡大したりするために使用されます。
---- x は水平方向のスケール係数、y は垂直方向のスケール係数です。1 より小さい場合はグラフが縮小され、1 より大きい場合はグラフが拡大されます。デフォルト値は 1 で、負の数値もサポートされます。
----transform(a, b, c, d, e, f): 変換行列を直接変更できます。この方法は、現在の変形行列に独自のパラメータに基づく行列を乗算します。
◼ 注:
---- 変換する前に、save メソッドを呼び出して状態を保存することを習慣にしてください。
---- ほとんどの場合、手動で元の状態に復元するよりも、restore メソッドを呼び出す方がはるかに簡単です。
---- キャンバスの状態を保存、復元せずにループ内でディスプレイスメントを実行すると、キャンバスを超えている可能性が高く、何かが欠けていることに気づく可能性があります。
---- グラフィックスを描画する前に変換を呼び出す必要があります。

20. 移動と翻訳

◼ キャンバスとその原点を別の位置に移動するために使用される、translate メソッド。
---- translation(x, y)
---- x は左右のオフセット、y は上下のオフセットです (単位は必要ありません)。
◼ キャンバスの原点を移動する利点
---- 変換メソッドが使用されない場合、デフォルトではすべての四角形が同じ (0,0) 座標原点に描画されます。
---- Translationメソッドを使うと、手動で座標値をいちいち調整することなく、任意にグラフィックスを配置することができます。
◼ 四角形の移動例
---- ステップ 1: まずキャンバスの現在の状態を保存します
---- ステップ 2: グラフィックを描画する前にキャンバスを移動および移動します
---- ステップ 3: グラフィックの描画を開始しますそして塗りつぶしの色

21. 回転回転

◼ 回転メソッド。原点の周り、つまり Z 軸に沿ってキャンバスを回転するために使用されます。
---- 回転(角度)
---- は、回転角度 (角度) という 1 つのパラメータのみを受け入れます。これは、時計回りのラジアン単位の値です。
---- 角度とラジアンの JS 表現: ラジアン = ( Math.PI / 180 ) * 角度、つまり 1 角度 = Math.PI/180 ラジアン。
---- 例: 90°回転: Math.PI / 2; 180°回転: Math.PI; 360°回転: Math.PI * 2; -90°回転: -Math.PI / 2;
-- - - 回転の中心点は常にキャンバスの元の座標点になりますので、変更したい場合はtranslateメソッドを使用する必要があります。

◼ 回転の場合
---- ステップ 1: まずキャンバスの現在の状態を保存し、回転の原点を決定します
---- ステップ 2: グラフィックを描画する前にキャンバスを回転します (それに応じて座標系が回転します)
-- - - ステップ 3: グラフィックの描画を開始し、色で塗りつぶします。

22. ズームスケール

◼ スケールメソッドはキャンバスをズームできます。キャンバス内のグラフィックのピクセル数を増減したり、グラフィックを縮小または拡大したりするために使用できます。
----scale(x, y)
---- x は水平方向のスケール係数、y は垂直方向のスケール係数です。負の数もサポートされます。
---- 1より小さい場合はグラフが縮小され、1より大きい場合はグラフが拡大されます。デフォルト値は 1 です。
◼ 注意事項
---- キャンバスの初期状態では左上隅の座標が原点とされます。パラメータが負の実数の場合、x 軸または y 軸を対称軸とする鏡映反転と同じになります。
---- たとえば、y 軸を対称軸として鏡像を反転するには、translate(0, Canvas.height);scale(1,-1); を使用します。
---- デフォルトでは、キャンバスの 1 単位は 1 ピクセルです。ズーム率を 0.5 に設定すると、1 単位が 0.5 ピクセルになるため、描画される形状は元の半分になります。同様に2.0にすると1単位が2ピクセルに相当し、グラフが2倍に拡大された描画結果となります。
◼ スケーリングケースの実践
---- ステップ 1: まずキャンバスの現在の状態を保存し、ズーム原点を決定します
---- ステップ 2: グラフィックスを描画する前にキャンバスをズームします
---- ステップ 3: 描画を開始しますグラフィックスを色で塗りつぶす

23. キャンバスアニメーション

◼ キャンバスの描画は JavaScript によって制御されており、いくつかのインタラクティブなアニメーションを非常に簡単に実現できます。では、Canvas はどのようにして基本的なアニメーションを実行するのでしょうか?
---- Canvas の最大の制限は、一度描画した画像がそのまま残ることです。
---- アニメーションを実行する必要がある場合、キャンバス上のすべてのグラフィックをフレームごとに再描画する必要があります（たとえば、1 秒間に 60 フレームを描画すると、滑らかなアニメーションを描画できます）。
---- アニメーションを実現するには、一定間隔で再描画を行えるメソッドが必要です。ただし、Canvas には次の 3 つのメソッドがあります。
---- 指定した関数を定期的に実行して再描画するためのメソッドは、setInterval、setTimeout、requestAnimationFrame の 3 つです。
◼ Canvas 上にアニメーションのフレームを描画するための基本的な手順 (スムーズなアニメーションを描画するには、1 秒間に 60 フレームを描画する必要があります): ---- ステップ 1: コンテンツが表示されない限り、clearRect メソッドを使用してキャンバスをクリアします
。次に描画されるものはキャンバス (背景画像など) に完全に埋められます。それ以外の場合はすべてクリアする必要があります。
---- ステップ 2: キャンバスの状態を保存する キャンバスの状態設定 (スタイル、変形など) を追加し、フレームを描画するたびに元の状態を維持したい場合は、最初にキャンバスの状態を保存する必要があります。後で元の状態に戻します。
---- ステップ 3: アニメーション形状 (アニメーション形状) を描画します。つまり、アニメーション内のフレームを描画します。
---- ステップ 4: キャンバスの状態を復元する キャンバスの状態が保存されている場合は、まずそれを復元してから、次のフレームを再描画できます。

24. 2 番目の hand-setInterval を描画します

◼ 秒針のアニメーションを描画する、フレームを描画する手順:
---- ステップ 1: clearRect(x,y, w,h) メソッドを使用してキャンバスをクリアします。
---- ステップ 2: キャンバスの状態を保存します。
---- ステップ 3: キャンバスの状態を変更します (スタイル、座標の移動、回転など)。
---- ステップ 4: 秒針グラフィックを描画します (つまり、アニメーション内のフレームを描画します)。
---- ステップ 5: キャンバスの状態を復元し、次のフレームを再描画する準備をします。
◼ setTimout タイマの欠点
---- setTimeout のコールバック関数がマクロタスク内に配置されて実行を待機しているため、setTimeout タイマはあまり正確ではありません。
---- マイクロタスク内に未完了のタスクがある場合、setTimeout のコールバック関数が指定時間内にコールバックをトリガーしない場合があります。
---- 特定のタスクをよりスムーズかつ正確に実行したい場合は、requestAnimationFrame 関数を使用できます。

25. 秒針を描く - requestAnimationFrame

◼ requestAnimationFrame 関数
---- ブラウザにアニメーションを実行したいことを伝え、次の再描画の前にアニメーションを更新するためにこの関数のコールバック関数を呼び出すようにブラウザに要求します。
---- このメソッドはパラメータとしてコールバック関数を渡す必要があります。この関数はブラウザが次回再描画する前に実行されます
---- ブラウザが次回再描画する前にアニメーションの次のフレームの更新を継続したい場合, その場合、コールバック関数自体で requestAnimationFrame() を再度呼び出す必要があります
---- 通常、コールバック関数は 1 秒あたり 60 回程度実行されますが、それが減少する可能性があります。
◼ 秒針のアニメーションを描画する、フレームを描画する手順:
---- ステップ 1: clearRect(x,y, w,h) メソッドを使用してキャンバスをクリアします。
---- ステップ 2: キャンバスの状態を保存します。
---- ステップ 3: キャンバスの状態を変更します (スタイル、座標の移動、回転など)。
---- ステップ 4: 秒針グラフィックを描画します (つまり、アニメーション内のフレームを描画します)。
---- ステップ 5: キャンバスの状態を復元し、次のフレームを再描画する準備をします。

26. 太陽系は回転する

◼ 太陽系回転アニメーション、フレームを描画する手順:
---- ステップ 1: clearRect(x,y, w,h) メソッドを使用してキャンバスをクリアし、グローバル スタイルを初期化します。
---- ステップ 2: キャンバスの状態を保存します。
---- ステップ 3: 背景を描画し、地球を描画し (月を描画し)、影効果を描画します。
---- ステップ 5: キャンバスの状態を復元し、次のフレームを再描画する準備をします。

27. 時計

◼ 円上の x、y 座標を求めます。
---- 円上の x、y 軸の座標は実際には右側 ( AB, BC ) であり、AC はクロック半径です ----
x= AB = cosa * AC => x = Math.cos(rad) * R
---- y= BC = sina * AC => y = Math.sin(rad) * R
---- 角度の JS 式とラジアン: ラジアン =( Math.PI / 180 ) * 角度 => ラジアン = 1 ラジアン * 角度に対応する角度。
---- 例: 90 度回転: ラジアンは Math.PI / 2; 180 度回転: Math.PI; 360 度回転: Math.PI * 2; -90 度回転: Math.PI / 2;
- ---- i 時間目の座標:
---- x = Math.cos( Math.PI * 2 / 12 * i ) * R
---- y = Math.sin( Math.PI * 2 / 12 * i) * R

◼ 時計を描画し、フレームを描画する手順:
---- ステップ 1: clearRect(x,y, w,h) メソッドを使用して、キャンバスをクリアします。
---- ステップ 2: キャンバスの状態を保存します。
---- ステップ 3: 白い背景を描き、数字を描き、時/分/秒針を描き、円を描き、時と分の目盛りを描きます。
---- ステップ 4: キャンバスの状態を復元し、次のフレームの再描画の準備をします。