Canvas标签实现写字板功能

最新推荐文章于 2022-04-02 20:02:57 发布

Dylan_洋

最新推荐文章于 2022-04-02 20:02:57 发布

阅读量294

点赞数 1

本文链接：https://blog.csdn.net/qq_35960760/article/details/55261504

版权

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#can{
				background: #ccc;
			}
		</style>
		
		<script>
			window.οnlοad=function(){
				var can=document.getElementById("can")
				var obj=can.getContext("2d")
				can.οnmοusedοwn=function(e){
					var ox=e.layerX
					var oy=e.layerY
					obj.moveTo(ox,oy)
					can.οnmοusemοve=function(e){
						var mx=e.layerX
						var my=e.layerY
						obj.lineTo(mx,my)
						obj.stroke()
					}
					can.οnmοuseup=function(){
						can.οnmοusemοve=null
					}
				}
			}
		</script>
	</head>
	<body>
		<canvas id="can" width="1200" height="900"></canvas>
	</body>
</html>