canvas篇--初学canvas案例---canvas签名

Posted 咖啡壶子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas篇--初学canvas案例---canvas签名相关的知识,希望对你有一定的参考价值。

效果如下

代码如下:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		* 
			margin: 0;
			padding: 0;
		

		body,
		html 
			width: 100%;
			overflow: hidden;
		

		body 
			background-color: green;
		

		#test 
			background-color: #fff;
			position: absolute;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			margin: auto;
		
	</style>
</head>

<body>
	<canvas id="test" width="500" height="500">
	</canvas>
</body>
<script type="text/javascript">
	window.onload = function () 
		var canvas = document.getElementById("test");
		if (canvas.getContext) 
			var ctx = test.getContext('2d')
		
		canvas.onmousedown = function (ev) 
			ev = ev || event;
			if (canvas.setCapture) 
				canvas.setCapture()
			

			ctx.beginPath()
			ctx.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop)
			document.onmousemove = function (ev) 
				ev = ev || event;
				ctx.save()
				ctx.strokeStyle = "pink"
				ctx.lineTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
				ctx.stroke();
				ctx.restore()

			
			document.onmouseup = function () 
				document.onmousemove = document.onmouseup = null;
				if (document.releaseCapture) 
					document.releaseCapture();
				
			
			return false;
		
	

</script>

</html>

以上是关于canvas篇--初学canvas案例---canvas签名的主要内容,如果未能解决你的问题,请参考以下文章

canvas篇--初学canvas案例---canvas签名

Canvas制图-导读篇

如何实现一个朴实无华的Canvas时钟效果

如何实现一个朴实无华的Canvas时钟效果

HarmonyOS鸿蒙学习笔记(16)Canvas入门使用

HarmonyOS鸿蒙学习笔记(16)Canvas入门使用