用canvas实现一个简易的涂鸦画板

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

zDeer的前端之旅

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

阅读量5.2k

点赞数 2

分类专栏： H5 文章标签： canvas

H5 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了一个利用HTML5的canvas元素构建的简单涂鸦画板，用户可以上传本地图片并在画板上进行涂鸦，同时提供保存涂鸦作品的功能。通过监听鼠标事件实现画笔绘制，并使用FileReader API读取并显示图片。

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

这是一个简单的用H5中的新特性canvas写的画板它实现了选择本机图片绘制在浏览器上,并可以用画笔涂鸦最后可以保存涂鸦.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
	canvas{border:1px solid green;}
</style>
</head>
<body>
选择图片：<input id="file" type="file">
<button onclick="restuya()">重新涂鸦</button>
<button onclick="saveTu();">保存图片</button>
<hr>
<canvas id="canvas" width="1105" height="500">
	您的破浏览器不兼容，请升级！
</canvas>	
<hr>
<div id="res"></div>
<script type="text/javascript">
	// 获取 canvas 对象
	var canvas = document.getElementById('canvas');
	// 获取绘图环境
	var ctx = canvas.getContext('2d');

	var last = null;

	var file = document.getElementById('file');

	// 文件对象
	var filedata = null;

	// 鼠标按下
	canvas.onmousedown = function(){
		// 在鼠标按下后触发鼠标移动事件
		canvas.onmousemove = move;
	}

	// 鼠标抬起取消鼠标移动的事件
	canvas.onmouseup = function(){
		canvas.onmousemove = null;	
		last = null;
	}

	// 鼠标移出画布时 移动事件也要取消。
	canvas.onmouseout = function(){
		canvas.onmousemove = null;
		last = null;
	}

	// 鼠标移动函数
	function move(e){
		// console.log(e.offsetX);
		if(last != null){
			ctx.beginPath();
			ctx.moveTo(last[0],last[1]);
			ctx.lineTo(e.offsetX,e.offsetY);
			ctx.stroke();
		}		
		// 第一次触发这个函数，只做一件事，把当前 鼠标的 x , y 的位置记录下来
		// 做下一次 线段的 起始点。
		last = [e.offsetX,e.offsetY];

	}

	// 当文件域内容发生改变时触发函数
	file.onchange = function(e){
		filedata = e.target.files[0];	
		// 	实例化文件读取对象
		drawImg(filedata)
	}


	// 重新在画
	function restuya(){
		ctx.clearRect(0,0,canvas.width,canvas.height);
		drawImg(filedata)
	}


	// 绘制图片
	function drawImg(filedata){

		var readFile = new FileReader();

		readFile.readAsDataURL(filedata);

		// 图片读取成功
		readFile.onload = function(){
			// 结果
			// console.log(this.result);
			// this.result;
			// 第一种方法
			var Img = new Image();
			Img.src = this.result;

			Img.onload = function(){
				// 根据 图片的 宽高 来 设置canvas 宽和高 
				canvas.width = Img.width;
				canvas.height = Img.height;

				// console.log(Img.width);

				// canvas.width = 500;
				// canvas.width = 500;

				ctx.drawImage(Img,0,0);

			}
		}
	}


	// 保存图片
	function saveTu(){
		var saveImage = canvas.toDataURL('image/png');	
		document.getElementById('res').innerHTML = '<img src="'+saveImage+'">';
	}

</script>
</body>
</html>