画布签名生成图片

最新推荐文章于 2022-09-22 04:34:15 发布

Agaoquan

最新推荐文章于 2022-09-22 04:34:15 发布

阅读量873

点赞数

本文链接：https://blog.csdn.net/qq_35339949/article/details/77185998

版权

<!doctype html>
	<html lang="en">
	<head>
	<title>一款签名变成图片的插件</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
	<style>
	#c1 { background-color: pink; }
	</style>
	</head>
	<body>
	<canvas id="c1" width="400px" height="400px"> <!--宽高写在html里，写在css里有问题-->
	<span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
	</canvas>
	<input type="button" value="按钮" id="submit"/>
	<input type="button" value="清除" id="clear"/>
	<img id="qmimg"/>
	</body>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script>
	/插件参考地址http://www.jq22.com/jquery-info1057/

	/移动端事件/
	var canvas = document.getElementById('c1');
	var ctx = canvas.getContext('2d')
	canvas.addEventListener('touchstart', function (ev) {
	ev.preventDefault();
	ctx.beginPath();
	ctx.strokeStyle = 'red';
	ctx.lineWidth="5";
	var ev = ev.touches[0] \|\| window.event.touches[0];
	ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
	canvas.addEventListener('touchmove',function (ev) {
	var ev = ev.touches[0] \|\| window.event.touches[0];
	ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
	ctx.stroke();
	})
	// canvas.addEventListener('touchend',function (ev) {
	// canvas.onmousemove = null;
	// canvas.onmouseup = null;
	// })
	})
	document.getElementById('clear').addEventListener("click", function(){
	canvas.width = canvas.width;
	});
	document.getElementById('submit').addEventListener("click", function(){
	$('#qmimg').attr("src",canvas.toDataURL("image/png"));
	});

	/pc端事件/
	canvas.onmousedown = function (ev) {
	ctx.beginPath();
	ctx.strokeStyle = 'red';
	ctx.lineWidth="5";
	ctx.lineJoin = 'round';
	var ev = ev \|\| window.event;
	ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
	canvas.onmousemove = function (ev) {
	ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
	ctx.stroke();
	}
	canvas.onmouseup = function() {
	canvas.onmousemove = null;
	canvas.onmouseup = null;
	};
	}

	document.getElementById('submit').addEventListener("click", function(){
	$('#qmimg').attr("src",canvas.toDataURL("image/png"));
	});

	</script>
	</html>

Agaoquan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
画布签名生成图片

html lang="en"> head> title>一款签名变成图片的插件title> meta charset="UTF-8"> meta name="viewport"content="width=device-width; initial-scale=1.0; maximum-
复制链接

扫一扫