概要工作以来，写过vue、react、正则、算法、小程序等知识，唯独没有写过canvas，因为实在不会啊！2018年，给自己设定一个小目标：学会canvas，达到的效果是能用canvas实现一些css3不容易实现的动画。本文作为学习canvas的第一篇收获，很多人初学canvas做的第一个demo是实现一个“钟”，当然，我也实现了一...
概要
工作以来，写过vue、react、正则、算法、小程序等知识，唯独没有写过canvas，因为实在不会啊！
2018年，给自己设定一个小目标：学会canvas，达到的效果是能用canvas实现一些css3不容易实现的动画。
本文作为学习canvas的第一篇收获，很多人初学canvas做的第一个demo是实现一个“钟”，当然，我也实现了一个，不过不讲这个，而是讲讲一个更有趣、也更简单的玩意。
鼠标按住绘制轨迹
需求
在一块canvas画布上，初始状态画布什么都没有，现在，我想给画布加一点鼠标事件，用鼠标在画布上写字。具体的效果是鼠标移动到画布上任意一点，然后按住鼠标，移动鼠标的位置，就可以开始写字啦！
原理
先简单分析下思路，首先我们需要一个canvas画布，然后计算鼠标在画布上的位置，给鼠标绑定onmousedown事件和onmousemove事件，在移动过程中绘制出路径，松开鼠标的时候，绘制结束。
这个思路虽然很简单，但是里面有些地方需要小技巧实现。
1、需要一个html文件，包含canvas元素。
这是一个宽度800，高度400的画布。为什么没有写px呢？哦，暂时没搞懂，canvas文档推荐的。
<!doctype html>
<html class="no-js" lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" c
最低0.47元/天 解锁文章
1146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
