ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5のいくつかの新機能とキャンバスの共通の特性を整理する

著者：Eve Cole 更新時間：2025-07-03 05:32:01

この記事では、主にHTML5のいくつかの新機能とCanvasの共通特性の並べ替えを紹介します。 Canvas APIは、グラフィックを描画するためにHTML5で使用される重要なコンテンツです。それを必要とする友達は、次の1を参照できます。HTML5コンテンツタイプ

コンテンツタイプ説明する
列をなしてオーディオ、ビデオ、キャンバス、iframeなど、他の種類のコンテンツをドキュメントに追加します。
流れフォーム、H1、小型などのドキュメントやアプリケーションの本体で使用される要素
タイトル H1、H2、HGroupなどの段落タイトル。
交流オーディオやビデオコントロール、ボトン、テキストアレアなど、ユーザーと対話するコンテンツ。
メタデータ通常、ページのヘッドに表示され、スクリプト、スタイル、タイトルなど、ページの他の部分のパフォーマンスと動作を設定します。
フレーズ Mark、KDB、Sub、Supなどのテキストおよびテキストマーク要素
断片ウフィダは、記事、脇、タイトルなどのページフラグメントの要素を定義しています。

2。HTML5の新しいフラグメントクラス要素

要素名説明する
ヘッダヘッドエリアのコンテンツをマークします（ページ全体またはページ内の領域に使用）
フッターフットエリアの内容をマークします（ページ全体またはページ内の領域に使用）
セクション Webページの領域
記事独立した記事コンテンツ
さて関連コンテンツまたは引用
nav ナビゲーション補助コンテンツ

3。新しいQuerySelectorメソッド

ヒント

セレクターAPIは単なる便利ではありません。 DOMを走行する場合、セレクターAPIは通常、前の子ノード検索APIよりも高速です。クイックスタイルシートを実装するために、ブラウザはセレクターのマッチングを最適化します。

4.Canvas API

4.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コードコピーコンテンツにクリップボードに
関連記事