使用HTML5做个画图板的方法介绍

点评：做画图板，自然使用html5的canvas来实现了。在canvas中我们可以画圆，画矩形，画自定义的线条等等。这次主要使用的画圆跟画线条来实现。html中支持对触摸事件的响应

首先要说明的是这里不是用鼠标画画，而是在触摸设备上用手指，比如ipad。jaQHTML5中文学习网 - HTML5先行者学习网

做画图板，自然使用html5的canvas来实现了。在canvas中我们可以画圆，画矩形，画自定义的线条等等。这次主要使用的画圆跟画线条来实现。html中支持对触摸事件的响应。jaQHTML5中文学习网 - HTML5先行者学习网

onTouchStart 触摸开始jaQHTML5中文学习网 - HTML5先行者学习网

onTouchMove 触摸滑动jaQHTML5中文学习网 - HTML5先行者学习网

onTouchEnd 触摸结束jaQHTML5中文学习网 - HTML5先行者学习网

有了这些事件，我们实现用手指在浏览器里画画就很简单了。jaQHTML5中文学习网 - HTML5先行者学习网

IPAD上的效果：jaQHTML5中文学习网 - HTML5先行者学习网

jaQHTML5中文学习网 - HTML5先行者学习网

思路：当手指触摸到屏幕的时候在onTouchStart 事件中在手指触摸的位置上添加一个圆；当手指开始滑动的时候在onTouchMove中不断的从上一个触摸点到下一个点画线条。jaQHTML5中文学习网 - HTML5先行者学习网

HTML：jaQHTML5中文学习网 - HTML5先行者学习网

jaQHTML5中文学习网 - HTML5先行者学习网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://.w3.org/1999/xhtml">jaQHTML5中文学习网 - HTML5先行者学习网

<head>jaQHTML5中文学习网 - HTML5先行者学习网

<title>Canvas</title>jaQHTML5中文学习网 - HTML5先行者学习网

<meta name = "viewport" content = "width = device-width, user-scalable = no">jaQHTML5中文学习网 - HTML5先行者学习网

</head>jaQHTML5中文学习网 - HTML5先行者学习网

<body>jaQHTML5中文学习网 - HTML5先行者学习网

<canvas ></canvas>jaQHTML5中文学习网 - HTML5先行者学习网

<script type="text/javascript" src="canvasScript.js" charset="utf-8"></script>jaQHTML5中文学习网 - HTML5先行者学习网

</body>jaQHTML5中文学习网 - HTML5先行者学习网

</html>jaQHTML5中文学习网 - HTML5先行者学习网

jaQHTML5中文学习网 - HTML5先行者学习网

JS：jaQHTML5中文学习网 - HTML5先行者学习网

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-23011-1.html