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

JavaScript
スポンサーリンク

スポンサーリンク

概要

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

解説

CanvasRenderingContext2D.arc()
Canvas 2D APIのCanvasRenderingContext2D.arc()メソッドは、パスに円弧を加えます。円弧の中心座標は(x, y)で半径がr、角度startAngleからendAngleまで、anticlockwiseの向きに描かれます(デフォルトは時計回り)。

扇型は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();

応用

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

回転ルーレットを作る JavaScript + canvas
概要JavaScriptとcanvasで回転するルーレットを作りました。Runボタンを押すと回転開始。stopボタンを押すと減速を始め、数秒後に停止します。ライブラリとかは使っていません。デモまずはデモをみてください。外...

JavaScript
スポンサーリンク
スポンサーリンク
スポンサーリンク
404 Motivation Not Found