canvasに円を描く

DrawCircle.js

////////////////////////////////////////////////////////////////////////////////
// DrawCircle / DrawArc
// canvasに円を描く
// 
// Copyright (c) 2010 Minoru Nakanow
// Licensed under the MIT licenses.
// http://www.opensource.org/licenses/mit-license.html
// 
// Usage:
// var circle = new DrawCircle(canvas);
// circle.point = new Point(150, 150, 100);
// circle.draw("blue", DrawCircle.toRadian(0), DrawCircle.toRadian(30));
// 
// var arc = new DrawArc(canvas);
// var point = new Point(200, 100, 50);
// arc.draw("#666", DrawCircle.toRadian(0), DrawCircle.toRadian(245), point, 20);
// 
////////////////////////////////////////////////////////////////////////////////
(function() {
	//--------------------------------------------------------------------------
	//  Point
	//--------------------------------------------------------------------------
	/**
	 * ポイントオブジェクト
	 * 
	 * @param {Number} x canvas上のX座標
	 * @param {Number} y canvas上のY座標
	 * @param {Number} radius 半径
	 */
	var Point = function(x, y, radius) {
		this.x = x;
		this.y = y;
		this.radius = radius;
	};
	
	//--------------------------------------------------------------------------
	//  Draw Circle
	//--------------------------------------------------------------------------
	/**
	 * 円を描画
	 * 
	 * @param {Object} canvas HTML Object
	 */
	var DrawCircle = function(canvas) {
		this.canvas;
		this.context;
		this.point;
		
		if (canvas) {
			this.canvas = canvas;
			this.context = canvas.getContext("2d");
		}
	};
	
	/**
	 * 角度をラジアンに変換
	 * 
	 * @param {Number} angle
	 * @return {Number}
	 */
	DrawCircle.toRadian = function(angle) {
		return angle * Math.PI / 180;
	};
	
	/**
	 * 描画のクリア
	 */
	DrawCircle.prototype.clear = function() {
		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
	};
	
	/**
	 * 円の描画
	 * 
	 * @param {String} color 描画色
	 * @param {Number} start 円弧の開始角度
	 * @param {Number} end 円弧の終了角度
	 */
	DrawCircle.prototype.draw = function(color, start, end) {
		var context = this.context;
		var point = this.point;
		var x = -point.y;
		var y = point.x;
		var r = point.radius;
		
		context.save();
		context.rotate(-Math.PI/2);
		context.fillStyle = color; 
		context.beginPath();
		context.moveTo(x, y);
		context.arc(x, y, r, start, end, false);
		context.closePath();
		context.fill();
		context.restore();
	};
	
	//--------------------------------------------------------------------------
	//  Draw Arc
	//--------------------------------------------------------------------------
	/**
	 * 円弧を描画
	 * 
	 * @param {Object} canvas
	 */
	var DrawArc = function (canvas) {
		this.canvas;
		this.context;
		this.point;
		
		this.clear = DrawCircle.prototype.clear;
		this._draw = DrawCircle.prototype.draw;
		
		if (canvas) {
			this.canvas = canvas;
			this.context = canvas.getContext("2d");
		}
	};
	
	/**
	 * ポイントオブジェクトの取得
	 * 
	 * @return {Point}
	 */
	DrawArc.prototype.getPoint = function() {
		return new Point(this.point.x, this.point.y, this.point.radius);
	};
	
	/**
	 * ポイントオブジェクトの更新
	 * 
	 * @param {Point} point
	 */
	DrawArc.prototype.setPoint = function(point) {
		this.point = new Point(
			point.x || this.point.x,
			point.y || this.point.y,
			point.radius || this.point.radius
		);
	};
	
	/**
	 * 円弧の描画
	 * 
	 * @param {String} color 描画色
	 * @param {Number} start 円弧の開始角度
	 * @param {Number} end 円弧の終了角度
	 * @param {Point} point 描画位置のポイントオブジェクト
	 * @param {Number} width 線の幅
	 * @param {String} fillColor 塗潰し色
	 */
	DrawArc.prototype.draw = function(color, start, end, point, width, fillColor) {
		this.setPoint(point);
		this._draw(color, start, end);
		this.setPoint({radius: point.radius - width});
		this._draw(fillColor || "#fff", 0, Math.PI * 2);
	};
	
	//--------------------------------------------------------------------------
	//  Accessor
	//--------------------------------------------------------------------------
	window.Point = Point;
	window.DrawCircle = DrawCircle;
	window.DrawArc = DrawArc;
	
})();