简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5でキャンバスに円形のプログレスバーを描画します

王林
リリース： 2020-11-13 17:09:16
転載
2901 人が閲覧しました

HTML5でキャンバスに円形のプログレスバーを描画します

まず導入効果を見てみましょう:

HTML5でキャンバスに円形のプログレスバーを描画します

(学習ビデオの共有: html ビデオ チュートリアル)

ここでは、このような循環的な進行を作成するために HTML5 Canvas を使用します。

最初は HTML ページです。HTML5 のドキュメント識別子は次のとおりです: 

<!DOCTYPE html>
ログイン後にコピー

このドキュメント識別子HTML4 よりもはるかに単純です。

2 番目のステップは、ページ上に Canvas キャンバス要素を作成することです: 

<canvas class="process" width="48px" height="48px">61%</canvas>
ログイン後にコピー

長さと幅が 48 ピクセルのキャンバスを作成しました。描画する円の外径は48ピクセルです。キャンバス要素の中央に書かれているのは「61%」です。この文字は円の中央に表示されているものではありません。61%というのは古いブラウザのせいですCanvas 要素はサポートされていません。そのときに表示されるテキストです。

さて、ここまでで HTML ページのコンテンツは大まかに完成したので、それを Javascript に渡して、JavaScript を使用して円を描画します。

HTML5でキャンバスに円形のプログレスバーを描画します

HTML5でキャンバスに円形のプログレスバーを描画します

HTML5でキャンバスに円形のプログレスバーを描画します

関連する推奨事項: html チュートリアル

以上がHTML5でキャンバスに円形のプログレスバーを描画しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
canvas html5 プログレスバー
ソース：gxlcms.com
前の記事：h5 プログラムとミニ プログラムの違いは何ですか? 次の記事：data-* を使用した HTML5 の属性のカスタマイズに関する簡単な分析
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！