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