
JavaScript canvasで扇型を描画するサンプル
2019-01-204 min read
目次
概要
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で、0度から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();
デモ
これを応用して、ルーレットを作りました。
Recommends
New Posts
Hot posts!
Tags
Author