基于canvas实现的多功能画板源码

本示例基于Canvas实现的多功能画板，在我们平时的应用项目中都会用到该代码。 所以共享出来供大家后续的项目上应用。

画板功能支持常用的，点，线，面的绘制。支持清除，保存，新建。

// 多边形
    poly.hover(function(){
        bian.fadeIn();
    },function(){
        bian.fadeOut();
    })

// 绘制形状
    typechoose.each(function(index,ele){
        $(ele).click(function(){
            typechoose.removeClass("typeactive");
            $(this).toggleClass("typeactive");
            cut.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
            copy.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
            type=$(this).attr("data");
            if($(this).is(".line")||$(this).is(".pen")){
                style="stroke";
                $(".stroke").addClass("styleactive");
                $(".fill").css({display:"none"}).removeClass("styleactive");
            }else{
                $(".fill").css({display:"block"});
            }
        })
    })
    // 描边、填充单击事件
    stylechoose.each(function(index,ele){
        $(ele).click(function(){
            style=$(this).attr("class");
            stylechoose.removeClass("styleactive");
            $(this).toggleClass("styleactive");
        })
    })
    // 剪切
    cut.click(function(){
        type=$(this).attr("data");
        typechoose.removeClass("typeactive");
        $(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");
        iscut=true;
    })
    copy.click(function(){
        type="cut";
        typechoose.removeClass("typeactive");
        $(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");
        iscut=false;
    })
    // 设置
    shezhi.each(function(index,ele){
        if($(ele).is(".cut")||$(ele).is(".copy")){
            return;
        }else{
            $(ele).click(function(){
                $(this).css({color:"#5bd219",backgroundColor:"#fff"}).animate({opacity:0.99},200,function(){
                    $(this).css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
                });
            })
        }
    })
    // 撤销
    back.click(function(){
        arr.pop();
        obj.clearRect(0,0,width,height);
        if(arr.length>0){
            obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
        }
    })
    // 清除
    clear.click(function(){
        arr=[];
        obj.clearRect(0,0,width,height);
    })
    // 保存
    save.click(function(){
        var reg=canvas.toDataURL("image/png");//跳转页面手动保存
//        var reg=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");//直接自动保存下载
        location.href=reg;
    })
    // 新建画布
    create.click(function(){
        xinjian.fadeIn();
    })
    create_close.click(function(e){
        e.stopPropagation()
        xinjian.fadeOut();
    })
    canvasWidth.οnblur=function(){
        if(this.value<=this.min){
            this.value=this.min;
        }
        if(this.value>=screenWidth-295){
            this.value=screenWidth-295;
        }
        width=this.value;
    }
    canvasHeight.οnblur=function(){
        if(this.value<=this.min){
            this.value=this.min;
        }
        if(this.value>=screenHeight-15){
            this.value=screenHeight-15;
        }
        height=this.value;
    }
    ding.οnclick=function(e){
        canvas.width=width;
        canvas.height=height;
        canvas.style.left=(screenWidth+295-canvas.width)/2+"px";
        canvas.style.top=(screenHeight-5-canvas.height)/2+"px";
        arr=[];
        obj.clearRect(0,0,width,height);
        e.stopPropagation()
        xinjian.fadeOut();
    }
    // 颜色选择
    colorchoose.οnchange=function(){
        color=this.value;
    }
    // 粗细改变
    widthchoose.οnchange=function(){
        linewidth=this.value;
    }
    //多边形边数
    polychoose.change(function(){
        n=this.value;
    })

完整源码下载地址： 基于canvas实现的多功能画板代码.zip-互联网文档类资源-CSDN下载