多选框组件

最近总是觉得dom不太稳定，而且难调，所以用canvas画了个多选框，东西很简单咯，先上个图

蓝色的就是，背景颜色和勾选颜色都可以自定义，两次二次贝塞尔就完事了，还是贴下代码，毕竟在公司项目还可以用到

/**
 * 多选框组件
 * create by j.y.du 
 */

var du = this.du || {};
du.yue = this.du.yue || {};
du.yue.Checkbox = function()
{
	var _Checkbox = this;
	var _element = document.createElement("canvas");
	var _ctx;
	var _option = {
		checked : true,
		disabled : false,
		style : {
			backgroundColor : "#067cff",
			checkColor : "#fff",
			width : 30,
			height : 30,
			borderRadius : 3
		}
	};
	var _styleVo = {};
	var _changeMtds = [];
	Object.defineProperties(this, {
		element : { value : _element },
		addChangeEvent : {
			value : function(method)
			{
				if(Object.prototype.toString.call(method) == "[object Function]")
				{
					_changeMtds.push(method);
				}
			}
		},
		removeChangeEvent : {
			value : function(method)
			{
				var index = _changeMtds.indexOf(method);
				if(index != -1)
				{
					_changeMtds.splice(index, 1);
				}
			}
		}
	});
	_init();
	function _init()
	{
		if(!_element.getContext)
		{
			console.error("Your browser can't support canvas!");
			return;
		}
		_ctx = _element.getContext("2d");
		_initBean();
		_draw();
		_bindEvent();
	}
	function _initBean(){
		Object.defineProperty(_Checkbox, "checked", {
			set : function(param)
			{
				if(Object.prototype.toString.call(param) == "[object Boolean]")
				{
					_option.checked = param;
					_draw();
					_fire();
				}
			},
			get : function()
			{
				return _option.checked;
			}
		});
		Object.defineProperty(_Checkbox, "disabled", {
			set : function(param)
			{
				if(Object.prototype.toString.call(param) == "[object Boolean]")
				{
					_option.disabled = param;
					_option.disabled ? _unBindEvent() : _bindEvent();
				}
			},
			get : function()
			{
				return _option.disabled;
			}
		});
		Object.defineProperty(_Checkbox, "style", {
			set : function(param)
			{
				if(Object.prototype.toString.call(param) == "[object Object]")
				{
					for(var key in param)
					{
						if(_option.style.hasOwnProperty(key))
						{
							_Checkbox.style[key] = param[key];
						}
					}
				}
			},
			get : function()
			{
				return _styleVo;
			}
		});
		for(var key in _option.style)
		{
			_styleVo[key] = undefined;
			(function(k){
				Object.defineProperty(_Checkbox.style, k, {
					set : function(param)
					{
						_option.style[k] = param;
						_draw();
					},
					get : function()
					{
						return _option.style[k];
					}
				});
			})(key);
		}
	}
	function _draw()
	{
		var width = isNaN(_option.style.width) ? 50 : _option.style.width;
		_element.width = width;
		var height = isNaN(_option.style.height) ? 50 : _option.style.height;
		_element.height = height;
		_element.style.borderRadius = (isNaN(_option.style.borderRadius) ? "3px" : _option.style.borderRadius + "px"); 
		_ctx.save();
		_ctx.fillStyle = _option.style.backgroundColor;
		_ctx.fillRect(0, 0, width, height);
		if(_option.checked)
		{
			_ctx.strokeStyle = _option.style.checkColor;
			_ctx.lineWidth = width / 10;
			_ctx.lineCap = "round";
			_ctx.beginPath();
			_ctx.moveTo(width * 0.17, height * 0.5);
			_ctx.quadraticCurveTo(width * 0.36, height * 0.6, width * 0.4, height * 0.8);
			_ctx.quadraticCurveTo(width * 0.6, height * 0.6, width * 0.83, height * 0.2);
			_ctx.stroke();
			_ctx.closePath();
		}
		_ctx.restore();
	}
	function _bindEvent()
	{
		_element.addEventListener("mousedown", _mousedownEvent);
	}
	function _unBindEvent()
	{
		_element.removeEventListener("mousedown", _mousedownEvent);
	}
	function _fire()
	{
		for(var a = 0;a<_changeMtds.length;a++)
		{
			var changeMtd = _changeMtds[a];
			changeMtd.call(_Checkbox);
		}
	}
	function _mousedownEvent()
	{
		_Checkbox.checked = !_Checkbox.checked;
	}
	(Object.freeze || Object)(_Checkbox.style);
	(Object.freeze || Object)(_Checkbox);
}

如何使用？看过调色盘的估计都知道我的套路了

// 创建对象，添加在dom中
var checkboxVo = new du.yue.Checkbox();
document.body.appendChild(checkboxVo.element);
// 测试事件
var myDiv = document.getElementById("myDiv");
function changeCheck()
{
    if(this.checked)
    {
        myDiv.style.backgroundColor = "#fff000";
    }else
    {
        myDiv.style.backgroundColor = "#00ff00";
    }
}
checkboxVo.addChangeEvent(changeCheck);

欢迎各路神仙指点！