1 Shape.prototype = { 2 init: function () { 3 this.oGc.fillStyle = this.fillStyle; 4 this.oGc.strokeStyle = this.strokeStyle; 5 this.oGc.lineWidth = this.lineWidth; 6 }, 7 draw: function () { 8 var _this = this; 9 this.oCanvas.onmousedown = function ( ev ) { 10 _this.init(); 11 var oEvent = ev || event, 12 startX = oEvent.clientX - _this.oCanvas.offsetLeft, 13 startY = oEvent.clientY - _this.oCanvas.offsetTop; 14 _this.oCanvas.onmousemove = function ( ev ) { 15 _this.oGc.clearRect( 0, 0, _this.oCanvas.width, _this.oCanvas.height ); 16 var oEvent = ev || event, 17 endX = oEvent.clientX - _this.oCanvas.offsetLeft, 18 endY = oEvent.clientY - _this.oCanvas.offsetTop; 19 _this[_this.drawType](startX, startY, endX, endY); 20 }; 21 _this.oCanvas.onmouseup = function(){ 22 _this.oCanvas.onmousemove = null; 23 _this.oCanvas.onmouseup = null; 24 } 25 } 26 }, 27 line: function ( x1, y1, x2, y2 ) { 28 this.oGc.beginPath(); 29 this.oGc.moveTo( x1, y1 ); 30 this.oGc.lineTo( x2, y2 ); 31 this.oGc.closePath(); 32 this.oGc.stroke(); 33 }, 34 circle : function( x1, y1, x2, y2 ){ 35 this.oGc.beginPath(); 36 var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) ); 37 this.oGc.arc( x1, y1, r, 0, 2 * Math.PI, false ); 38 this.oGc.closePath(); 39 this.oGc[this.paintType](); 40 }, 41 rect : function( x1, y1, x2, y2 ){ 42 this.oGc.beginPath(); 43 this.oGc.rect( x1, y1, x2 - x1, y2 - y1 ); 44 this.oGc[this.paintType](); 45 }, 46 polygon : function( x1, y1, x2, y2 ){ r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) ); 49 this.oGc.beginPath(); 50 for( var i = 0; i < this.nums; i ++ ){ 51 this.oGc.lineTo( x1 + r * Math.cos( angle * i ), y1 + r * Math.sin( angle * i ) ); 52 } 53 this.oGc.closePath(); 54 this.oGc[this.paintType](); 55 } 56 }

3，界面操作很简单，基本是选项卡的操作+html5的自定义属性+classList的应用