HTMLのcanvasタグとは？使い方とサンプルコードで学ぶ図形描画の基礎

HTMLのcanvasタグとは

HTMLの<canvas>タグは、Webページ上にグラフィックを描画するための要素です。canvas自体は描画領域を確保するだけのため、実際に図形やアニメーションを描くにはJavaScriptなどのスクリプト言語と組み合わせて使用します。このタグはHTML5で新たに導入され、チャートの表示やゲーム開発、画像処理など、さまざまな場面で活用されています。

canvas要素には、描画領域のサイズを指定するための2つの属性があります。

height − キャンバスの高さ（ピクセル単位）
width − キャンバスの幅（ピクセル単位）

それでは、HTMLでcanvasタグを実装する具体的な例を見ていきましょう。

例1：長方形の描画

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border: 2px solid orange;">
</canvas>
<script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 20;
    ctx.shadowColor = "black";
    ctx.fillStyle = "green";
    ctx.fillRect(40, 40, 100, 250);
    ctx.shadowBlur = 30;
    ctx.shadowColor = "blue";
    ctx.fillStyle = "orange";
    ctx.fillRect(200, 40, 200, 150);
</script>
</body>
</html>

出力結果

HTMLのcanvasタグとは？使い方とサンプルコードで学ぶ図形描画の基礎

この例では、getContext("2d")メソッドで2D描画コンテキストを取得し、fillRect()を使って緑色とオレンジ色の長方形を描いています。また、shadowBlurとshadowColorを設定することで、図形に影効果を加えています。

次に、HTML5で二次曲線（ベジェ曲線）を描画する別の例を紹介します。

例2：二次曲線の描画

<!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タグとは？使い方とサンプルコードで学ぶ図形描画の基礎

この例では、quadraticCurveTo()メソッドを複数回呼び出すことで滑らかな曲線を組み合わせ、リーフ状の図形を描画しています。beginPath()でパスを開始し、moveTo()で始点を指定した後、各制御点と終点を指定して曲線を描き、最後にstroke()で輪郭線を表示しています。

このようにcanvasタグを使えば、基本的な図形から複雑な曲線まで自由に描画でき、JavaScriptと組み合わせることで動的なグラフィック表現も可能になります。

JavaScriptのNumber.toLocaleString()関数とは？使い方と実行例を解説

HTML CanvasのstrokeStyleプロパティの使い方を徹底解説

HTMLキャンバスのstroke()メソッドとは？使い方とサンプルコードを解説
HTMLキャンバスのstroke()メソッドは、定義されたパス（軌跡）を実際に描画するためのメソッドです。パスそのものはmoveTo()やlineTo()などのメソッドで定義しますが、この段階ではまだ画面には表示されません。stroke()を呼び出すことで、はじめて線として描き出されます。<canvas>要素の基本<canvas>要素を使うと、JavaScriptを通じてWebページ上に図形やグラフィックを自由に描画できます。canvas要素には、描画領域のサイズを指定する2つの属性があります。width：キャンバスの幅を指定height：キャンバスの高さを指定stro
HTML Canvasの基本を解説!図形や曲線を描画する方法
Webページ上にキャンバスを描画するには、HTML5の<canvas>要素を使用します。<canvas>要素を使うと、JavaScriptを通じてグラフィックスを自由に描画できます。線分、長方形、ベジェ曲線など、さまざまな図形を描くことが可能です。canvas要素の基本的な設定すべてのcanvas要素には、キャンバスのサイズを指定するためのheight(高さ)とwidth(幅)という2つの属性があります。さらに、JavaScriptからcanvas要素を操作できるように、id属性を設定する必要があります。以下のコード例をご覧ください。<canvas id = ne