HTML应用开发基础篇-Canvas画布之手机画图板

最新推荐文章于 2022-06-05 09:00:00 发布

来者不是客

最新推荐文章于 2022-06-05 09:00:00 发布

阅读量672

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43305922/article/details/103819339

版权

这篇博客介绍了手机端HTML Canvas画图板的开发，强调了与网页版的不同之处，如需在头部添加相应代码，并使用addEventListener处理事件，以及在手机上获取位置信息的特殊性。开发者需要在模拟器中查看效果才能实现画图功能。

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

这篇和之前写的那篇内容差不多，在手机端的画图板和网页版的画图板格式都差不多，但还是有些地方需要注意的。在手机上应用的时候，需要加上页面头部：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

另外触发事件也不再用 mouse 事件了，改用监听器事件：addEventListener ，获取位置信息也有所区别，具体内容见下面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<style type="text/css">
			canvas{
				border:1px solid gray;
				display: block;
				/*margin: 50px auto;*/
				
			}
			input{
				display: block;
				margin: 5px auto;
				width: 40px;
				height: 40px;
			}
		&l