前置知识：

canvas 是一个可以使用脚本 (通常为 JavaScript ) 来绘制图形的 HTML 元素

高度100vh表示与页面高度保持一致
宽度100vw表示与页面宽度保持一致
vh和vw都是css属性，不能写于html中
canvas.width和canvas.style.width不同，前者html后者css
canvas 和 img 一样可以直接设置宽高，也可以使用 CSS 来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸，如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。
<canvas id="canvas" width="100" height="100"></canvas>

画点逻辑：

（鼠标在页面点击时出现黑点）
利用 onclick监听
通过console.log得到鼠标的位置
然后创建一个div
然后在这个div上添加css样式
最后把这个div放到canvas里面 canvas.appendChild(div)

进入练习：

通过使用 document.getElementById() 方法来为 canvas 元素得到 DOM 对象。一旦有了元素对象，就可以通过使用它的 getContext() 方法来访问绘画上下文。

  1. let canvas = document.getElementById("canvas")、
  2. let ctx = canvas.getContext("2d")

让 canvas 的宽高变为文档的宽高

  1. canvas.width = document.documentElement.clientWidth
  2. canvas.height = document.documentElement.clientHeight

设置图形的填充颜色、描边颜色、线条宽度、线条结束方式

  1. ctx.fillStyle = 'black'
  2. ctx.strokeStyle = 'black'
  3. ctx.lineWidth = 6
  4. ctx.lineCap = 'round'

通过 let painting 控制开启和停止绘画

  1. let painting = false  
  2. let last

写一个 drawLine 函数，来调用绘制路径的代码

  • beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
  • moveTo(x, y) 将笔触移动到指定的坐标x以及y上
  • lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线
  • stroke() 通过线条来绘制图形轮廓
  1. function drawLine(x1,y1,x2,y2) {
  2.                 ctx.beginPath()
  3.                 ctx.moveTo(x1,y1)
  4.                 ctx.lineTo(x2,y2)
  5.                 ctx.stroke()
  6.                 }

声明在触屏设备上开启触摸功能

  1. let isTouchDevice = 'ontouchstart' in  document.documentElement

如果是触屏设备，通过 let last 记录上一次的起点位置
ontouchstart 第一次按下手指触摸
ontouchmove 从第二次开始，移动手指
touches[0] 即一根手指，一点触控

  1. if (isTouchDevice) {
  2.                 canvas.ontouchstart = (e) =>{
  3.                     let x = e.touches[0].clientX
  4.                     let y = e.touches[0].clientY
  5.                     last = [x, y]
  6.                 }
  7.                 canvas.ontouchmove = (e) => {
  8.                     let x = e.touches[0].clientX
  9.                     let y = e.touches[0].clientY
  10.                     drawLine(last[0],last[1], x, y)
  11.                     last = [x, y]
  12.                 }

如果不是，鼠标放下时，开启绘画，鼠标移动时会将上一个点当做起始点继续绘画，直到鼠标抬起，停止绘画。

  1. else {
  2. canvas.onmousedown = (e) => {
  3.                 painting = true  
  4.                 last = [e.clientX,e.clientY]
  5.                 }  
  6. canvas.onmousemove = (e) => {
  7.                 if (painting === true) {
  8.                     drawLine(
  9.                         last[0],last[1],e.clientX,e.clientY
  10.                     )
  11.                 last = [e.clientX,e.clientY]
  12.                 }
  13.                 }
  14. canvas.onmouseup = () => {
  15.                 painting = false  
  16.                 }
  17. }

注意

hs . -c-1 后的bash不要关闭，会影响预览
若需要其他操作则再开一个bash即可

画线逻辑：
（鼠标在页面移动时不停出现黑点——点连成线）
bug：
鼠标一移动就画线，没有起始和终止控制；
js操作dom很慢，效率低——跨线程，不应该如此频繁dom

解决bug——利用canvas标签，不用新建dom节点
了解canvas——inline元素设置宽高无作用——类似img标签
html标签中可以直接设置cnavas宽高，但同时在css中设置宽高的话则会覆盖掉html中的宽高
cnavas的宽高的用法：若html中有设置宽高，则优先html中的为准

var canvas = document.getElementById(“canvas”)——通过”canvas”这个id找到canvas
rect矩形
js获取屏幕宽高——屏幕可见区域的宽高
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
body的高度是由内容的高度确定的
两个等于号==有bug，用三个等于号===安全
var是旧语法，用新语法let
stroke描边 fill填充

《手机上如何实现》
找到touches，利用数组
《如何点连成线，在点与点的过程中增加线》
如何确定上一次“点”的位置——创建一个变量存储
“上一次的点”要实时更新——实时更新变量存储的内容