canvas制作简易画板

我不是女神ヾ 2021-09-16 04:10 396阅读 0赞

![70][]

<!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
        	button{
    			width: 20px;
    			height: 20px;
    		}
    		#btn_clear{
    			width: 50px;
    		}
    		#cv{
    			border:1px solid;
    			vertical-align: top;
    			background-color: white;
    		}
    		option{
    			width: 25px;
    			height: 10px;
    		}
    		.color{
    			width: 40px;
    			height: 20px;
    			border:1px solid;
    			background-color: blue;
    			position:relative;
    		}
    		.color>div{
    			position: absolute;
    			top:20px;
    			left:20px;
    			width: 200px;
    			height: 200px;
    			border:1px solid;
    		}
    		#rubber{
    			display: inline-block;
    			width: 15px;
    			height: 15px;
    			border:1px solid;
    		}
        </style>
    </head>
     
    	 <input  type="color" id="onchange">
    	 <select id="select">
    	 	<option value="1">1</option>
    	 	<option value="5">5</option>
    	 	<option value="10">10</option>
    	 	<option value="15">15</option>
    	 	<option value="20">20</option>
    	 </select>
    	橡皮擦:<div id="rubber"></div>
    	clear:<button value="" id="btn_clear" >清除</button>
    	 <canvas width="800" height="500" id="cv"></canvas>
    </body>
    <script src="../../canvas01/jquery.js"></script>
    <script type="text/javascript">
    	var color = "#000";
    	var canvas = document.getElementById("cv");
    	var cxt = canvas.getContext('2d');
    	var drawflag=false;
    	draw();
    	function draw(){
    		canvas.onmousedown=function(event){
    		drawflag=true;
    		cxt.beginPath();
    		cxt.moveTo(event.clientX-this.offsetLeft-1,event.clientY-this.offsetTop-1);
    	}
    	canvas.onmouseup=function(event){
    		drawflag=false;
    		cxt.closePath();	
    	}
    	canvas.onmousemove=function(event){
    		if(drawflag){
    			document.getElementById('onchange').onchange = function(){
    		       color=this.value;
    		       console.log(color);
    		    }
    		  	cxt.strokeStyle=color;
    		  	cxt.lineWidth=select.value;
    		  	// cxt.lineWidth=$("select").find("option:selected").attr("value");
    			cxt.lineTo(event.clientX-this.offsetLeft,event.clientY-this.offsetTop);
    			cxt.stroke();
    		}
    		
    	}
    	rubber.onclick = function(){
    		color="white";
    	}
    	// $("#rubber").click(function(){
    	// 	color="white";
    	// })
    	//清除画板
    	btn_clear.onclick = function(){
    		cv.width=cv.width;
    	}
    	// $("#btn_clear").click(function(){
    	// 		cv.width=cv.width;
    	// 		// document.getElementById("cv").getContext('2d').clearRect(0,0,800,500);
    	// })
    	}
    
    </script>
    </html>

[70]: /images/20210813/dc5ee9dae0844fdeb1fb7bb5888c276d.png