绘制画板工具

 /** @type {HTMLCanvasElement} */ 
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');

 //获取全局变量

 var drawShapeObj = {
    shape:pickShape.value,  //形状
    color:pickColor.value, //颜色
    line:pickLine.value,  //线宽
    strokeFill:pickStroke.value,  //是填充还是描边
    clearWidth:pickClear.value //橡皮檫大小
};

//时间委托，更新变量
allStyleBox.addEventListener('change',function(ev){
    var target = ev.target,
        tag = target.getAttribute('tag');
        drawShapeObj[tag] = target.value;
})

//必须要设置canvas画布大小
canvas.width = document.documentElement.clientWidth;//设置为整个body的宽度
canvas.height = document.documentElement.clientHeight - 70;


function DragImg(fn){
    this.moving = false; //标记是否在拖动
    this.dis = {}; //鼠标点击时坐标点
    this.imageData = '';  //绘制完保存canvas图片
    canvas.onmousedown = (e)=>{
        this.moving = true;
        this.dis = {
            x:e.offsetX,
            y:e.offsetY
        }
    }
      canvas.onmousemove =(e)=>{
        if(!this.moving) {
            return;
        }  
        // drawShapeObj.shape 形状
        // this.common();
        
        this[drawShapeObj.shape](e);
        // fn && fn.call(e,dis); 
        // this.line(e);
        // this.rect(e);
      }
        canvas.onmouseup = (e)=>{
            this.moving = false;  
            // 通过 getImageData() 复制画布上指定矩形的像素数据
            this.imageData = ctx.getImageData(0,0,canvas.width,canvas.height); //鼠标松开获取绘制的图片
            console.log(this.imageData);
        }
   }
//公共的处理
DragImg.prototype.common = function(){
    //清除画布
    ctx.clearRect(0,0,canvas.width,canvas.height);
    //绘制之前的形状,通过 putImageData() 将图像数据放回画布
    this.imageData && ctx.putImageData(this.imageData,0,0);

    ctx.beginPath();
    ctx.lineWidth = drawShapeObj.line;
    ctx.strokeStyle = drawShapeObj.color;
    ctx.fillStyle = drawShapeObj.color;

}
//画线
DragImg.prototype.line = function(e){
    // //清除画布
    // ctx.clearRect(0,0,canvas.width,canvas.height);
    // //绘制之前的形状
    // this.imageData && ctx.putImageData(this.imageData,0,0);

    // ctx.beginPath();
    // ctx.lineWidth = drawShapeObj.line;
    // ctx.strokeStyle = drawShapeObj.color;

    this.common();
    ctx.moveTo(this.dis.x,this.dis.y);
    ctx.lineTo(e.offsetX,e.offsetY);
    console.log(e.offsetX);
    ctx.stroke();

}
//画矩形
DragImg.prototype.rect = function(e){
    this.common();
    var {x,y} = this.dis;
    // ctx.rect(this.dis.x,this.dis.y,Math.abs(e.offsetX-this.dis.x),Math.abs(e.offsetY-this.dis.y)); //路径
    ctx.rect(x,y,Math.abs(e.offsetX-x),Math.abs(e.offsetY-y)); //路径
    // ctx.stroke(); //描边
    ctx[drawShapeObj.strokeFill]();  //根据变量动态决定是描边还是填充 
}
//画圆
DragImg.prototype.circle = function(e){
    this.common();
    const {x,y} = this.dis;
    var radius = Math.abs(e.offsetX - x);
        ctx.arc(x,y,radius,0,2*Math.PI,true); 
        ctx[drawShapeObj.strokeFill](); 
} 

//清除
DragImg.prototype.clear = function(e){
    ctx.clearRect(e.offsetX,e.offsetY,drawShapeObj.clearWidth,drawShapeObj.clearWidth);
}

//清除区域
DragImg.prototype.cleararea = function(e){
    const {x,y} = this.dis;
    ctx.clearRect(x,y,Math.abs(e.offsetX-x),Math.abs(e.offsetY-y));
}
var p1 = new DragImg();