Canavsに線を描画します。
ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。
『線』を描画する
直線
直線は非常にシンプルです。ctx.moveTo()で始点に移動し、ctx.lineTo()で指定した座標まで線を描画します。
実行例
- ctx.moveTo(x, y)
- x, y
- パスを描く際の座標を、指定した座標x,yに移動します。
- ctx.lineTo(x, y)
- x, y
- 終点を指定します。
ソース
<canvas id="board" width="300" height="150"></canvas>
<script>
window.onload = ()=>{
const board = document.querySelector("#board");
const ctx = board.getContext("2d");
ctx.beginPath();
ctx.moveTo(25, 25); // 始点に移動
ctx.lineTo(150, 100); // 終点
ctx.strokeStyle = "Orange"; // 線の色
ctx.lineWidth = 5; // 線の太さ
ctx.stroke();
}
</script>
円弧
ctx.arc()は円を描く際に利用しますが、完全な円ではなく曲線を描く際にも利用できます。円の描き方やctx.arc()の引数についての詳細は過去の記事を参照してください。
実行例
ソース
<canvas id="board" width="300" height="250"></canvas>
<script>
window.onload = ()=>{
const board = document.querySelector("#board");
const ctx = board.getContext("2d");
let x = 120; // 円の中心点X
let y = 120; // 円の中心点Y
let r = 100; // 円の半径
let startAngle = ( 60 * Math.PI) / 180; // 描画を開始する角度(ラジアン)
let endAngle = (240 * Math.PI) / 180; // 描画を終了する角度(ラジアン)
ctx.beginPath();
ctx.arc(x, y, r, startAngle, endAngle, false);
ctx.strokeStyle = "Orange"; // 線の色
ctx.lineWidth = 5; // 線の太さ
ctx.stroke();
}
</script>
ベジュ曲線
もっと柔軟に曲線を描きたい場合はベジュ曲線を利用します。AdobeのIllustratorなどを触ったことがある方にお馴染みのアイツです。JavaScriptに実装されているのは2次ベジュ曲線と3次ベジュ曲線の2つがあります。
2次ベジュ曲線は以下のように3つの点の座標を元に曲線を描画します。非常に雑な説明になりますが、制御点の場所が始点・終点から離れるほどカーブも急なものになっていきます。
3次ベジュ曲線は制御点が2つに増えたことにより、2次よりも複雑な曲線を描くことができます。
2次ベジュ曲線
実行例
2次ベジュ曲線はctx.quadraticCurveTo()で描くことができます。始点までctx.moveTo()で移動し制御点と終点を指定します。
ctx.quadraticCurveTo(cpx, cpy, x, y)
- cpx, cpy
- 制御点の座標を指定
- x, y
- 終点の座標を指定
ソース
<canvas id="board" width="300" height="250"></canvas>
<script>
window.onload = ()=>{
const board = document.querySelector("#board");
const ctx = board.getContext("2d");
// 座標を定義
let start = { x: 50, y: 20 }; //始点
let cp = { x: 230, y: 100 }; //制御点
let end = { x: 50, y: 200 }; //終点
ctx.beginPath();
ctx.moveTo(start.x, start.y); // 始点まで移動
ctx.quadraticCurveTo(cp.x, cp.y, end.x, end.y); // 2次ベジュ曲線を描画
ctx.strokeStyle = "Orange"; // 線の色
ctx.lineWidth = 5; // 線の太さ
ctx.stroke();
}
</script>
3次ベジュ曲線
実行例
3次ベジュ曲線はctx.bezierCurveTo()で描くことができます。2次ベジュ曲線と同様に始点までctx.moveTo()で移動し制御点2つと終点を指定します。
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
- cp1x, cp1y
- 制御点1の座標を指定
- cp2x, cp2y
- 制御点2の座標を指定
- x, y
- 終点の座標を指定
ソース
<canvas id="board" width="300" height="250"></canvas>
<script>
window.onload = ()=>{
const board = document.querySelector("#board");
const ctx = board.getContext("2d");
// 座標を定義
let start = { x: 50, y: 20 }; //始点
let cp1 = { x: 230, y: 30 }; //制御点1
let cp2 = { x: 150, y: 80 }; //制御点2
let end = { x: 250, y: 220 }; //終点
ctx.beginPath();
ctx.moveTo(start.x, start.y); // 始点まで移動
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); // 3次ベジュ曲線を描画
ctx.strokeStyle = "Cyan"; // 線の色
ctx.lineWidth = 5; // 線の太さ
ctx.stroke();
}
</script>
参考ページ
- https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
- https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineTo
- https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/moveTo
- https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/arc
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
