HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Canvasオブジェクトとは？プロパティ・メソッドと図形描画の実例を解説

HTML DOM Canvasオブジェクトは、HTML5で導入された<canvas>要素に関連付けられたオブジェクトです。<canvas>タグは、JavaScriptを使ってグラフィックを描画するためのもので、描画領域（コンテナ）として機能します。Canvas上では、線や円、矩形など、さまざまな図形を自由に描くことができます。

Canvasオブジェクトの主なプロパティ

Canvasオブジェクトには、以下のようなプロパティが用意されています。

プロパティ説明
fillStyle図形の塗りつぶしに使用する色・グラデーション・パターンを設定または取得します。
strokeStyle線（ストローク）に使用する色・グラデーション・パターンを設定または取得します。
shadowColor影に使用する色を設定または取得します。
shadowBlur影のぼかし具合（レベル）を設定または取得します。
shadowOffsetX図形から影までの水平方向の距離を設定または取得します。
shadowOffsetY図形から影までの垂直方向の距離を設定または取得します。

Canvasオブジェクトの主なメソッド

Canvasオブジェクトでよく使われるメソッドは以下の通りです。

メソッド説明
createLinearGradient()線形グラデーションを作成します。
createPattern()指定した要素を一定方向に繰り返してパターンを作成します。
createRadialGradient()円形（放射状）グラデーションを作成します。
addColorStop()グラデーション内に色の変化点（カラーストップ）を追加します。

構文

Canvasオブジェクトを新しく作成する場合の基本的な構文は以下の通りです。

var x = document.createElement("CANVAS");

サンプルコード

それでは、HTML DOM Canvasオブジェクトを使った具体的な例を見てみましょう。ボタンをクリックすると、緑色の円が描かれたキャンバスが生成される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px double blue;
        margin: 1em;
    }
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>上のボタンをクリックすると、緑色の円が入ったCANVAS要素が作成されます</p>
<script>
    function createCanvas() {
        var x = document.createElement("CANVAS");
        var ctx = x.getContext("2d");
        ctx.fillStyle = "#C7EA46";
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();
        document.body.appendChild(x);
    }
</script>
</body>
</html>

出力結果

このコードを実行すると、最初は次のように表示されます。

HTML DOM Canvasオブジェクトとは？プロパティ・メソッドと図形描画の実例を解説

「CREATE」ボタンをクリックすると、緑色の円が描かれたキャンバスがページに追加されます。

HTML DOM Canvasオブジェクトとは？プロパティ・メソッドと図形描画の実例を解説

コードの解説

まず、クリックされるとcreateCanvas()関数を実行するボタンを配置しています。

<button onclick="createCanvas()">CREATE</button>

createCanvas()関数の中では、まずdocument.createElement()によって新しい<canvas>要素を生成しています。続いて、getContext()メソッドを使って、作成したキャンバスの描画コンテキストを取得します。なお、1つのキャンバス要素に対して関連付けられるコンテキストは1つだけです。getContext("2d")の引数「2d」は、2D図形を描画するためのコンテキストを意味します。

その後、fillStyleで塗りつぶしの色を設定し、beginPath()メソッドでパスの描画を開始します。

さらに、arc()メソッドで円の中心座標・半径・角度を指定して円を定義し、fill()で先ほど設定した色で塗りつぶします。最後にstroke()メソッドで実際にキャンバスへ描画を行い、appendChild()メソッドを使って、完成したキャンバスをbody要素の子要素としてページに追加しています。

function createCanvas() {
    var x = document.createElement("CANVAS");
    var ctx = x.getContext("2d");
    ctx.fillStyle = "#C7EA46";
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    document.body.appendChild(x);
}
  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注