运用canvas绘图，制作简易小画板

最新推荐文章于 2025-03-30 20:36:59 发布

Dengjiay

最新推荐文章于 2025-03-30 20:36:59 发布

阅读量626

点赞数 5

文章标签： html css javascript

本文链接：https://blog.csdn.net/Dengjiay/article/details/142569653

版权

文章目录

所需技术

1，html表单，画布canvas的运用，部分css
2，js中鼠标的点击，移动，按下，抬起事件

HTML与CSS部分

这里是HTML与CSS代码与效果图

<style>
		#mycanvas{
			border: 2px solid #ccc;
			margin: 20px 7px;
		}
		button{
			width: 80px;
			background-color: forestgreen;
			color: white;
			border-radius: 6px;
		}
	</style>
	<body>
		<form action="">
			<label>画笔颜色：</label><input type="color" id="in_col"/><br /><br />
			<label>画笔粗细：</label><input type="range" id="in_range" value="1" max="50" min="1" step="1"/><br /><br />
			<button type="button" id="clear">清空画布</button>
			<button type="button" id="xpc">橡皮擦</button>
			<button type="button" id="pen">画笔</button>
		</form>

js部分

写完html与css后，就可以运用js，让页面上的表单控件和画布与用户产生交互

1，先实现画笔的绘画功能

利用html中canvas的id值获取画布，再使用鼠标的移动，按下和抬起事件，实现鼠标在画布上绘画的功能。

		// 通过canvas的id值获取画布
		let canvas = document.getElementById("mycanvas");
		// 创建画笔
		let ctx = canvas.getContext("2d");
		let flag = false;	//控制绘画的启动，等鼠标按住时变为true，
		// 鼠标移动事件
		canvas.onmousemove=function(e){
			if(flag){	//flag为真时绘画，为假时不绘画
				ctx.lineTo(e.offsetX,e.offsetY);//连接画笔的起点，括号里面表示鼠标移动时的x和y坐标
				ctx.stroke();	//让画笔显示描边颜色
			}
			
		}
		// 鼠标按下事件
		canvas.onmousedown=function(e){
			// 鼠标按下时开启画笔
			ctx.beginPath();
			ctx.moveTo(e.offsetX,e.offsetY);//将鼠标按下的位置设为画笔的起点
			flag = true;//鼠标按下的时候 flag为真，鼠标移动时绘画
		}
		// 鼠标松开事件
		canvas.onmouseup=function(){
			flag=false;//鼠标松开时，flag为假，鼠标移动时不绘画
		}

效果图：
在这里插入图片描述

2，实现表单控件的功能

先在js中获取表单中的每个控件，再为他们添加改变事件，按钮的点击事件。

// 利用html中表单控件的id值获取表单控件
		let incol = document.getElementById("in_col");	//画笔颜色
		let inrange = document.getElementById("in_range");	//画笔粗细
		let btnclear = document.getElementById("clear");	//清空画布
		let btnxpc = document.getElementById("xpc");	//橡皮擦
		let btnpen = document.getElementById("pen");	//画笔
		// 画笔颜色改变事件
		incol.onchange = function(){
			//当incol的颜色值发生改变时，将incol的颜色值赋给画笔的颜色
			ctx.strokeStyle=incol.value;
		}
		// 画笔粗细改变事件
		inrange.onchange = function(){
			//当inrange的值发生改变时，将inrange的值赋给画笔的粗细
			ctx.lineWidth = inrange.value;
		}
		// 清空画布按钮的点击事件
		btnclear.onclick = function(){
			ctx.clearRect(0,0,canvas.width,canvas.height)
		}
		// 橡皮擦按钮的点击事件
		btnxpc.onclick = function(){
			ctx.strokeStyle="white"	//将画笔颜色设置为白色
		}
		// 画笔按钮的点击事件
		btnpen.onclick = function(){
			ctx.strokeStyle=incol.value;	//将incol的颜色值赋给画笔的颜色
		}

效果图：
在这里插入图片描述