HTML 5 キャンバス

HTML 5 Canvas

Canvas 要素は、Web ページ上にグラフィックを描画するために使用されます。

キャンバスとは何ですか?

HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に画像を描画します。

キャンバスは、すべてのピクセルを制御できる長方形の領域です。

キャンバスには、パス、長方形、円、文字を描画したり、画像を追加したりするための複数の方法があります。

キャンバス要素を作成する

キャンバス要素をHTML5ページに追加します。

要素の ID、幅、高さを指定します:

JavaScript で描画

Canvas 要素自体には描画機能がありません。すべての描画作業は JavaScript 内で行う必要があります:

JavaScript は id を使用してキャンバス要素を検索します:

var c=document.getElementById("myCanvas");

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

var cxt= c .getContext("2d");

getContext("2d") オブジェクトは、パス、四角形、円、文字を描画し、画像を追加するための複数のメソッドを備えた組み込みの HTML5 オブジェクトです。

次の 2 行のコードは赤い四角形を描画します。

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle メソッドはそれを赤に染めます。形状、位置、サイズを指定します。

座標を理解する

上記の fillRect メソッドにはパラメータ (0,0,150,75) があります。

意味: キャンバス上に左上隅 (0,0) から開始して 150x75 の長方形を描画します。

下の画像に示すように、キャンバスの X 座標と Y 座標を使用して、キャンバス上に絵画を配置します。

     
  
把鼠标悬停在下面的矩形上可以看到坐标：
 
 
 
 
 
  

例 - 円

サイズ、色、位置を指定して円を描画します:

    Your browser does not support the canvas element.    

canvas要素:

 Your browser does not support the canvas element. 

例 - グラデーション

指定した色を使用してグラデーションの背景を描画します:

    Your browser does not support the canvas element.    

例 - 画像

画像をキャンバスに配置します:

    Your browser does not support the canvas element.