Note

——https://github.com/AkaneTang/js-canvas-1

思路第一步：画一个点，然后移动打点

1. onclick：鼠标点击事件

2. 让鼠标的尖尖为圆圈的原点（div）

   
   image.png
3. onmousemove：鼠标移动
   image.png
   效果：每次移动都会画点，JS与CSS是跨线程通信，较慢，使线条不连贯且性能较差。
4. 在html上写的宽高是会被CSS覆盖
   canvas中设定好长宽之后，若用css强行修改，会拉伸canvas图形使其模糊。
5. 当用户鼠标移动时，浏览器会调用canvas.onmousemove，给它传参数，就是e
6. 不能直接在HTML标签里添加长宽的单位，因为单位是css属性，而标签是HTML的，而且加了也没用。
7. 使body占满视口
   1. display: block
      查看Computed，body为内联元素，内联元素的高度是其内容高度，所以将内联元素改为块元素
      image.png
   2. height: 100vh;width: 100vw;意思是长宽为视口长宽
      image.png

8. 7因为4的缘故，会使图形模糊，所以删掉css样式，在HTML里面设置。（图片里为canvas）

   
   image.png
   

   读取视口长宽传给canvas的长宽。

思路第二步：点连成线

1. canvas.onmousedown：鼠标按下

2. canvas.onmouseup：鼠标放开

3. 将方块换成圆形，并且为实心
   https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
   在网上多查文档
   

   image.png

4. var isTouchDevice = 'ontouchstart' in document.documentElement;：可以在手机上使用
   搜索手机可支持设备，用console.log去一个一个试
   还需要用开发者工具去找手机上手指触屏的位置信息
   

   image.png

5. 在文档中找线的绘制方法
   需要注意的是连线为上一个点到现在的点，所以需要两个坐标，分别为上一次与这次的。

   
   image.png

6. ctx.lineWidth = 10：在调大线条宽度时，发现点与点之间的连线很细，显的线条很粗糙。
   ctx.lineCap = "round"：可以使线条点与点之间填充圆形。
   根据文档lineCap可以设置线条末端样式
   butt
   线段末端以方形结束。
   round
   线段末端以圆形结束。
   square
   线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
   "round" 和 "square" 值会使线条略微变长。

7. canvas.ontouchstart：手指触摸屏幕

8. 将代码也放进手机端里面