HTML5のCanvasグラフィック要素を使用してグラフィックを描画する方法

HTML5 は HTML の最新標準です。この記事を書いている時点では、HTML5 はまだ活発に開発中です。 HTML5 には、新しいタグ情報の提供に加えて、新しいアプリケーションプログラミングインターフェイス (API) も含まれており、これにより、独自のプラグインを使用せずに、Web ページでより豊富なマルチメディア機能やインタラクティブ機能を提供できるようになります。これらに加えて、World Wide Web Consortium は、地理位置情報、オフラインストレージ、ファイル管理などの他の関連テクノロジも発表しています。

HTML5 のリリース後、ブラウザはよりオペレーティングシステムに近いものになります。実際、Google の Chrome OS は、さまざまな Web アプリケーションを実行する Chrome ブラウザをベースにしたオペレーティングシステムです。 HTML5 やその他の関連テクノロジーを使用することで、デスクトップと WEB 間の従来の境界線を曖昧にするアプリケーションを構築できます。

HTML5 のキャンバスグラフィック要素

この記事では、HTML5 の新しい canvas 要素について簡単に説明します。 Canvas を使用すると、ブラウザ上でスクリプトを使用してグラフィックを描画できます。著者は、キャンバス要素を使用してブラウザ上で単純な三角形を描く方法を説明します。始める前に、現在 HTML5 およびその他の関連テクノロジーは最新バージョンのブラウザとのみ互換性があることを知っておく必要があります。 Firefox、Chrome、Safari、またはIE9の最新バージョンを使用する必要があります。

キャンバスとは

CanvasはHTML5の新しいタグです。ページ内でこのタグを定義するコードは次のとおりです。

<!DOCTYPE HTML>
<html>
<ヘッド>
<title>HTML5 – ハロートライアングル</title>
</head>
<本文>
<キャンバスid=”キャンバス” 幅=”800″ 高さ=”600″>
</キャンバス>
</本文>
</html>

この短い HTML5 コードはまだ何も実行しません。次に、キャンバス上に要素を描画して操作します。

キャンバス設定

キャンバス上では座標系を使用する必要があります。キャンバスの左上隅に座標 (0, 0) を定義します。X 座標はキャンバスの幅に応じて増加し、Y 座標はキャンバスの高さに応じて増加します。この記事の例では、X 軸は (0, 0) から (800, 0) までの線、Y 軸は (0, 0) から (0, 600) までの線です。詳細は以下の図に示されています。

キャンバスの描画に入るには、まず背景を完成させる必要があります。具体的には、次の Javascript コードを使用できます。

var myCanvas = document.getElementById("キャンバス");

var ctx = myCanvas.getContext("2d");

これで、ctx はキャンバス要素の 2D 背景を保持し、2 次元空間に描画できるようになりました。そこに三角形を描きます。もちろん、3D 背景を使用できるかどうか疑問に思うかもしれません。答えはまだ「できません」です。3D 背景には統一された標準がなく、ブラウザーのサポートも非常に限られているためです。

最初の直線を描く

最初の直線を描くときに何を知っておく必要があるでしょうか? まず、開始座標 (X1、Y1) と終了座標 (X2、Y2) の 2 つの点を知る必要があります。線を描画するには、次のコードを使用します。

関数drawLine(ctx, color, x1, y1, x2, y2){

ctx.beginPath();

ctx.strokeStyle=色;

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.stroke();

ctx.closePath();

}

これらのコードは 2D コンテキストにあります。そして、指定した色を使用して線を描きます。開始点として moveto() を使用し、終了点として lineto() を使用して線を描画します。これらのコードを使用して三角形のエッジ線を描くことができます。

三角形を描く

線を描くコードができたので、三角形を描くのは簡単です。 3本の線を描く方法を紹介します。

関数drawTriangle(ctx, color, x1, y1, x2, y2, x3, y3){

線を描画します(ctx, color, x1, y1, x2, y2);

線を描画します(ctx, color, x2, y2, x3, y3);

線を描画します(ctx, color, x3, y3, x1, y1);

}

次に、これらの行をまとめる必要があります。コードは次のようになります。

関数drawOnCanvas(){

var myCanvas = document.getElementById("キャンバス");

var ctx = myCanvas.getContext("2d");

三角形を描画します(ctx, "#FF0000", 10, 10, 10, 100, 100, 100);

}

次に、ラベルに対して「onload」イベントを実行する必要があります。

最後に、これを HTML ファイルとして保存すると、ブラウザで次の結果を表示できます。

要約:

この記事は、HTML5 キャンバス要素の非常に簡単な紹介です。 HTML5 には、まだ調査も理解もされていない要素が数多くあります。私たちは学び、理解し続ける必要があります。この記事が HTML5 を理解する助けになれば幸いです。この記事は、Jiumuwang の公式旗艦店 http://www.jiumw.com/ によって作成されたものです。転載の際はリンクをそのままにしておいてください。ありがとうございます!

元のタイトル: HTML5 Canvas グラフィック要素を使用してグラフィックを描画する方法

キーワード: HTML5 の使い方、Canvas、グラフィック要素、ピクセル描画、描画、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化

<<: 注文は理由もなく何度もキャンセルされ、Zouxiu.comは「違法な資金調達」の疑いをかけられた。

>>: SEO実践分析：外部リンクの誤解5つのグラフィック分析