function palette(canvas,ctx){ //初始化画布内部元素默认样式 this.strokeColor = 'red'; //默认选中红色触发颜色 this.fillColor = 'green'; //默认选中绿色填充色 this.style = 'tablet'; //默认选中直线形状 this.type = 'stroke'; //默认的绘制方式是划 this.ctx = ctx; //默认为绘图环境 this.canvas = canvas; //默认画布 this.canvasW = canvas.width; //默认画布宽 this.canvasH = canvas.height; //默认画布高 this.history = []; //默认的历史记录为数组, this.edges = '3'; //默认的边数为3 } 在切换绘图状态是都要对history 进行操作,不然将是两个不同画布的状态。 // 书写绘画函数 palette.prototype.drawing = function(){ //移动 if(move){ var that = this; this.canvas.onmousedown = function(e) { //鼠标移动画布的函数 moving=true; var point = getLocation(e.clientX,e.clientY); //var s = getnear(point.x, point.y); //console.log("+++++++++++"+s); $.each(draws, function(n, v) { restdraw(draws[n]); if(ctx.isPointInPath(point.x, point.y)){ console.log("======================"+n); // if(s==n){ moveItem = n; console.log(n); ctx.strokeStyle = "green"; //} } else { ctx.strokeStyle = "red"; } ctx.stroke(); }) } //获取鼠标移动时的坐标 canvas.onmousemove = function(e){ if( moving==false && moveItem < 0 ) { return; } p.ctx.clearRect(0, 0, p.canvasW, p.canvasH); var point = getLocation(e.clientX,e.clientY); $.each(draws, function(n, v) { if(n !== moveItem ){ ctx.strokeStyle = "red"; } else { ctx.strokeStyle = "green"; draws[n].l1=point.x-draws[n].l3/2; draws[n].l2=point.y-draws[n].l4/2; } restdraw(draws[n]); ctx.stroke(); }) } canvas.onmouseup = function(e){ moving = false; moveItem =-1; ctx.save(); that.history.push(that.ctx.getImageData(0,0,that.canvasW,that.canvasH)); } }else{ //绘图 var that = this; // console.log(this); this.canvas.onmousedown = function(e){ //鼠标移动画布的函数 // * 获取鼠标起始位置 var sx = e.offsetX; // 获取鼠标到时间源的宽度 // console.log(sx); var sy = e.offsetY; // 获取鼠标到时间源的高度 // console.log(sy); that.init(); //初始化样式 if(that.style=="tablet"){ that.ctx.beginPath(); // beginPath() 方法开始一条路径,或重置当前的路径 that.ctx.moveTo(sx,sy); // moveTo() 方法可把窗口的左上角移动到一个指定的坐标。 } // 获取鼠标移动时的坐标 canvas.onmousemove = function(e){ var mx = e.offsetX; // console.log(mx); var my = e.offsetY; // console.log(my); if (that.style!= "eraser") { that.ctx.clearRect(0, 0, that.canvasW, that.canvasH); // console.log(that.canvasW + ',' + that.canvasH); // 清除鼠标在画布移动的填充色 if(that.history.length>0){ //注:只能是that.history数组的长度大于0,才可以putImageData() that.ctx.putImageData(that.history[that.history.length-1],0,0); // putImageData() 方法将图像数据(从指定的 ImageData 对象)放回画布上。 } } // console.log(that.history.length); that[that.style](sx,sy,mx,my); } // 获取鼠标移走的坐标 canvas.onmouseup = function(){ that.history.push(that.ctx.getImageData(0,0,that.canvasW,that.canvasH)); // getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。 this.οnmοusemοve=null; // 清空鼠标移动事件 this.οnmοuseup=null; // 清空鼠标移出事件 } } } }