Canvas在线画图—简单制作一个画板

<>window.=function(){

varvas=document.querySelector('canvas');

varctx=vas.getContext('2d');

varcolor=document.querySelector('.color');

varselect=document.querySelector('.select');

varline=document.querySelector('.line');

varrect=document.querySelector('.rect');

varclear=document.querySelector('.clear');

varclearAll=document.querySelector('.clearAll');

varmenu=document.querySelector('.menu');

varreDraw=document.querySelector('.reDraw');

varsaveAll=document.querySelector('.saveAll');

//自定义菜单flagm=true;select.onmousedown=function(){flagm=false;}select.onmouseout=function(){flagm=true;}document.oncontextmenu=function(e){

vare=e||window.event;//兼容iemenu.style.left=e.pageX+'px';menu.style.top=e.pageY+'px';menu.style.display='block';

returnfalse;//阻止当前默认事件发生}

document.onclick=function(){

if(flagm){menu.style.display='none';}}

/*----------------------------*/vartools={color:'black',lineWd:'1',lineWhat:'line'}

varstartX=0;

varstartY=0;flag=false;

vararrPoint=[];vas.addEventListener('mousedown',function(e){flag=true;ctx.beginPath();ctx.lineWidth=tools.lineWd;ctx.strokeStyle=tools.color;startX=e.offsetX;startY=e.offsetY;arrPoint.push(0);//标记})vas.addEventListener('mousemove',function(e){

if(flag){

varX=e.offsetX;

varY=e.offsetY;

if(tools.lineWhat=='line'){

//画线ctx.lineTo(X,Y);ctx.stroke();arrPoint.push({x:X,y:Y});//保存绘图路径}elseif(tools.lineWhat=='clear'){//橡皮擦ctx.clearRect(X,Y,20,20);}}})vas.addEventListener('mouseup',function(e){flag=false;

if(tools.lineWhat=='rect'){

//画矩形varendX=e.offsetX;

varendY=e.offsetY;ctx.strokeRect(startX,startY,endX-startX,endY-startY);arrPoint.push(0);//标记}})vas.addEventListener('mouseleave',function(){flag=false;arrPoint.push(0);//标记})reDraw.onclick=function(){//重绘路径//console.log(arrPoint);ctx.clearRect(0,0,vas.width,vas.height);//清空画布vartimer=setInterval(function(){

varpoint=arrPoint.shift();

//shift从头部删除一个值返回被删除的值a=arr.shift()arr=[b,c]if(point==0){ctx.beginPath();}else{flag=false;ctx.lineTo(point.x,point.y);//按照保存好的路径绘图ctx.stroke();}if(arrPoint.length<1){clearInterval(timer);}},10)}//下载画布saveAll.onclick=function(){