ホームページ > ウェブフロントエンド > H5 チュートリアル > html5のcanvasタグとは何を意味するのでしょうか? Canvasタグの使い方の紹介

html5のcanvasタグとは何を意味するのでしょうか? Canvasタグの使い方の紹介

寻∝梦
リリース: 2018-08-30 11:06:15
オリジナル
8751 人が閲覧しました

この記事では、HTML5 での Canvas タグの描画を主に紹介し、HTML5 Canvas タグの定義と基本的な使用プロセスを説明し、CSS スタイルと JS の基礎知識を追加して、記事全体をより難しくしています。ただし、コードに従うのは常に正しいことです。次に、この記事を見てみましょう

まず、HTML5 の Canvas タグの意味について説明します。

タグは、グラフやその他の画像などのグラフィックを定義します。

タグは単なるグラフィック コンテナです。キャンバスを使用して、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。

次に、描画に html5 マークアップを使用する方法について説明します。

Canvas 描画 API のほとんどは、 要素自体では定義されません。キャンバス描画環境オブジェクトの getContext() メソッド。

Canvas API もパス表現を使用します。ただし、パスは文字と数字の文字列として記述されるのではなく、beginPath() メソッドや arc() メソッドの呼び出しなど、一連のメソッド呼び出しによって定義されます。

パスが定義されると、fill() などの他のメソッドがこのパス上で動作します。 fillStyle などの描画環境のさまざまなプロパティは、これらの操作がどのように使用されるかを記述します。

注: Canvas API が非常にコンパクトである理由の 1 つは、テキストの描画をサポートしていないことです。 グラフィックにテキストを追加するには、それを自分で描画してビットマップ画像と結合するか、CSS を使用して の上に配置して HTML テキストをオーバーレイする必要があります。

html5タグの使用法:

グラフやその他の画像などのグラフィックを定義します。ただし、 タグは単なるグラフィック コンテナであり、グラフィックを描画するにはスクリプトを使用する必要があります。タグは通常、id 属性 (スクリプトでよく参照されます)、幅と高さの属性を指定してキャンバスのサイズを定義し、style 属性を使用して境界線を追加する必要があります

たとえば、長方形または正方形を作成します。

<!doctype html>
<html >
<head>
    <meta charset="UTF-8">
    <script type="js/index.js"></script>
    <title>php中文网之画图</title>
</head>
<body >
<canvas id="rectangular" width="200" height="100" style="border:3px solid #adadad;">
</canvas>
<canvas id="square" width="200" height="200" style="border:5px solid #ff88c2;"></canvas>
</body>
</html>
ログイン後にコピー

効果は写真に示されています:

html5のcanvasタグとは何を意味するのでしょうか? Canvasタグの使い方の紹介

HTML5のcanvasタグの概要:

HTML5のキャンバスは、平たく言えば描画に使用される布ですが、これは普通の布ではありません。これは馬良の魔法のペンに似た魔法のもので、多くの精巧で素晴らしいものを描くことができます。この記事では、キャンバスの可能性をより直感的に理解できるように、キャンバスをベースにした 2 つの素晴らしい効果を紹介します。

個人的には、canvas には発展の余地がたくさんあると感じています。この国のインターネット速度がプレッシャーなく維持できれば、これが HTML の世界になることは間違いありません。 。キャンバスでは、彼の想像力が無限である限り、彼の開発スペースは可能な限り広がるため、もちろん、それは私の推測ではありますが、それは否定できません。 HTML は強力ですが、現時点での最大の問題は互換性の問題であり、ネットワーク速度にも大きな制限があります

【編集者のおすすめ】

html p タグに a タグを含めることはできますか? html pタグの機能を解説

html aタグの使い方は? HTMLタグの使い方まとめ

以上がhtml5のcanvasタグとは何を意味するのでしょうか? Canvasタグの使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート