ホームページ > 記事 > ウェブフロントエンド > HTML5の最新canvas要素の使い方を詳しく解説
HTML5の最新canvas要素の使い方を詳しく解説
- 寻∝梦オリジナル
- 2018-08-13 18:52:022502ブラウズ
HTML5 には多くの新しい要素がありますが、より美しい Web ページを作成するのをより便利にするためのものです。では、以下で紹介する要素を見てみましょう
HTML5 Canvas
最終更新日は 8 月 1 日です。 , 2017
グラフやその他の画像などのタグ定義グラフィックスを描画するには、スクリプトを使用する必要があります。
キャンバス上に赤い四角形、グラデーションの四角形、色付きの四角形、およびいくつかの色付きのテキストを描画します。
Canvas とは何ですか?
HTML5 要素はスクリプト (通常は JavaScript) を通じて行われます。
タグは単なるグラフィック コンテナであり、グラフィックを描画するにはスクリプトを使用する必要があります。
Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。
HTML5 Canvas は何に使用されますか?
HTML5 5ba626b379994d53f7acf72a64f9b697 タグは、(スクリプト、通常は JavaScript を介して) 使用されます。ただし、5ba626b379994d53f7acf72a64f9b697 要素自体には描画機能がありません (グラフィックスのコンテナーにすぎません)。実際の描画を行うにはスクリプトを使用する必要があります。 getContext() メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。
ブラウザのサポート
Internet Explorer 9以降、Firefox、Opera、Chrome、Safariはこの要素をサポートしています。
注: Internet Explorer 8およびそれ以前のIEバージョンはこの要素をサポートしていません。
キャンバス(Canvas)を作成します
キャンバスは、Web ページ内の要素を通して描画される長方形のボックスです。
注: デフォルトでは、要素には境界線とコンテンツがありません。
簡単な例は次のとおりです:
<canvas id="myCanvas" width="200" height="100"></canvas>
注: 通常、タグでは id 属性 (スクリプトでよく参照される) を指定する必要があり、幅と高さの属性はキャンバスのサイズを定義します。
ヒント:複数の 5ba626b379994d53f7acf72a64f9b697 要素。
次のように、style 属性を使用して境界線を追加します。
分析の例:
まず、5ba626b379994d53f7acf72a64f9b697 var c=document.getElementById("myCanvas ");
次に、コンテキスト オブジェクトを作成します:
var ctx=c.getContext("2d");
getContext("2d") このオブジェクトは、さまざまな描画パスを持つ組み込みの HTML5 オブジェクトです。長方形、円、文字、加算画像の方法。
次の 2 行のコードは、赤い四角形を描画します。
ctx.fillRect(0,0,150,75);
CSS カラーを指定できる fillStyle プロパティを設定します。グラデーション、またはパターン。デフォルトの fillStyle 設定は #000000 (黒) です。
fillRect(x,y,width,height) メソッドは、四角形の現在の塗りつぶし方法を定義します。
キャンバス座標
キャンバスは2次元グリッドです。
キャンバスの左上隅の座標は(0,0)です
上記のfillRectメソッドにはパラメータ(0,0,150,75)があります。
意味: キャンバス上に左上隅 (0,0) から開始して 150x75 の長方形を描画します。
Canvas - パス
Canvas 上に線を描くには、次の 2 つのメソッドを使用します:
moveTo(x,y) で線の開始座標を定義します
lineTo(x,y) で終了座標を定義します線の座標
線を描くには、ストローク() などの「ink」メソッドを使用する必要があります。
これは例です:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
キャンバスに円を描くには、次のメソッドを使用します:
arc(x,y,r,start,stop )
実際、円を描くときは、stroke() や fill() などの「ink」メソッドを使用します
別の例:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>お使いのブラウザーは、 HTML5のcanvasタグはサポートしていません。 c2caaf3fc160dd2513ce82f021917f8b
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Canvas - テキスト
キャンバスを使用してテキストを描画します。重要なプロパティとメソッドは次のとおりです:
font - フォントを定義します
fillText(text,x,y) - キャンバス上にソリッド テキストを描画します。
ストロークText(text,x,y) - キャンバス上に中空のテキストを描画します
キャンバス - グラデーション
グラデーションは、長方形、円、線、テキストなどで塗りつぶすことができます。さまざまな形状を異なる色で定義できます。
キャンバスのグラデーションを設定するには 2 つの異なる方法があります:
createLinearGradient(x,y,x1,y1) - 線のグラデーションを作成します
createRadialGradient(x,y,r,x1,y1,r1) - パスを作成します方向性/円形グラデーション
グラデーション オブジェクトを使用する場合は、2 つ以上のストップ カラーを使用する必要があります。
addColorStop() メソッドはカラーストップを指定し、パラメーターは 0 から 1 までの座標で記述されます。
グラデーションを使用し、fillStyle またはストロークスタイルの値をグラデーションに設定してから、形状を描画します。長方形、テキスト、線など。
【関連おすすめ】
HTMLをゼロから学べるHTMLの基本要素以上がHTML5の最新canvas要素の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。