利用canvas实现移动端画图(只需要能用手指画轨

draw-canvas

利用canvas实现移动端画图(只需要能用手指画轨迹线,可以放大缩小 )

思路

1、利用canvas标签进行绘图,添加touchstart、touchmove两个移动端触摸事件
2、初始化数据:ctx(content对象)、point(点)、distance(距离)、origin(缩放中心点)、scale (缩放倍数)、length()、isCanScale(是否可以缩放)、vendor(获取浏览器兼容)
3、初始化——获取对象、设置宽高和画笔;获取兼容浏览器的对象
4、开始触摸
一个触点: ——计算在画布的绝对定位并开始绘画
两个触点: ——阻止浏览器默认时间(浏览器缩放);计算开始时两个手指距离
5、触摸移动
一个触点: ——计算在画布的绝对定位并绘画
两个触点: ——阻止浏览器默认时间(浏览器缩放);计算中心点、结束时两个手指距离;
再根据手指间距离变化计算缩放的倍数
6、缩放动画

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。