Skip to content

fangsmile/penlineHandWriting

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

penlineHandWriting

hand writing with canvas

canvas实现带笔锋手写笔迹

具体过程: down事件的时候初始化当前绘制线条line;

move事件的时候将点加入到当前线条line,并开始绘制

up的时候将点加入绘制线条,并绘制完整一条线。

需要注意的点:

加入点的时候,距离太近的点不需要重复添加;

怎么形成笔锋效果呢? 很简单!就是在一条线段的最后几个点的lineWidth不断减小,我们这里选用了最后6个点,如果只选用六个阶梯变化,效果是很难看的,会看到一节节明显的线条变细的过程,效果不好。

所以我们有个关键的补点过程,我们会再每6个像素之间补一个点,根据线条粗细变化的范围和最后计算出来的点数,就可以知道每两点连线lineWidth的粗细。

这里的补点过程我们用到了在贝塞尔曲线上补点的算法。具体不明白的可以留言哈

博客详解;https://www.cnblogs.com/fangsmile/p/14324460.html

About

hand writing with canvas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published