HTML5之简单小画板

ゞ浴缸里的玫瑰 2022-05-14 13:39 182阅读 0赞

### 一：先熟悉一下基本图形绘制 ###

**1：线条**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>绘制线条</title>
    </head>
    <body>
    	<canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas>
    	<script type="text/javascript">
    //		1:获取对象
    		var canvas=document.getElementById("canvas");
    		var ctx=canvas.getContext("2d");	 
    //		2:开始点
    		ctx.moveTo(10,10);
    //		3:设置轮廓粗细和轮廓样式
    		ctx.lineWidth=8;
    		ctx.strokeStyle="orange";
    //		4:结束点
    		ctx.	lineTo(80,80);
    //		5:填充轮廓
    		ctx.stroke();
    	</script>
    </body>
    </html>

**2：矩形**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>绘制矩形</title>
    </head>
    <body>
    	<canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas>
    	<script type="text/javascript">
    //		1:获取对象
    		var canvas=document.getElementById("canvas");
    		var ctx=canvas.getContext("2d");	 
    //		2:设置路径
    		ctx.rect(10,10,100,100);
    //		3:设置轮廓粗细和轮廓样式和设置内部填充样式
    		ctx.lineWidth=10;
    		ctx.strokeStyle="orange";
    		ctx.fillStyle='cornsilk';
    //		5:填充轮廓和填充图形
    		ctx.stroke();
    		ctx.fill();
    	</script>
    </body>
    </html>

**3：圆形**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>绘制圆形</title>
    </head>
    <body>
    	<canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas>
    	<script type="text/javascript">
    //		1:获取对象
    		var canvas=document.getElementById("canvas");
    		var ctx=canvas.getContext("2d");	 
    //		2:设置路径
    		ctx.arc(100,100,80,0*Math.PI/180,270*Math.PI/180);
    //		3:设置轮廓粗细和轮廓样式和设置内部填充样式
    		ctx.lineWidth=10;
    		ctx.strokeStyle="orange";
    		ctx.fillStyle='azure';
    //		5:填充轮廓和填充图形
    		ctx.stroke();
    		ctx.fill();
    	</script>
    </body>
    </html>

**4：效果图**

![70][]![70 1][]![70 2][]

### 二：实现一个简单的小画板 ###

**1：代码**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>画布</title>
    		<style type="text/css">
    			canvas{
    				border: 2px solid orange;
    				display: block;
    				margin: 50px auto;
    			}
    			#thecolor{
    				height: 50px;
    				width: 50px;
    				display: block;
    				margin: 10px auto;
    			}
    			.mm{
    				display: block;
    				height: 40px;
    				width: 40%;
    				margin: 10px auto;	 
    			}
    			 
    		</style>
    	</head>
    	<body style="margin: 0;">
    		
    		<input type="color" id="thecolor" value=""/>
    		
    		<canvas id="can" width="600" height="400" ></canvas>
    		
    		 <div class="mm">
    		 	<input type="text" name="size" id="size"  placeholder="输入画笔大小"/>
    			<button  id="but">OK</button>
    			<button id="xp">橡皮擦</button>
    		 </div>
    		
    		
    	</body>
    	<script type="text/javascript">
    		var can = document.getElementById("can");
    		var ctx = can.getContext("2d");
    		ctx.lineWidth=5;
    	
    		var flag=false;
    		can.onmousedown=function(eva){
    			var eva=eva||window.event;
    			ctx.lineCap="round";
    			ctx.lineJoin="round";
    			var x=eva.offsetX;
    			var y=eva.offsetY;
    			ctx.beginPath();
    			ctx.moveTo(x,y);
    			flag=true;
    		}
    		can.onmousemove=function(eva){
    			if(flag){ 
    				var eva=eva||window.event;
    				var x=eva.offsetX;
    				var y=eva.offsetY;
    				ctx.lineTo(x,y);
    				ctx.stroke();
    			}
    		}
    		can.onmouseup=function(){
    			flag=false;
    			ctx.closePath();
    		}
    		can.onmouseleave=function(){
    			flag=false;
    			ctx.closePath();
    		}
    		
    		var theColor=document.getElementById("thecolor");
    	 	theColor.onchange=function(){
    			ctx.strokeStyle=this.value;
    		}
    	 	
    	 	
    	 	
    	 	var size=document.getElementById("size");
    	 	var but=document.getElementById("but");
    	 	but.onclick=function(){
    //	 		alert(size.value)
    	 		ctx.lineWidth=size.value;
    	 	}
    	 	var xp=document.getElementById("xp");
    	 	xp.onclick=function(){
    	 		ctx.strokeStyle='white';
    	 		ctx.lineWidth=15;
    	 	}
    	 	 
    	</script>
    </html>

**2：效果图**

![70 3][]

[70]: https://img-blog.csdn.net/20180908230255991?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180908230306702?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220514/d9aa4d0b9f614e23961a9cc0913a9d76.png
[70 3]: /images/20220514/75548a582ae5420da3567a95250b2535.png