项目实训(十一):用html写一个简易的绘图板~

最新推荐文章于 2022-04-08 10:46:04 发布

李起早

最新推荐文章于 2022-04-08 10:46:04 发布

阅读量572

点赞数 1

分类专栏：项目实训

本文链接：https://blog.csdn.net/weixin_43954810/article/details/119250481

版权

项目实训专栏收录该内容

14 篇文章 3 订阅

订阅专栏

先上效果图：

可以随意换颜色（甚至有取色器），笔刷大小；可以清空画布；想保存画作只需要右键另存为就可以了。唯一的问题是如果设置画布很长，需要滑动右侧拉动条的话，鼠标的位置识别会出现一些问题。

是跟着b站的教程做的，留一个BV号：BV1MA411K7SQ

下面贴我的源码~

首先是html部分：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>canvas 画图板</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/index.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="options">
				<label>画笔颜色</label>
				<!-- value值可以设置默认的颜色 -->
				<input type="color" value="#7788ff" id="color" />
			</div>
			<div class="options">
				<label>画笔粗细</label>
				<!-- value同样设置默认的值 -->
				<!-- min为最小取值 -->
				<!-- max为最大取值 -->
				<input type="range" value="5" min="1" max="50" id="range" />
			</div>
			<div class="options">
				<button id="clear">清空画布</button>
			</div>

			<canvas id="cavsImage" width="1280" height="1080" style=url(123.png)></canvas>

		</div>
		<script>
			(function(){
				var canvas = document.querySelector('#cavsImage');
				var ctx = canvas.getContext('2d');

				//canvas.width = 600;
				//canvas.height = 600;
				//canvas.style.border = '1px solid #ccc';

				//第一步，创建图片的dom对象
				//var img1 = new Image();
				//img1.src='123.png';//只要设置了src属性，当前img对象立即去加载图片。
				//第二步，图片加载完成后，把图片绘制到canvas上
				//img1.onload = function() {
					//ctx.drawImage(img1,30,30);
					//ctx.drawImage(img1,250,30,img1.width*1.2,img1.height*1.2);
					//for(var i=0;i<5;i++){
						//ctx.drawImage(img1,30+i*20,250+i*20,img1.width*0.8,img1.height*0.8);
					//}

					//绘制指定的裁剪图片
					//图片截取
					//参数： 1、图片对象,2、截取图片x坐标，3、截取图片Y坐标
					//4、截取图片宽，5、截取图片高，
					//6、7、绘制图片的X、y坐标， 8、9、绘制图片的宽高
					//ctx.drawImage(img1,15,70,70,70,350,350,210,210);
				//};
			})();
		</script>
	</body>
</html>

然后是js部分：

window.addEventListener("load", () => {
	// 获取颜色元素
	const color = document.querySelector("#color");
	// 获取range元素
	const range = document.querySelector("#range");
	// 设置初始的画笔颜色和粗细 画图时用的
	let colorValue = color.value,
		rangeValue = range.value;
	// 给颜色选择器加onchange事件 以此来更新颜色
	color.addEventListener("change", () => {
		// 变化之后就会改变value值
		colorValue = color.value;
	});
	// 同理来改变画笔粗细
	range.addEventListener("change", () => {
		rangeValue = range.value;
	});

	// ok现在开始画图了
	// 先获取画布
	const cvs = document.querySelector("canvas");
	// 再返回一个2d的绘图环境
	const ctx = cvs.getContext("2d");
	// 给画布添加鼠标按下事件
	let flag = false;
	cvs.addEventListener("mousedown", (e) => {
		// 按下之后让flag变成true
		flag = true;
		// 这里我们要获取鼠标的坐标来确定画布里面的初始位置
		// 先获取画布距离浏览器可视区的顶部和左部的大小
		// getBoundingClientRect这个方法内有六个值 分别是 left top  right bottom 和 width height 代表当前元素的宽度和高度
		const top = cvs.getBoundingClientRect().top;
		const left = cvs.getBoundingClientRect().left;
		// 然后求出鼠标在画布内容的位置
		// 计算方式依然是 鼠标距离整个浏览器可视区域的距离减去画布距离浏览器的距离
		const mouseX = e.pageX - left;
		const mouseY = e.pageY - top;
		// 这样就获取到了
		// 可以开始绘图了
		// 先设置好绘图的画笔颜色和粗细
		ctx.strokeStyle = colorValue;
		ctx.lineWidth = rangeValue;
		// 这里再设置一个属性
		// 绘制的图像是圆角的
		ctx.lineCap = "round";
		// 开启一个路径
		ctx.beginPath();
		// 然后确定开始绘图的起点位置
		ctx.moveTo(mouseX, mouseY);
	});
	// 现在在加鼠标移动事件就可以绘图了
	cvs.addEventListener("mousemove", (e) => {
		// 同样的方式获取鼠标位置 复制一下
		const top = cvs.getBoundingClientRect().top;
		const left = cvs.getBoundingClientRect().left;
		const mouseX = e.pageX - left;
		const mouseY = e.pageY - top;
		// OK 这样就可以保证按下在开始画了
		if (flag) {
			// 然后就开始连接线条了
			// 这个用来确定要去的位置
			ctx.lineTo(mouseX, mouseY);
			// 封闭连接
			ctx.stroke();
		}
	});
	// ok 现在我们需要鼠标按下才绘图
	// 用最笨的方法 立一个flag 哈哈
	// 现在鼠标弹起了还绘图 加一个鼠标弹起事件
	cvs.addEventListener("mouseup", () => {
		// flag为fasle即可
		flag = false;
	});
	// 现在实现清空画布
	// 获取按钮
	const clear = document.querySelector("#clear");
	clear.addEventListener("click", () => {
		// clearRect方法可以清空一定区域内的内容 填写的值为x坐标 y坐标 清除的宽度 和 高度 我们全部要清除 所以直接从左上角开始 宽高为画布的宽高了 再来试试
		ctx.clearRect(0, 0, 1280, 1080);
		//var img1 = new Image();
		//img1.src='123.png';
		//ctx.drawImage(img1,30,30);
		// OK了
	});
});

最后是CSS部分：

* {
	padding: 0;
	margin: 0;
}
body {
	display: flex;
	justify-content: center;
}
.options {
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.options input {
	/* 清除input自带的轮廓 */
	outline: 0;
	margin-left: 20px;
}
.options button {
	/* 简单修饰一下按钮 */
	/* 同样清除轮廓 */
	outline: 0;
	/* 把边框也去掉 */
	border: 0;
	padding: 10px 20px;
	/* 加个圆角 */
	border-radius: 3px;
	color: #fff;
	background-color: #0d53ff;
	/* 鼠标移入变小手 */
	cursor: pointer;
}
/* 给画布一个边框 */
canvas {
	margin-top: 20px;
	border: 1px solid #000;
	/*background: url('123.png');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;*/
}

李起早

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
项目实训(十一):用html写一个简易的绘图板~

先上效果图：可以随意换颜色（甚至有取色器），笔刷大小；可以清空画布；想保存画作只需要右键另存为就可以了。唯一的问题是如果设置画布很长，需要滑动右侧拉动条的话，鼠标的位置识别会出现一些问题。是跟着b站的教程做的，留一个BV号：BV1MA411K7SQ下面贴我的源码~首先是html部分：<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> &lt.
复制链接

扫一扫