当前位置:Gxlcms > html代码 > 使用HTML5做个画图板的方法介绍_html5教程技巧

使用HTML5做个画图板的方法介绍_html5教程技巧

时间:2021-07-01 10:21:17 帮助过:9人阅读

首先要说明的是这里不是用鼠标画画,而是在触摸设备上用手指,比如ipad。

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

onTouchStart 触摸开始

onTouchMove 触摸滑动

onTouchEnd 触摸结束

有了这些事件,我们实现用手指在浏览器里画画就很简单了。

IPAD上的效果:

image

思路:当手指触摸到屏幕的时候在onTouchStart 事件中在手指触摸的位置上添加一个圆;当手指开始滑动的时候在onTouchMove中不断的从上一个触摸点到下一个点画线条。

HTML:

代码如下:



Canvas