HTML5の最新canvas要素の使い方を詳しく解説-H5 チュートリアル-php.cn

HTML5の最新canvas要素の使い方を詳しく解説

寻∝梦

リリース： 2018-08-13 18:52:02

オリジナル

2501 人が閲覧しました

HTML5 には多くの新しい要素がありますが、より美しい Web ページを作成するのをより便利にするためのものです。では、以下で紹介する要素を見てみましょう

HTML5 Canvas

最終更新日は 8 月 1 日です。 , 2017

グラフやその他の画像などのタグ定義グラフィックスを描画するには、スクリプトを使用する必要があります。

キャンバス上に赤い四角形、グラデーションの四角形、色付きの四角形、およびいくつかの色付きのテキストを描画します。

Canvas とは何ですか?

HTML5 要素はスクリプト (通常は JavaScript) を通じて行われます。

タグは単なるグラフィックコンテナであり、グラフィックを描画するにはスクリプトを使用する必要があります。

Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。

HTML5 Canvas は何に使用されますか?

HTML5

ブラウザのサポート

Internet Explorer 9以降、Firefox、Opera、Chrome、Safariはこの要素をサポートしています。

注: Internet Explorer 8およびそれ以前のIEバージョンはこの要素をサポートしていません。

キャンバス(Canvas)を作成します

キャンバスは、Web ページ内の要素を通して描画される長方形のボックスです。

注: デフォルトでは、要素には境界線とコンテンツがありません。

簡単な例は次のとおりです:

<canvas id="myCanvas" width="200" height="100"></canvas>

ログイン後にコピー

注: 通常、タグでは id 属性 (スクリプトでよく参照される) を指定する必要があり、幅と高さの属性はキャンバスのサイズを定義します。

ヒント:複数の

次のように、style 属性を使用して境界線を追加します。

分析の例:

まず、

次に、コンテキストオブジェクトを作成します:

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タグはサポートしていません。

<!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の新しいタグセント

以上がHTML5の最新canvas要素の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

HTML5の最新canvas要素の使い方を詳しく解説