首先要说明的是这里不是用鼠标画画,而是在触摸设备上用手指,比如ipad。
做画图板,自然使用html5的canvas来实现了。在canvas中我们可以画圆,画矩形,画自定义的线条等等。这次主要使用的画圆跟画线条来实现。html中支持对触摸事件的响应。
onTouchStart 触摸开始
onTouchMove 触摸滑动
onTouchEnd 触摸结束
有了这些事件,我们实现用手指在浏览器里画画就很简单了。
IPAD上的效果:
思路:当手指触摸到屏幕的时候在onTouchStart 事件中在手指触摸的位置上添加一个圆;当手指开始滑动的时候在onTouchMove中不断的从上一个触摸点到下一个点画线条。
HTML:
新闻热点
疑难解答