关于canvas的学习心得（二）

最新推荐文章于 2022-01-13 16:37:02 发布

小冥羽

最新推荐文章于 2022-01-13 16:37:02 发布

阅读量672

点赞数

文章标签： canvas js

本文链接：https://blog.csdn.net/a446438443/article/details/44200085

版权

本文探讨了使用Canvas制作手绘板的过程，特别关注了如何实现毛笔笔锋效果。通过分析书道和人民网手写功能，提出通过手写速度控制线条粗细，并解释了如何计算速度。遇到的问题是找到两圆外公切线来画出四边形，目前在寻求解决方案。同时，介绍了手写重播的实现方法，强调了JavaScript的运行机制在其中的作用。最后，分享了完整的代码，邀请读者交流改进。

摘要由CSDN通过智能技术生成

任务描述：

1>制作一个手机端的手绘板

2>要求能有毛笔的笔锋

3>画线能有轻重感

4>能重播手写过程

5>能提交保存

前面把一切准备工作都做好了，现在就涉及到了笔锋的设计了，经过多方查看，

如书道：http://www.theshodo.com/Write

人民网的手写送祝福：http://t.people.com.cn/wx/chunjie?from=singlemessage&isappinstalled=0

书道使用的是贴图，一个毛笔的点然后循环将这个点的贴图贴到canvas面板上，而人民网的则是使用圆点笔锋。

让我疑惑的是，我用radius获取不到手指的触摸面积，那他们是怎么做到画线轻重感的呢？

如果你正好进入了这两个网站，可以跟我一起试试。如果你开始慢慢的来，然后突然加速，是不是发现慢慢来的笔画粗些，而突然加速后的笔画细些？对了，就是通过手写速度控制笔画的，那么速度怎么获取呢？如果您仔细看了我前面的代码，肯定会发现有一个方法的说明"计算两点之间的距离函数，方便任务三的完成，请看下面分析"不知道您发现这句话了没有，对，就是通过距离获取速度，速度的定义是：单位时间内移动的距离，单位时间是由计算机自定义的，我们无法更改。那么久只能通过距离来获取了。

通过测试“10/dis+10”这个数据是比较靠近真实毛笔画的粗细的。

下面上具体代码：

function onTouchMove(event) {
    try
    {
      	event.preventDefault();
		var last1X=event.touches[0].pageX-canvasPosition.x;
		var last1Y=event.touc