HTML5のdrawImage()メソッドを使ってCanvasに画像を描画する方法

HTML5の drawImage() メソッドは、キャンバス（canvas）上に画像・別のcanvas・動画などを描画するために使用します。画像の一部だけを切り取って描画することもでき、描画時にサイズを拡大・縮小することも可能です。

drawImage()メソッドのパラメータ一覧

drawImage() メソッドで指定できるパラメータとその説明は以下の通りです。

番号	パラメータと説明
1	img 描画対象となる画像（image）、canvas、または video を指定します。
2	sx クリッピング（切り抜き）を開始するx座標。省略可能です。
3	sy クリッピングを開始するy座標。省略可能です。
4	swidth 切り抜いた画像の幅。省略可能です。
5	sheight 切り抜いた画像の高さ。省略可能です。
6	x canvas上に画像を配置する位置のx座標。
7	y canvas上に画像を配置する位置のy座標。
8	width 描画する画像の幅。
9	height 描画する画像の高さ。

サンプルコード

次のコードを実行すると、drawImage() メソッドを使って画像を描画し、一定間隔で回転させるアニメーションの動作を確認できます。

<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
    var pattern = new Image();
    function animate() {
        pattern.src = '/html5/images/pattern.jpg';
        setInterval(drawShape, 100);
    }
    function drawShape() {
        // DOMからcanvas要素を取得
        var canvas = document.getElementById('newCanvas');
        // canvasがサポートされていない場合は実行しない
        if (canvas.getContext) {
            // getContextで2D描画コンテキストを取得
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.save();
            ctx.translate(150,150);
            var time = new Date();
            ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
            ctx.translate(0,28.5);
            // drawImage()で画像を描画
            ctx.drawImage(pattern,-3.5,-3.5);
            ctx.restore();
        }
        else {
            alert('このデモを見るには Safari または Firefox 1.5 以降が必要です。');
        }
    }
</script>
</head>
<body onload = "animate();">
<canvas id = "newCanvas" width = "400" height = "400"></canvas>
</body>
</html>

このサンプルでは、setInterval() によって100ミリ秒ごとに drawShape() 関数が呼び出され、現在時刻をもとに計算した角度でパターン画像が回転しながら描画されます。ctx.save() と ctx.restore() を組み合わせることで、座標変換や回転の状態を毎フレーム元に戻しており、アニメーションが正しく繰り返される仕組みになっています。

【初心者向け】HTML5 SVGで円を描く方法をわかりやすく解説

HTML5で円形（放射状）グラデーションを描く方法【createRadialGradient()徹底解説】

HTML5のarc()メソッドで円を描く方法をわかりやすく解説
HTML5では、<canvas>要素とarc()メソッドを組み合わせることで、簡単に円を描くことができます。完全な円を描きたい場合は、開始角度を「0」、終了角度を「2 * Math.PI」に指定するのがポイントです。 arc()メソッドのパラメータ一覧 arc()メソッドには、以下の6つのパラメータを渡します。 No.パラメータ説明 1x円の中心のx座標 2y円の中心のy座標 3r円の半径 4startingAngle描画開始の角度（ラジアン単位） 5endingAngle描画終了の角度（ラジアン単位） 6counterclockwise（true / false）反時計回りに
HTML5のlineTo()メソッドで線を描画する方法
HTML5のlineTo()メソッドで線を描画する方法HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。beginPath(): 新しいパスの作成を開始するmoveTo(): 線の始点となる座標を指定するlineTo(): 線の終点となる座標を指定するstroke(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ