H5 js canvas 手机触屏 模拟毛笔字 怎么弄

最近看见一个手机端微信公众号内页的一个互动小游戏，是写字游戏，用canvas怎么去实现写出来的字根据手指触动的时间来控制 画笔的粗细， 类似这样的，我做出来的不能控制画笔粗细

20 个解决方案

#1

你自己都说了“根据手指触动的时间来控制 画笔的粗细，”
就按这方法做呗

#2

哪个公众号，网址在哪里？

#3

我觉得这个应该是留给  3dtouch 的功能

#4

引用 2 楼 xmt1139057136 的回复:

哪个公众号，网址在哪里？

http://www.chubao.cn/s/eventhall/index.html?qr=1 触摸宝

#5

引用 楼主 ztj771299799 的回复:

最近看见一个手机端微信公众号内页的一个互动小游戏，是写字游戏，用canvas怎么去实现写出来的字根据手指触动的时间来控制 画笔的粗细， 类似这样的，我做出来的不能控制画笔粗细

是啊 可是我没弄出来 控制时间，我是运用每滑动一个点就记录一下鼠标的唯一，点点链接就成线的还没想好怎么控制时间，而且这个不只是时间，还有控制字体颜色的

#6

引用 3 楼 KK3K2005 的回复:

我觉得这个应该是留给  3dtouch 的功能

3dtouch 我没用过 我去找找

#7

http://www.html5tricks.com/html5-canvas-draw.html

#8

引用 7 楼 xmt1139057136 的回复:

http://www.html5tricks.com/html5-canvas-draw.html

不是这样子的，我看见的这个例子 是可以根据滑动时间来控制画笔的粗细以及颜色深浅 ，只是我不会

#9

该回复于2016-07-09 13:35:27被管理员删除

#10

学习了~

#11

引用 8 楼 ztj771299799 的回复:

Quote: 引用 7 楼 xmt1139057136 的回复:

http://www.html5tricks.com/html5-canvas-draw.html

不是这样子的，我看见的这个例子 是可以根据滑动时间来控制画笔的粗细以及颜色深浅 ，只是我不会

可以根据每次移动的距离和时间的比来调整lineWidth

#12

观摩技术性解决方法

#13

引用 11楼天际的海浪 的回复:

Quote: 引用 8 楼 ztj771299799 的回复:

Quote: 引用 7 楼 xmt1139057136 的回复:

http://www.html5tricks.com/html5-canvas-draw.html

不是这样子的，我看见的这个例子 是可以根据滑动时间来控制画笔的粗细以及颜色深浅 ，只是我不会

可以根据每次移动的距离和时间的比来调整lineWidth

我是记录每次鼠标的位移，也就是是哦没吃就说1px，记录时间是从我开始到松开鼠标结束吗

#14

简单的写了一个
http://blog.csdn.net/jslang/article/details/50790811

#15

引用 14楼天际的海浪 的回复:

简单的写了一个
http://blog.csdn.net/jslang/article/details/50790811

谢谢大神，这种编程的思想怎么才能领悟到呢，像这类还有点像游戏的是不是都要有算法哇！100个

#16

该回复于2016-03-08 08:21:00被管理员删除

#17

引用 14 楼 jslang 的回复:

简单的写了一个
http://blog.csdn.net/jslang/article/details/50790811

果然是大神

#18

这个代码是怎么写的呀

#19

引用 14 楼 jslang 的回复:

简单的写了一个
http://blog.csdn.net/jslang/article/details/50790811

在手机端不行呀

#20

引用 19 楼 mumuxi_1990 的回复:

Quote: 引用 14 楼 jslang 的回复:

简单的写了一个
http://blog.csdn.net/jslang/article/details/50790811

在手机端不行呀

手机端是这个
http://blog.csdn.net/jslang/article/details/50927380

#21

• canvas 手写毛笔字效果