JavaScript canvasで扇型を描画するサンプル

目次

1. 概要
2. 解説
3. デモ

概要

canvasで扇型を描画するサンプルを紹介します。

解説

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/arc

扇型はCanvas API の CanvasRenderingContext2D.arc()で描画することができます。 moveToメソッドで始点を与えることで扇型を描画することができます。

context.beginPath();
context.moveTo(150, 150);
context.fillStyle = '#f3f3f3';
context.arc(150, 150, 100, 0 * Math.PI / 180, 45 * Math.PI / 180, true);
context.fill();

サンプルソースはデモの座標と同じように(150, 150)を中心とし、半径が100で、０度から45度の扇型を描画します。

var canvas = document.getElementById('canvas');
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(150, 150);
context.fillStyle = '#3f7845';
context.arc(150, 150, 100, 20 * Math.PI / 180, 45 * Math.PI / 180, false);
context.fill();

デモ

これを応用して、ルーレットを作りました。

https://tech-blog.s-yoshiki.com/2019/01/1024/