用mouse，touch制作画板

用mouse，touch制作画板

	
		
		
		
		
		
		
		
		
	
	
		>
		

			
            
            
            
            
		    
		     
		     
		    
		
	
		
		
	

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100vh;
	/*border: 5px solid green;*/
	position: absolute;
	overflow: hidden;
}
::before{
	box-sizing: border-box;
}
::after{
	box-sizing: border-box;
}
#mycanvas{
	display: block;
	background: darkgray;
	
}
#toolBars{
	width:50px;
	height: 70%;
	/*border: 2px solid red;*/
	border-radius:10px;
	position: fixed;
    top: 15%;
    left: 0px;
    background: white;
}
#toolBars>svg{
	display: block;
	margin:20px auto;
}
#toolBars>.icon {
    width: 2em; 
    height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    /*border: 2px solid black;*/
}

window.onload=function(){/*当文档加载时运行*/
	
    var canvas=document.getElementById("mycanvas");
	var context=canvas.getContext('2d');
	pageSize();/*设置窗口大小*/
	window.onresize=function(){/*调整窗口大小时运行*/
		pageSize();
	}
    
    function pageSize(){/*设置页面大小*/
		/*返回文档的根节点：document.documentElement*/
		/*确定浏览器窗口的尺寸*/
		/*第一种方法*/
		/*var pageWhite=document.documentElement.clientWidth;
		  var pageHeight=document.documentElement.clientHeight;
		 */
		/*第二种方法*/ 
		var pageWhite=document.body.clientWidth;
		var pageHeight=document.body.clientHeight;
		canvas.width=pageWhite;
		canvas.height=pageHeight;
	}
    function drawLine(startX,startY,endX,endY){
    	context.beginPath();
    	/*context.strokeStyle='black'*/
    	context.moveTo(startX,startY);/*开始的点*/
    	/*context.lineWidth=5;*/
    	context.lineTo(endX,endY);/*结束的点*/
    	context.stroke();
    	context.closePath();	
    }
    
    function changeStyle(id){
    	context.strokeStyle=$(id).attr("id");/*获得当前元素的id*/
    	context.fillStyle=$(id).attr("id");
    }
    
    var Paintbrush=false;/*画笔失活*/
    var startPoint={X:undefined,Y:undefined}/*开始的坐标*/
    var endPoint={X:undefined,Y:undefined}/*结束的坐标*/
    if(document.body.ontouchstart!==undefined){
    	canvas.ontouchstart=function(start){/*触摸开始*/
	    	Paintbrush=true;/*激活画笔*/
	    	var x=start.touches[0].clientX;
	    	var y=start.touches[0].clientY;
	        startPoint={X:x,Y:y}
		}
		canvas.ontouchmove=function(move){/*触摸移动*/
	    	if(Paintbrush===true){/*激活画笔*/
				var x=move.touches[0].clientX;
	    		var y=move.touches[0].clientY;
	        	endPoint={X:x,Y:y}
	        	drawLine(startPoint.X,startPoint.Y,endPoint.X,endPoint.Y);
	        	startPoint=endPoint;
            }
		}
		canvas.ontouchend=function(end){/*触摸结束*/
	  		Paintbrush=false;/*画笔失活*/
		}
    }else{
    	canvas.onmousedown=function(down){/*鼠标按下去*/
    		Paintbrush=true;/*激活画笔*/
    		var x=down.clientX;
    		var y=down.clientY;
        	startPoint={X:x,Y:y}
		}
		canvas.onmousemove=function(move){/*鼠标移动*/
	    	if(Paintbrush===true){/*激活画笔*/
				var x=move.clientX;
	    		var y=move.clientY;
	        	endPoint={X:x,Y:y}
	        	drawLine(startPoint.X,startPoint.Y,endPoint.X,endPoint.Y);
	        	startPoint=endPoint;
        	}
		
		}
		canvas.onmouseup=function(up){/*松开鼠标*/
			Paintbrush=false;/*画笔失活*/
    	}
	}
    
    $("#pen1").click(function(){
    	context.lineWidth=2;
    	if(usingEraser===true){
    		changeStyle("#black");
    		usingEraser=!usingEraser;
    	}
    	$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
    });
    $("#pen2").click(function(){
    	context.lineWidth=5;
    	if(usingEraser===true){
    		changeStyle("#black");
    		usingEraser=!usingEraser;
    	}
    	$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
    });
    $("#pen3").click(function(){
    	context.lineWidth=8;
    	if(usingEraser===true){
    		changeStyle("#black");
    		usingEraser=!usingEraser;
    	}
    	$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
    });
    var usingEraser=false;
    $("#eraser").click(function(){
    	  	context.lineWidth=10; 
    		context.strokeStyle=$("#mycanvas").css("background-color");
    		context.fillStyle=$("#mycanvas").css("background-color");
    		$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});	
    		usingEraser=true;
    });
    $("#del").click(function(){
    	parent.location.reload();/*parent.location.reload()刷新父亲对象（用于框架）*/
    	$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
    });
    $("#red").click(function(){
    	 changeStyle(this);
    	 $(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
    });
    $("#yellow").click(function(){
    	 changeStyle(this);
    	 $(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
    });
    $("#blue").click(function(){
    	 changeStyle(this);
    	 $(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
    });
    $("#black").click(function(){
    	 changeStyle(this);
    	 $(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
    });
}