canvas简易画板

最新推荐文章于 2025-06-08 14:29:19 发布

原创最新推荐文章于 2025-06-08 14:29:19 发布 · 420 阅读

2 ·

CC 4.0 BY-SA版权

canvas 专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何利用HTML5的canvas元素创建一个简易的在线画板。通过监听鼠标事件，实现在画布上绘制线条，用蓝色描绘，并提供了橡皮擦功能以及重置画板的选项。用户可以通过点击按钮，切换到绘画、橡皮擦或重置状态，进行自由创作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas简易画板</title>
<style type="text/css">
	
	#cvs{
		border: 1px solid red;
	}
</style>
</head>
<body>

	<canvas id="cvs" width="500" height="450"></canvas>
	<button id="btn">绘画</button>
	<button id="btn1">橡皮擦</button>
	<button id="btn2">重置</button>
	
</body>
<script type="text/javascript">
	var cvs=document.getElementById("cvs")

	var ctx=cvs.getContext('2d');
	
	var btn=document.getElementById("btn");
	var btn1=document.getElementById("btn1");
	var btn2=document.getElementById("btn2");
	btn.onclick=function(){
		cvs.onmousedown=function(e){
			ctx.beginPath();
			ctx.moveTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop)
			document.onmousemove=function(e){
				ctx.lineTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop)
				ctx.lineWidth=2;
				ctx.strokeStyle='blue';
				ctx.stroke()
			}
			
			document.onmouseup=function(){
				document.onmousedown=null;
				document.onmousemove=null;
			}
		}
	}
	btn1.onclick=function(){
		cvs.onmousedown=function(){
			document.onmousemove=function(e){
				ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,5,5)
			}
		}
	}
	btn2.onclick=function(){
		ctx.clearRect(0,0,500,450)
	}
	
</script>

</html>