HTML5 Canvasのscale()メソッドでグリッドの単位を拡大・縮小する方法
HTML5のCanvasには、キャンバスのグリッド上の単位を拡大または縮小するための scale(x, y) メソッドが用意されています。このメソッドを活用することで、図形やビットマップを縮小・拡大した状態で描画できます。
scale()メソッドの基本
scale() メソッドは2つの引数を受け取ります。
- x: 水平方向の倍率
- y: 垂直方向の倍率
どちらの引数も正の数である必要があります。1より大きい値を指定すると拡大、0〜1の間の値を指定すると縮小されます。
サンプルコード
以下の例では、スピログラフ(サイクロイド曲線)をさまざまな倍率で描画しています。均等なスケーリングだけでなく、縦横それぞれ異なる倍率を指定した非均等なスケーリングの挙動も確認できます。
<!DOCTYPE HTML>
<html>
<head>
<script>
function drawShape(){
// DOMからcanvas要素を取得
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
// getContextで描画用コンテキストを取得
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0,0,300,300);
// 均等なスケーリング
ctx.save()
ctx.translate(50,50);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.translate(50,150);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
ctx.strokeStyle = "#cf0";
ctx.save()
ctx.translate(50,250);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(177.777,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.restore();
} else {
alert('このデモを表示するにはSafariまたはFirefox 1.5以降が必要です。');
}
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
}
while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
</script>
</head>
<body onload = "drawShape();">
<canvas id = "mycanvas" width = "400" height = "400"></canvas>
</body>
</html>実装のポイント
このコードでは、save() メソッドで現在の変換状態を保存し、restore() メソッドで元の状態に戻しています。scale() による変換は累積的に適用されるため、変換をリセットしたい場合は必ず save() と restore() を組み合わせて使用しましょう。
また、translate() で基準位置を移動してから scale() を呼び出すことで、意図した位置に拡大・縮小した図形を正確に配置できます。順序を逆にすると、スケーリングの影響で移動量自体も拡大・縮小されてしまうので注意してください。
-
HTML5 Canvasを使って星を描く方法を解説
HTMLのcanvas要素に描画を行うには、JavaScriptを使用します。実際に描き始める前に、HTML DOMメソッドであるgetElementById()とgetContext()を使って、キャンバスへの参照と描画コンテキストを取得しておく必要があります。HTMLで星を描くには、canvas要素を利用します。星形を描く際にはlineTo()メソッドが便利です。このメソッドはx座標とy座標の2つのパラメータを受け取り、その位置へ線を引くことで図形を形成していきます。まず、HTMLドキュメント内にキャンバスを配置する方法から見ていきましょう。サンプルコード以下のコードを実行すると、HTML
-
HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】
HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：