HTML5のCanvas 2Dを利用して直線を描く
Canvas 2Dを表示するためのHTML文書は次のとおり。body要素の中にcanvas要素を設け、id属性とCanvasの大きさをwidth（幅）とheight（高さ）で指定する。このid名はJavaScriptのソースから参照するために使う。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvasを学ぶ</title> </head> <body> <canvas id="canvas" width="350" height="350"> あなたのブラウザはCanvas要素に対応していません。 </canvas> <script type="text/javascript" src="canvas_straight_line.js"></script> </body> </html>
canvas_straight_line.jsという名のファイルに次のようなコードを記述して保存。最初の2行はCanvasで2D画を描くときのお決まりのコード。lineWidthプロパティで線幅を指定している。beginPathメソッドで初期化。moveToメソッドの引数で線の視点をxy座標の値として指定し、lineToメソッドの引数で線の終点をxy座標の値として指定している。xy座標系はCanvasの左上端が(0,0)となる。そこから下へ伸びるほど(0,100)のようにyの値が増し、右へ伸びるほど(100,0)のようにxの値が増す。そして最後にstrokeメソッドを使って線を描いている。
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// x軸
context.beginPath(); //パスのリセット
context.lineWidth = 1; //線幅
let mx = 10;
let my = 10;
let lx = 10;
let ly = 300;
context.moveTo(mx, my); //線の始点
context.lineTo(lx, ly); //線の終点
context.stroke(); //描画
// y軸
context.lineWidth = 1;
context.beginPath();
mx = 10;
my = 300;
lx = 300;
ly = 300;
context.moveTo(mx, my);
context.lineTo(lx, ly);
context.stroke();
// 正比例線
context.lineWidth = 1;
context.beginPath();
mx = 10;
my = 300;
lx = 300;
ly = 10;
context.moveTo(mx, my);
context.lineTo(lx, ly);
context.stroke();
この結果はこうなる。
次は格子状に直線を引くコード。繰り返し線を引くためにfor文を用いている。
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
const topMargin = 5.5; // 上余白
const leftMargin = 5.5; // 左余白
const verticalGridNum = 13; // 垂直枠の数
const horizontalGridNum = 13; // 水平枠の数
const gridSize = 25; // 枠線間の幅
context.beginPath(); // パスの初期化
context.lineWidth = 1; // 枠線の太さ
context.strokeStyle = "black"; // 枠線の色
// 垂直枠線の開始位置
let verticalMx = leftMargin; // x座標
let verticalMy = topMargin; // y座標
// 垂直枠線の終了位置
let verticalLx = leftMargin; // x座標
let verticalLy = topMargin + (gridSize * verticalGridNum); // y座標
// 垂直の枠線を描く
for (let i = 0; i <= horizontalGridNum; i++) {
context.moveTo(verticalMx, verticalMy); // 枠線の始点
context.lineTo(verticalLx, verticalLy); // 枠線の終点
context.stroke(); // 描画
verticalMx = verticalMx + gridSize;
verticalLx = verticalLx + gridSize;
}
// 水平枠線の開始位置
let horizontalMx = leftMargin; // x座標
let horizontalMy = topMargin; // y座標
// 水平枠線の終了位置
let horizontalLx = leftMargin + (gridSize * horizontalGridNum); // x座標
let horizontalLy = topMargin; // y座標
// 水平の枠線を描く
for (let i = 0; i <= verticalGridNum; i++) {
context.moveTo(horizontalMx, horizontalMy); // 枠線の始点
context.lineTo(horizontalLx, horizontalLy); // 枠線の終点
context.stroke(); // 描画
horizontalMy = horizontalMy + gridSize;
horizontalLy = horizontalLy + gridSize;
}
この結果はこうなる。
まとめ
- パス
- 図形の見えない下書きのようなもの。この見えない設計図に基づいて図形が実際に描かれる。1つのキャンバスには1つのカレントパスがあり、その中に複数のサブパスを設計できる構造になっている。
- beginPath()
- カレントパスをリセットする。その際、サブパスもすべて消去する。パスを使って2D図形を描くときに最初に使うお決まりのメソッド。見えない下書きが消されるだけなので描画された図形が消えるわけではない。
- lineWidth
- 線分の幅をピクセル値で指定する。
- moveTo(x, y)
- 直線のサブパスの始点を座標で指定する。xが縦軸、yが横軸。いずれもdouble型。座標系は左上端が(0,0)となる。
- lineTo(x, y)
- 直線のサブパスを作成する。引数は座標。xが縦軸、yが横軸。いずれもdouble型。座標系は左上端が(0,0)となる。
- stroke()
- 指定されたパスに基づいてその線分を描画する。
コメント
コメントを投稿