Note
思路第一步：画一个点，然后移动打点
-
onclick：鼠标点击事件 -
让鼠标的尖尖为圆圈的原点（div）
image.png -
onmousemove：鼠标移动
image.png
效果：每次移动都会画点，JS与CSS是跨线程通信，较慢，使线条不连贯且性能较差。 - 在html上写的宽高是会被CSS覆盖
canvas中设定好长宽之后，若用css强行修改，会拉伸canvas图形使其模糊。 - 当用户鼠标移动时，浏览器会调用canvas.onmousemove，给它传参数，就是e
- 不能直接在HTML标签里添加长宽的单位，因为单位是css属性，而标签是HTML的，而且加了也没用。
- 使body占满视口
-
display: block
查看Computed，body为内联元素，内联元素的高度是其内容高度，所以将内联元素改为块元素
image.png -
height: 100vh;width: 100vw;意思是长宽为视口长宽
image.png
-
-
7因为4的缘故，会使图形模糊，所以删掉css样式，在HTML里面设置。（图片里为canvas）
image.png
读取视口长宽传给canvas的长宽。
思路第二步：点连成线
canvas.onmousedown：鼠标按下canvas.onmouseup：鼠标放开-
将方块换成圆形，并且为实心
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
在网上多查文档
image.png -
var isTouchDevice = 'ontouchstart' in document.documentElement;：可以在手机上使用
搜索手机可支持设备，用console.log去一个一个试
还需要用开发者工具去找手机上手指触屏的位置信息
image.png -
在文档中找线的绘制方法
需要注意的是连线为上一个点到现在的点，所以需要两个坐标，分别为上一次与这次的。
image.png ctx.lineWidth = 10：在调大线条宽度时，发现点与点之间的连线很细，显的线条很粗糙。
ctx.lineCap = "round"：可以使线条点与点之间填充圆形。
根据文档lineCap可以设置线条末端样式
butt
线段末端以方形结束。
round
线段末端以圆形结束。
square
线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
"round" 和 "square" 值会使线条略微变长。canvas.ontouchstart：手指触摸屏幕将代码也放进手机端里面
