【JavaScript】基于H5 canvas实现的画板绘图工具（类似你画我猜）——整合颜色选取、保存图片到本地功能

最新推荐文章于 2024-07-24 00:18:35 发布

咖啡学编程

最新推荐文章于 2024-07-24 00:18:35 发布

阅读量1.3w

点赞数 5

分类专栏： html5 javascript 文章标签：你画我猜 canvas javascript stroke 在线绘图画板

本文链接：https://blog.csdn.net/a727911438/article/details/71037450

版权

javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

6 篇文章 0 订阅

订阅专栏

本来想尝试用做一个网页版的美图秀秀，可以导入的对图片进行处理，还有制作一些模板可以快速生成人物的表情包，但是做着做着，发现太耗时间了。结果最终只是简单做了一个基于 canvas 的画板。

github地址：https://github.com/linhongbijkm/canvasPainter

在线DEMO：https://linhongbijkm.github.io/canvasPainter/cvs.html

单纯实现 canvas 绘画功能还是比较简单的，以下我只大概说一下绘画功能的实现，至于页面中还包括颜色选择器、图像保存到本地的功能，请到 github 代码仓库下载下来看看。

一、canvas 标签

这个标签定义了一个画布，然后是要用 JavaScript 来调用浏览器 API 来在画布上绘图，所以第一步，就是在页面上加入 canvas 标签；

	<body>
		<canvas id="canvas" width="800px" height="600px"></canvas>
	</body>

二、读取画布

跟 JS 获取其他元素一样，根据 canvas 标签定义的 id 值，用原生函数来选取 canvas 元素，然后调用 getContext('2d') 获取画布环境对象，之后对画布绘图的 API 都由环境对象来调用；

	<script>
		var canvas = document.getElementById('canvas');
		var cvs = canvas.getContext('2d');
	</script>

三、定义画笔的颜色和粗细

	var penWeight = 1;		//画笔粗细
	var penColor = '#f00';	//画笔颜色

四、监听鼠标点下时事件

鼠标一点下，就开始一次绘画，画笔的起始点是当前鼠标位置，同时设置画笔的属性；

	canvas.onmousedown = function(e){

		/*找到鼠标（画笔）的坐标*/
		var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
		var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;

		cvs.beginPath();	//开始本次绘画

		cvs.moveTo(start_x, start_y);	//画笔起始点

		/*设置画笔属性*/
		cvs.lineCap = 'round';
		cvs.lineJoin ="round";
		cvs.strokeStyle = penColor;		//画笔颜色
		cvs.lineWidth = penWeight;		//画笔粗细
		
		/*监听鼠标移动事件*/
		/*监听鼠标松开事件*/
	}

五、监听鼠标移动和松开事件

为了节省性能，在鼠标松开时候，取消鼠标按住和移动的监听，也就是只有鼠标按下时才监听鼠标移动和松开事件；

	canvas.onmousemove = function(e){

		/*找到鼠标（画笔）的坐标*/
		var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
		var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
		
		cvs.lineTo(move_x, move_y);	//根据鼠标路径绘画

		cvs.stroke();	//立即渲染
	}

	canvas.onmouseup = function(e){

		cvs.closePath();	//结束本次绘画

		canvas.onmousemove = null;
		canvas.onmouseup = null;
	}

整合以上五点，单纯绘图功能的代码如下：

（注：不包含颜色选取、橡皮擦、清空画布功能。如果需要完整版，请到github下载，地址在本文最前面）

<body>
	<canvas id="canvas" width="800px" height="600px"></canvas>
</body>

<script>
	var canvas = document.getElementById('canvas');
	var cvs = canvas.getContext('2d');

	var penWeight = 1;		//画笔粗细
	var penColor = '#f00';	//画笔颜色

	canvas.onmousedown = function(e){

		/*找到鼠标（画笔）的坐标*/
		var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
		var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;

		cvs.beginPath();	//开始本次绘画

		cvs.moveTo(start_x, start_y);	//画笔起始点

		/*设置画笔属性*/
		cvs.lineCap = 'round';
		cvs.lineJoin ="round";
		cvs.strokeStyle = penColor;		//画笔颜色
		cvs.lineWidth = penWeight;		//画笔粗细


		canvas.onmousemove = function(e){

			/*找到鼠标（画笔）的坐标*/
			var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
			var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
			
			cvs.lineTo(move_x, move_y);		//根据鼠标路径绘画

			cvs.stroke();	//立即渲染
		}


		canvas.onmouseup = function(e){

			cvs.closePath();	//结束本次绘画

			canvas.onmousemove = null;
			canvas.onmouseup = null;
		}
	}
</script>

运行一下代码看看，比完整版简陋很多：