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

HTML Canvasの基本を解説!図形や曲線を描画する方法

Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。

canvas要素の基本的な設定

すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。

さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。

<canvas id = "newCanvas" width = "100" height = "100"></canvas>

次に、getElementById()メソッドを使って、DOMからcanvas要素を取得します。

var canvas = document.getElementById("newCanvas");

レンダリングコンテキストの取得

canvas上に何かを表示するには、スクリプトがまずレンダリングコンテキストにアクセスし、そこに描画を行う必要があります。<canvas>要素には、レンダリングコンテキストとその描画関数を取得するためのgetContextというDOMメソッドが用意されています。この関数は引数としてコンテキストの種類(2d)を1つ受け取ります。

パスを描画するサンプルコード

それでは、HTML5の<canvas>を使ってパスを描画する例を見てみましょう。このサンプルでは、円弧を組み合わせて顔のイラストを描いています。

サンプルコード

<!DOCTYPE HTML>
<html>
<head>
<style>
    #test {
        width: 100px;
        height:100px;
        margin: 0px auto;
        background-color: orange;
    }
</style>
<script>
    function drawShape() {
        // DOMを使ってcanvas要素を取得
        var canvas = document.getElementById('mycanvas');
        // canvasがサポートされていない場合は実行しない
        if (canvas.getContext) {
            // getContextで描画用のコンテキストを取得
            var ctx = canvas.getContext('2d');
            // 図形を描画
            ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2,true); // 外側の円
            ctx.moveTo(110,75);
            ctx.arc(75,75,35,0,Math.PI,false); // 口
            ctx.moveTo(65,65);
            ctx.arc(60,65,5,0,Math.PI*2,true); // 左目
            ctx.moveTo(95,65);
            ctx.arc(90,65,5,0,Math.PI*2,true); // 右目
            ctx.stroke();
        } else {
            alert('このデモを表示するにはSafariまたはFirefox 1.5以降が必要です。');
        }
    }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML Canvasの基本を解説!図形や曲線を描画する方法

二次曲線を描画するサンプルコード

続いて、HTML5の<canvas>を使って二次曲線(二次ベジェ曲線)を描画する例を紹介します。quadraticCurveTo()メソッドを連続して呼び出すことで、滑らかな曲線で構成された図形を描けます。

サンプルコード

<!DOCTYPE HTML>
<html>
<head>
<style>
    #test {
        width: 100px;
        height:100px;
        margin: 0px auto;
    }
</style>
<script type>
    function drawShape() {
        // DOMを使ってcanvas要素を取得
        var canvas = document.getElementById('mycanvas');
        // canvasがサポートされていない場合は実行しない
        if (canvas.getContext) {
            // getContextで描画用のコンテキストを取得
            var ctx = canvas.getContext('2d');
            // 図形を描画
            ctx.beginPath();
            ctx.moveTo(75,25);
            ctx.quadraticCurveTo(25,25,25,62.5);
            ctx.quadraticCurveTo(25,100,50,100);
            ctx.quadraticCurveTo(50,120,30,125);
            ctx.quadraticCurveTo(60,120,65,100);
            ctx.quadraticCurveTo(125,100,125,62.5);
            ctx.quadraticCurveTo(125,25,75,25);
            ctx.stroke();
        } else {
            alert('このデモを表示するにはSafariまたはFirefox 1.5以降が必要です。');
        }
    }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML Canvasの基本を解説!図形や曲線を描画する方法

まとめ

HTML5の<canvas>要素を使えば、JavaScriptだけで線分、円弧、二次曲線など多様な図形を描画できます。基本の流れは「canvas要素にidを設定 → getElementByIdで取得 → getContext('2d')でコンテキストを取得 → 描画メソッドで図形を描く」となります。この基本を押さえておけば、アニメーションやデータビジュアライゼーションなど、より高度なグラフィック表現にも応用できます。

  1. HTMLキャンバスのstroke()メソッドとは？使い方とサンプルコードを解説

    HTMLキャンバスのstroke()メソッドは、定義されたパス（軌跡）を実際に描画するためのメソッドです。パスそのものはmoveTo()やlineTo()などのメソッドで定義しますが、この段階ではまだ画面には表示されません。stroke()を呼び出すことで、はじめて線として描き出されます。<canvas>要素の基本<canvas>要素を使うと、JavaScriptを通じてWebページ上に図形やグラフィックを自由に描画できます。canvas要素には、描画領域のサイズを指定する2つの属性があります。width：キャンバスの幅を指定height：キャンバスの高さを指定stro

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

    HTML DOM Canvasオブジェクトは、HTML5で導入された<canvas>要素に関連付けられたオブジェクトです。<canvas>タグは、JavaScriptを使ってグラフィックを描画するためのもので、描画領域（コンテナ）として機能します。Canvas上では、線や円、矩形など、さまざまな図形を自由に描くことができます。 Canvasオブジェクトの主なプロパティ Canvasオブジェクトには、以下のようなプロパティが用意されています。 プロパティ説明 fillStyle図形の塗りつぶしに使用する色・グラデーション・パターンを設定または取得します。 st