HTMLキャンバスについてのまとめ

HTML5 の 要素は、スクリプト (通常は JavaScript) を通じて行われるため、グラフィックを描画するにはスクリプトを使用する必要があります。 , Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。

おすすめ: [コース] めくるめくカウントダウン効果のキャンバス描画とアニメーション

コースの紹介: Canvas は、名前が示すように、ブラウザ上で定義されたキャンバスですが、Canvas は単なる要素ではなく、集合です。プログラミング インターフェイスの出現は、Web の当初のドキュメント ベースの設計意図を超えています。これを使用して多くの夢のコンテンツを開発し、プログラマーが創造性を完全に発揮できるようにします。

1. HTMLcanvas Rectangle Shower

はじめに: HTMLcanvas Rectangle Shower 描画環境をフルスクリーンで取得 画面の幅と画面の高さを取得 各テキストの幅を決定列ループ 出力タイマー呼び出し HTML 部分 CSS 部分 JavaScript 部分 私はいつも世界は美しさと希望に満ちていると信じています。

2. HTML5でキャンバスを開始するためのコード例の詳細な説明(図)

はじめに: 1) HTMLCanvasElementオブジェクトのメンバー: height - Canvas要素のheight属性に対応します。 Canvas 要素への width 属性; getContext() — キャンバスの描画コンテキストを返します。 2) 長方形を描画します: fillRect(x,y,w,h) — 塗りつぶされた長方形を描画します。 w,h)——中空の長方形を描画します。

3.

canvas ダイナミック チャート

canvas は HTML5 の非常に重要な部分です。これが何であるかについては、私が説明する必要はありません。ここ。ビジュアル チャートは、キャンバスの強力な機能を表現したものの 1 つです。

現在、Canvas を使用して実装された成熟したチャート プラグインが多数あり、Chart.js や ECharts などで美しくクールなチャートを作成でき、ほぼすべてのチャート実装をカバーできます。

4.

H5 アニメーション - 円のキャンバス描画の進行状況の例

最初のステップは、カスタマイズされた色で完全な円を描画することです。2 番目のステップは、半径がより小さい内側の円を描画することです。カスタマイズされた色で外側の円

最後に、パーセンテージに従って 3 番目の円を 1 つのステップでカスタム カラーで描画します。
ダイナミック描画の 3 番目のステップの効果を実現するには、タイマー機能を追加し、時々距離を描画し、しきい値を設定します。
このしきい値を超えた場合、このしきい値は実際にはクリアされます。表示するパーセンテージ値。描画するたびに 0.01
注: タイマーで描画する場合、2 番目のステップで内側の円を描画する必要があり、空白の円もタイマーで描画されます。

5.

キャンバスは虫眼鏡効果を実装します

ここでは、キャンバスが知る必要があるため、拡大領域の中心点としてマウスの位置を使用します(マウスの移動に合わせて虫眼鏡も移動します)。絵を描くときの左上の角の座標と領域の幅と高さなので、ここで領域の範囲を計算します

6

キャンバスを画像に転送するサンプルチュートリアル

場合によっては、保存したい場合があります。描画されたキャンバスをローカル画像として表示するにはどうすればよいでしょうか? Canvas は重要なメソッド toDataURL() を提供しており、このメソッドは、キャンバス内のパターンを (mine type パラメータに基づいて) Base64 エンコード形式の他の画像形式に変換できます。を渡して)、Data URL データを返します。次に、それがどのように実装されるかを見てみましょう。

関連する質問と回答:

1.

javascript - キャンバス描画のモザイクの問題について助けを求めます。色の選択が常に不正確です。

2. キャンバスを使用して画像を変更すると、ちらつきの問題が発生します。

【関連おすすめ】

1.

【コース】キャンバス描画時計

2.

キャンバスは、ダイナミックな雪の結晶効果を実現します

以上がHTMLキャンバスについてのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。