1 function Shape(canvasObj, cxtObj, w, h) { 2 this.oCanvas = canvasObj; 3 this.oGc = cxtObj; 4 this.oCanvas.width = w; 5 this.oCanvas.height = h; 6 this.fillStyle = '#000'; 7 this.storkeStyle = '#000'; 8 this.lineWidth = 1; 9 this.drawType = 'line'; 10 this.paintType = 'stroke'; }

canvasObj: 就是canvas画布对象

cxtObj: 就是上下文绘图环境

w: canvas的宽度

h:  canvas的高度

fillStyle: 填充颜色

strokeStyle: 描边颜色

lineWidth: 线宽

drawType: 默认为画直线

paintType: stroke/fill 两种选择（ 描边/填充）

2，在原型对象上扩展一个公共方法draw用来绘制图形

draw方法，主要获取起始点坐标（startX, startY），以及终点坐标( endX, endY );

然后调用init方法来获取绘制状态，绘制具体的图形靠下面这个关键方法：

_this[_this.drawType](startX, startY, endX, endY)

这个方法的drawType会根据界面的实时选择，变换对应的绘制类型，如：

_this['line']( startX, startY, endX, endY )

调用的就是oShape对象中的line，画直线的方法