浅谈HTML5中的Canvas基本绘图API简易封装和使用(一)

     HTML5的Canvas的功能可谓是非常强大，它可以做出很多炫酷的效果，从而更好的增加用户的体验。今天我们就来一起看下HTML5一些常用的API,个人根据实际的使用把它再次进行一次封装，使用起来感觉更方便，可能封装的不全面，但是这个个人感觉后期可以自动添加，主要给自己复习使用，第一次发H5博客，菜鸟一枚，初识H5.

MikyouCanvas.js(自己封装的Canvas的Js库)

var mCanvas; //声明Canvas对象;
var cxt; //声明context对象,该对象拥有丰富的绘图的API
function initMikyouCanvas(mCanvas, cxt) {
	this.mCanvas = mCanvas;
	this.cxt = cxt;
}
/**
 * 1、绘制矩形(主要分为:绘制填充矩形和绘制边框矩形和清除矩形区域(利用isClear标记是否绘制清除矩形，实际上就是绘制一个与画布背景色一致的矩形区域),利用isFill变量来标记)
 * 主要使用canvas原生的API:FillRect(x,y,width,height),StrokeRect(x,y,width,height),ClearRect(x,y,width,height)
 * 自己封装的参数:drawRect(x,y,width,height,isClear,isFill,bgColor)
 * x:矩形起点的X坐标(注意：相对坐标系是以画布的左上角为原点，向右为X坐标正方向，向下为Y坐标的正方向)
 * y:矩形终点的Y坐标
 * width:矩形的宽度
 * height:矩形的高度
 * isClear:是否绘制清除画布的矩形区域，true则就是绘制一个清除画布矩形区域，false就是绘制其他两种矩形
 * isFill:是否是填充，false为绘制边框，true为绘制填充
 * bgColor:矩形的颜色，若为填充则为整个矩形背景色，边框则为边框色
 * */
function drawRect(x, y, width, height, isClear, isFill, bgColor) {
	if (isClear) { //为true表示绘制清除画布的矩形区域,那么传入的isFill, bgColor值可以为任意值
		cxt.clearRect(x, y, width, height);
	} else { //false
		if (isFill) { //为true，则绘制填充矩形
			cxt.fillStyle = bgColor;
			cxt.fillRect(x, y, width, height);
		} else { //为false,则绘制边框矩形
			cxt.strokeStyle = bgColor;
			cxt.strokeRect(x, y, width, height);
		}
	}

}
/**
 * 2、绘制圆弧(主要分为：绘制填充圆弧和绘制圆弧边框利用isFill变量来标