html5画板的使用方法和功能,前端<canvas>实现画板功能

效果图

```javascript

画板

body,html{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0 no-repeat; background-size: cover; overflow: hidden; font-family: "Microsoft yahei"; background-color: #fff;-webkit-user-select: none;

-moz-user-select:none;

-o-user-select:none;

-ms-user-select:none; }

li{ list-style-type: none; }

ul{ padding-left: 10px }

h1{

position:fixed;

left:15px;

top:5px;

width:250px;

height:60px;

color: #ff5e83;

font-size:26px;

line-height:60px;

text-align:center;

background-color:;

}

canvas{ position: fixed; left: 280px; top: 5px; display: block; cursor: pointer; background-color: #FFFFFF; border: 1px solid #CCCCCC; }

.container{

width:250px;

height:60px;

position:fixed;

left:15px;

top:70px;

}

.container h2{

width:100%;

height:60px;

font-size:22px;

text-align:center;

color: #ff377e;

font-weight:normal;

line-height:60px;

border-bottom:1px solid #000;

}

.container h3{

width:100%;

height:30px;

font-size:18px;

text-align:center;

color: #41b1ff;

font-weight:normal;

line-height:30px;

}

.row{ width: 100%; height: auto; background-color: rgba(192,192,192,0.50); overflow: hidden;        }

.type{

width:100%;

height:auto;

margin:20px 0;

padding-bottom:10px;

border-bottom:1px solid #fff;

}

.type:after{

content:"";

display:block;

clear:both;

}

.type li{

float:left;

width:90px;

height:45px;

margin:0 auto;

background-color:#0078ff;

color:#fff;

font-size:18px;

line-height:45px;

text-align:center;

margin-bottom:15px;

border-radius:5px;

cursor:pointer;

transition:all 0.7s;

}

.type li:hover{

background-color:#fff;

color:#0078ff;

box-shadow:0 0 10px rgba(0, 120, 255, 0.77);

}

.type .typeactive{

background-color:#fff;

color:#0078ff;

box-shadow:0 0 10px rgba(0, 120, 255, 0.77);

}

.type li:nth-child(odd){

margin-left:25px;

}

.type li:nth-child(even){

margin-left:20px;

}

.style{

width:100%;

height:40px;

}

.style li{

float:left;

width:90px;

height:45px;

background-color:#FFBC00;

color:#fff;

font-size:18px;

line-height:45px;

text-align:center;

border-radius:5px;

cursor:pointer;

transition:all 0.7s;

}

.style li:hover{

color: #ffa800;

background-color:#fff;

box-shadow:0 0 10px rgba(255, 232, 95, 0.77);

}

.style .styleactive{

color: #ffa800;

background-color:#fff;

box-shadow:0 0 10px rgba(255, 232, 95, 0.77);

}

.style li:nth-child(1){

margin-left:25px;

}

.style li:nth-child(2){

margin-left:20px;

}

.poly{

position:relative;

}

.bian{

position:absolute;

left:100px;top:0;

width:90px;

height:auto;

border-radius:5px;

background-color:#EC494E;

overflow:hidden;

overflow:hidden;

transform:scale(1.2);

display:none;

}

.bian span{

display:block;

float:left;

width:40px;

height:45px;

font-size:16px;

color:#fff;

text-align:center;

line-height:40px;

color:#fff;

transition:all 0.7s;

}

.bian input{

float:left;

width:45px;

height:35px;

margin-top:5px;

border:1px solid #fff;

box-sizing:border-box;

text-align:center;

line-height:40px;

font-size:18px;

color:#fff;

background:#EC494E;

border-radius:3px;

box-shadow:0 0 0 4px #fff inset;

transition:all 0.7s;

}

.cut,.create,.back{

float:left;

width:90px;

height:45px;

margin-left:25px;

margin-bottom:15px;

background-color: #5bd219;

color:#fff;

font-size:18px;

line-height:45px;

text-align:center;

border-radius:5px;

cursor:pointer;

}

.copy,.clear,.save{

float:left;

width:90px;

height:45px;

margin-left:20px;

margin-bottom:15px;

background-color: #5bd219;

color:#fff;

font-size:18px;

line-height:45px;

text-align:center;

border-radius:5px;

cursor:pointer;

}

.shezhi{

transition:all 0.7s;

}

.shezhistyle{

background:#fff;

color:#5bd219;

}

.create{

position:relative;

}

.xinjian{

position:absolute;

left:0;top:0;

width:200px;

height:165px;

border-radius:5px;

background-color:#EC494E;

box-shadow:0 0 15px rgba(236, 73, 78, 0.76);

cursor:default;

display:none;

}

.xinjian:hover{

color:#fff;

}

.xinjian_before{

position:absolute;

right:0;

top:0;

width:20px;

height:20px;

color:#fff;

line-height:16px;

text-indent:-1px;

font-size:30px;

border:1px solid #fff;

transform:rotate(45deg);

border-radius:50%;

cursor:pointer;

}

.xinjian h6{

width:100%;

height:50px;

color:#fff;

line-height:50px;

text-align:center;

font-size:20px;

font-weight:normal;

}

#ding{

width:60px;

height:30px;

font-size:14px;

border-radius:3px;

color:#fff;

background-color:#0078ff;

border:0;

outline:none;

cursor:pointer;

box-shadow:0 0 10px rgba(0, 120, 255, 0.5);

}

.xinjian_width,.xinjian_height{

float:left;

width:85px;

height:40px;

margin-left:10px;

border-radius:5px;

margin-bottom:20px;

background-color:#FFBC00;

}

.xinjian_width:hover,.xinjian_height:hover{

background-color:#fff;

color:#000;

}

.xinjian_width span,.xinjian_height span{

float:left;

width:30px;

height:100%;

font-size:16px;

text-align:center;

line-height:40px;

}

.xinjian_width input,.xinjian_height input{

float:left;

margin-top:5px;

width:50px;

height:30px;

text-align:center;

line-height:30px;

font-size:14px;

border:1px solid #FFBC00;

box-sizing:border-box;

}

.box{

float:left;

width:90px;

height:auto;

background-color:#EC494E;

overflow:hidden;

border-radius:5px;

transition:all 0.7s;

}

.box{

margin-left:25px;

}

.linewidth{

margin-left:20px;

}

.box:hover{

background-color:#fff;

}

.box span{

display:block;

float:left;

width:40px;

height:45px;

font-size:16px;

color:#fff;

text-align:center;

line-height:40px;

color:#fff;

transition:all 0.3s;

}

.box input{

float:left;

width:45px;

height:35px;

margin-top:5px;

border:1px solid #fff;

box-sizing:border-box;

text-align:center;

line-height:40px;

font-size:18px;

color:#fff;

background:#EC494E;

border-radius:3px;

box-shadow:0 0 0 4px #fff inset;

transition:all 0.3s;

}

.box2 span{

width:55px;

}

.box2 input{

width:140px;

}

.space{

float:left;

width:100%;

height:0;

border-bottom:1px solid #fff;

margin:20px 0;

}

画板

• 直   线
• 矩   形
• 圆   圈
• 铅   笔
• 多 边 形
  边数
• 橡   皮

• 描   边
• 填   充

颜色

线宽

新   建

画 板 尺 寸

宽

高

+

清   空

撤   销

保   存

剪   切

复   制

function Draw(obj,setting){this.obj=obj;this.type=setting.type||"stroke";this.color=setting.color||"#000";this.width=setting.width||"1";}

Draw.prototype={init:function(){this.obj.strokeStyle=this.color;this.obj.fillStyle=this.color;this.obj.lineWidth=this.width;},rect:function(x,y,x1,y1){this.init();this.obj.beginPath();this.obj.rect(x,y,x1-x,y1-y);if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}},line:function(x,y,x1,y1){this.init();this.obj.beginPath();this.obj.moveTo(x,y);this.obj.lineTo(x1,y1);this.obj.stroke();},circle:function(x,y,x1,y1){this.init();var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));this.obj.beginPath();this.obj.arc(x,y,r,0,2*Math.PI);if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}},poly:function(x,y,x1,y1,n){this.init();var obj=this.obj;var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));;obj.save();obj.translate(x,y);obj.rotate(Math.PI/2);var nx=r*Math.cos(Math.PI/n);var ny=r*Math.sin(Math.PI/n);obj.beginPath();obj.lineCap="round";obj.moveTo(nx,ny);for(var i=0;i<=n;i++){obj.rotate(Math.PI*2/n);obj.lineTo(nx,-ny);}

if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}

obj.restore();},pen:function(x,y,x1,y1){this.init();this.obj.save();this.obj.lineCap="round";this.obj.lineTo(x1,y1);this.obj.stroke();this.obj.restore();},eraser:function(x,y,x1,y1){this.obj.lineCap="round";this.obj.clearRect(x1-5,y1-5,10,10);},cut:function(x,y,x1,y1){this.init();this.obj.save();this.obj.setLineDash([4,2]);this.obj.beginPath();this.obj.lineWidth=1;this.obj.rect(x,y,x1-x,y1-y);this.obj.stroke();this.obj.restore();}}

var container=$(".container");

var canvas=document.querySelector("canvas");

var screenWidth=document.documentElement.clientWidth;

var screenHeight=document.documentElement.clientHeight;

var width=screenWidth-295;

var height=screenHeight-15;

canvas.width=width;

canvas.height=height;

var obj=canvas.getContext("2d");

var typechoose=$(".type li");

var stylechoose=$(".style li");

var colorchoose=document.querySelector("input[type=color]");

var widthchoose=document.querySelector(".linewidth input[type=number]");

var canvasWidth=document.querySelector(".xinjian_width input[type=number]");

var canvasHeight=document.querySelector(".xinjian_height input[type=number]");

canvasWidth.value=width;canvasHeight.value=height;

canvasWidth.max=screenWidth-295;canvasHeight.max=screenHeight-15;

var ding=document.querySelector("#ding");

var poly=$(".poly");

var bian=$(".bian");

var polychoose=$(".bian input");

var shezhi=$(".shezhi");

var cut=$(".cut");

var copy=$(".copy");

var back=$(".back");

var clear=$(".clear");

var save=$(".save");

var create=$(".create");

var xinjian=$(".xinjian");

var create_close=$(".xinjian_before");

var cutflag=false;

var iscut=true;

var color="#000";

var type="line";

var n=3;

var linewidth="1";

var style="stroke";

var arr=[];

$(".fill").css({display:"none"});

// 多边形

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;

})

var x,y,w,h;

var lx,ly,lw,lh;

var cutdata;

canvas.οnmοusedοwn=function(e){

x=e.offsetX;

y=e.offsetY;

if(type=="pen"){

obj.beginPath();

obj.moveTo(x,y);

}

if(type=="eraser"){

obj.clearRect(x-5,y-5,10,10);

}

if(cutflag&&type=="cut"){

if(arr.length!=0){

arr.splice(-1,1);

}

}

var draw=new Draw(obj,{type:style,color:color,width:linewidth});//实例化构造函数

canvas.οnmοusemοve=function(e){

w=e.offsetX;

h=e.offsetY;

if(type!="eraser"){

obj.clearRect(0,0,width,height);

if(arr.length!=0){

obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);

}

}

if(cutflag&&type=="cut"){

if(iscut){

obj.clearRect(lx,ly,lw-lx,lh-ly);

}

var nx=lx+(w-x);

var ny=ly+(h-y);

obj.putImageData(cutdata,nx,ny);

}else if(type=="poly"){

draw[type](x,y,w,h,n);

}else{

draw[type](x,y,w,h);

}

}

document.οnmοuseup=function(){

canvas.οnmοusemοve=null;

document.οnmοuseup=null;

if(type=="cut"){

if(!cutflag){

cutflag=true;

cutdata=obj.getImageData(x+1,y+1,w-x-2,h-y-2);

lx=x;ly=y;lw=w;lh=h;

container.css({display:"none"});

}else{

cutflag=false;

container.css({display:"block"});

}

}

arr.push(obj.getImageData(0,0,width,height));

}

}

```