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/