canvas制作简易画板

最新推荐文章于 2022-11-08 08:31:01 发布

七上八下的爆米花

最新推荐文章于 2022-11-08 08:31:01 发布

阅读量496

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/lanseguhui/article/details/81901940

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

<!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>