Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。
『円』を描画する
正円(真円)の輪郭
中心点から常に同じ感覚で集まった点が曲線になった物……雑に言うとまんまるな円を描きます。まずは輪郭を描きます。
実行例
ソース
<canvas id="board" width="300" height="150"></canvas>
<script>
window.onload = ()=>{
const board = document.querySelector("#board");
const ctx = board.getContext("2d");
ctx.beginPath();
ctx.arc(
100, // 中心点X
80, // 中心点Y
50, // 半径(radius)
0, // 円の描画開始角度(startAngle)
2 * Math.PI, // 円の描画終了角度(endAngle)
false // 時計回りか(false)、反時計周りか(true)。省略可能でデフォルトはfalse
);
ctx.stroke();
}
</script>
ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise])
- x, y
- 円の中心点(x, y)
- radius
- 円の半径
- startAngle
- 円弧の始まりの角度(ラジアン角)
- endAngle
- 円弧の終わりの角度(ラジアン角)
- anticlockwise
- 円弧を描画する方向。時計回りか(false)、反時計周りか(true)。省略可能でデフォルトはfalse。
正円(真円)を塗りつぶす
先ほどは輪郭だけでしたが、今度は塗りつぶしてみます。
実行例
左側が単純に円を塗りつぶした物、右側が塗りつぶしつつ枠線を描いた物になります。
ソース
<canvas id="board" width="300" height="150"></canvas>
<script>
window.onload = ()=>{
const board = document.querySelector("#board");
const ctx = board.getContext("2d");
//-------------------------------
// 塗りつぶし
//-------------------------------
ctx.beginPath();
ctx.arc(80, 70, 50, 0, 2 * Math.PI); // 円の描画
ctx.fillStyle = "Orange"; // 塗りつぶす色
ctx.fill(); // 塗りつぶし
//-------------------------------
// 塗りつぶし+輪郭
//-------------------------------
// 円の描画
ctx.beginPath();
ctx.arc(220, 70, 50, 0, 2 * Math.PI); // 円の描画
ctx.fillStyle = "Orange"; // 塗りつぶす色
ctx.fill(); // 塗りつぶし
// 輪郭の描画
ctx.strokeStyle = "Red"; // 輪郭の色
ctx.lineWidth = 10; // 輪郭の太さ
ctx.stroke(); // 描画
}
</script>
欠けた円
完全な円ではなく、一部分が欠落した円を描きます。こいつは単純にctx.arc()
の引数startAngle, endAngleを調整してやります。
実行例
ソース
<canvas id="board" width="300" height="300"></canvas>
<script>
window.onload = ()=>{
const board = document.querySelector("#board");
const ctx = board.getContext("2d");
let x = 100;
let y = 100;
let r = 100;
let startAngle = 0;
let endAngle = (255 * Math.PI) / 180;
ctx.beginPath();
ctx.arc(x, y, r, startAngle, endAngle, false);
ctx.lineTo(x, y);
ctx.fillStyle = "Orange";
ctx.fill();
}
</script>
参考ページ
- https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
- https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/arc
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。