Html5实现移动端的画板（仅画直线）

最新推荐文章于 2023-08-11 13:52:47 发布

No-Tomato

最新推荐文章于 2023-08-11 13:52:47 发布

阅读量498

点赞数 1

分类专栏：画板文章标签： html5 canvas javascript jquery

本文链接：https://blog.csdn.net/weixin_44259199/article/details/105436429

版权

本文详细介绍了如何使用HTML5的Canvas元素和JavaScript技术，在移动端创建一个仅支持绘制直线的画板应用。通过监听触屏事件，动态绘制用户在画布上的轨迹，实现简单但实用的绘画功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery.js"></script>
	<style type="text/css">
		input[type=button]{
			margin-left: 30px;
			margin-top: 10px;
			font-size: 40px;
			width: 200px;
			height: 50px;
		}
		input[type=text]{
			font-size: 40px;
			height: 35px;
		}
		input[type=color]{
			font-size: 40px;
			width: 448px;
			height: 35px;
		}
		label{
			margin-left: 30px;
		}
		.cover-box{
			position: fixed;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.2);
			display: none;
		}
		.buttons-box{
			background-color:white;
			width: 900px;
			height: 400px;
			position: fixed;left: 5%; top: 40%;
			border:1px #000000 solid;
			display:block;
		}
	</style>
	<body>
		<div class="cover-box">
			<div class = "buttons-box">
				<input style=&