使用方法：

1、head引入css文件

<link href="css/penCutout.css" rel="stylesheet"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/penCutout.js"></script>

<script type="text/javascript">
$(function () {
	
	// 使用（通過init方法覆蓋默認屬性，并初始化事件）
	var _penCutout = new penCutout();
	_penCutout.init({
		//覆蓋屬性   
		drawPanel: "drawPanel",
		imgSrc: "file/target.jpg",
		penColor: "#ff40ef",
		width: 400,
		height: 400
	});
	//事件
	$("#btnPoints").click(function () {
		alert(JSON.stringify(_penCutout.can.pointList));
	})
	$("#btnCut").click(function () {
		_penCutout.createCutImg(function (imgSrcData, w, h) {
			$("#imgCutShow").attr("src", imgSrcData).css({"display": "block", "width": w, "height": h});
		})
	})
	$("#btnDown").click(function () {
		_penCutout.downLoad();
	})
	$("#redo").click(function () {
		_penCutout.ReDo();
	})
})
</script>

3、body引入HTML代碼

<div class="canvasDiv" id="drawPanel"></div>

<div class="tools">
    <input type="button" value="坐標" id="btnPoints">
    <input type="button" value="重做" id="redo"/>
    <input type="button" value="裁剪" id="btnCut"/>
    <input type="button" value="下載" id="btnDown"/>
</div>

<img id="imgCutShow">