この記事では、主にHTML5のいくつかの新機能とCanvasの共通特性の並べ替えを紹介します。 Canvas APIは、グラフィックを描画するためにHTML5で使用される重要なコンテンツです。それを必要とする友達は、次の1を参照できます。HTML5コンテンツタイプ
| コンテンツタイプ | 説明する |
|---|---|
| 列をなして | オーディオ、ビデオ、キャンバス、iframeなど、他の種類のコンテンツをドキュメントに追加します。 |
| 流れ | フォーム、H1、小型などのドキュメントやアプリケーションの本体で使用される要素 |
| タイトル | H1、H2、HGroupなどの段落タイトル。 |
| 交流 | オーディオやビデオコントロール、ボトン、テキストアレアなど、ユーザーと対話するコンテンツ。 |
| メタデータ | 通常、ページのヘッドに表示され、スクリプト、スタイル、タイトルなど、ページの他の部分のパフォーマンスと動作を設定します。 |
| フレーズ | Mark、KDB、Sub、Supなどのテキストおよびテキストマーク要素 |
| 断片 | ウフィダは、記事、脇、タイトルなどのページフラグメントの要素を定義しています。 |
| 要素名 | 説明する |
|---|---|
| ヘッダ | ヘッドエリアのコンテンツをマークします(ページ全体またはページ内の領域に使用) |
| フッター | フットエリアの内容をマークします(ページ全体またはページ内の領域に使用) |
| セクション | Webページの領域 |
| 記事 | 独立した記事コンテンツ |
| さて | 関連コンテンツまたは引用 |
| nav | ナビゲーション補助コンテンツ |
ヒント
セレクターAPIは単なる便利ではありません。 DOMを走行する場合、セレクターAPIは通常、前の子ノード検索APIよりも高速です。クイックスタイルシートを実装するために、ブラウザはセレクターのマッチングを最適化します。
4.Canvas API4.1Canvasの概要
キャンバスは本質的にビットマップキャンバスであり、描かれたグラフィックスはスケーラブルではなく、SVG画像のように拡大して削減することはできません。さらに、キャンバスで描かれたオブジェクトは、ページDOM構造や名前空間に属していません。
キャンバスを使用したプログラミングでは、最初にそのコンテキストを取得する必要があります。次に、コンテキストでアクションを実行し、最後にこれらのアクションをコンテキストに適用します。
キャンバスの座標は左上隅から始まり、x軸は水平方向(ピクセル)で右に伸び、y軸は垂直方向に伸びます。左上隅x = 0およびy-0の座標を持つポイントは、原点と呼ばれます。
ほとんどのHTML要素と同様に、CANVAS要素は、CSSを適用したり、内側のマージンを設定したり、外側のマージンを設定したりすることで境界を追加することもでき、一部のCSS属性はCanvasの要素によって継承されることもあります。
4.2 HTML5 Canvas APIを使用します修正 - 図面システムでは、ステートメントは変換です - 適用されたときに連続的に適用され、自由に組み合わせまたは変更できます。各図面操作の結果は、キャンバスに表示される前に、補正層を介して修正する必要があります。これにより追加の複雑さが追加されますが、より強力な機能を描画システムに追加します。これは、現在の主流画像編集ツールのようなリアルタイムの画像処理をサポートする可能性があるため、APIのコンテンツのこの部分の複雑さが必要です。
再利用可能なコードには重要な提案があります。一般に、描画は原点(座標系の0,0ポイント)から開始し、変換(スケーリング、翻訳、回転など)を適用し、目的の効果が達成されるまでコードを継続的に変更する必要があります。
コンテキストパス関数
(1)Moveto(x、y):描画せず、現在の位置を新しい宛先座標(x、y)に移動するだけです。
(2)Lineto(x、y):現在の位置を新しいターゲット座標(x、y)に移動するだけでなく、2つの座標の間に直線を描画します。
(3)Closepath():この関数の動作はLinetoに非常に似ています。唯一の違いは、ClosepAhtがターゲット座標としてパスの開始座標を自動的に使用することです。 Closepathはまた、現在描かれた数字が閉じられているか、完全に閉じたエリアを形成したことをキャンバスに通知します。これは、将来の塗りつぶしやストロークに非常に役立ちます。
(4)strokerect():指定された位置と座標に基づいて、長方形のアウトラインを描画します。
(5)ClearRect():長方形領域のすべてのコンテンツをクリアし、それを初期状態、つまり透明な色に復元します。
(6)QuadraticCurveto():曲線を描く関数の開始点は、2セットの(x、y)エッジを備えた現在の座標です。 2番目のグループは、曲線の終点を指します。最初のグループは制御ポイントを表します。いわゆるコントロールポイントは、曲線の隣にあり(曲線の上ではありません)、その効果は曲線に張力力を作成することと同等です。制御点の位置を調整することにより、曲線の曲率を変更できます。
画像は、Canvas操作の複雑さを高めます。画像が操作されるまで、画像が完全にロードされるまで待つ必要があります。ブラウザは通常、ページスクリプトが実行されている間に非同期に画像をロードします。ビューが完全にロードされる前にキャンバスに画像をレンダリングする場合、キャンバスは写真を表示しません。
Gradientとは、カラーセットで段階的なサンプリングアルゴリズムを使用し、結果をストロークスタイルと充填スタイルに適用することを指します。
勾配を使用するには、3つのステップが必要です。
(1)グラデーションオブジェクトを作成します。
(2)勾配オブジェクトの色を設定し、遷移方法を示します。
(3)コンテキストで塗りつぶしスタイルまたはストロークスタイルの勾配を設定します。
表示する色を設定するには、勾配オブジェクトのaddcolorStop関数を使用します。この関数により、色とオフセットの2つのパラメーターを指定できます。カラーパラメーターは、開発者がオフセット位置でストロークまたは満たされたときに使用したい色です。オフセットは0.0〜1.0の値であり、勾配ラインに沿って距離がどの程度変化するかを表します。
線形勾配に加えて、HTML5 Canvas APIは放射性勾配もサポートします。いわゆる放射性勾配は、2つの指定された円の間の円錐領域で色がスムーズに変化することを意味します。放射性勾配と線形勾配に使用される色終端ポイントは同じです。
XML/HTMLコードコピーコンテンツにクリップボードに