canvas 绘制画板（1）

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

canvas  和 img 一样可以直接设置宽高，也可以使用 CSS 来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸，如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。

<canvas id="canvas" width="100" height="100"></canvas>

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

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

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

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

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

ctx.fillStyle = 'black'
ctx.strokeStyle = 'black'
ctx.lineWidth = 6
ctx.lineCap = 'round'

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

let painting = false  
let last

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

• beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
• moveTo(x, y) 将笔触移动到指定的坐标x以及y上
• lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线
• stroke() 通过线条来绘制图形轮廓

function drawLine(x1,y1,x2,y2) {
                ctx.beginPath()
                ctx.moveTo(x1,y1)
                ctx.lineTo(x2,y2)
                ctx.stroke()
                }

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

let isTouchDevice = 'ontouchstart' in  document.documentElement

如果是触屏设备，通过 let last 记录上一次的起点位置

ontouchstart 第一次按下手指触摸

ontouchmove 从第二次开始，移动手指

touches[0] 即一根手指，一点触控

if (isTouchDevice) {
                canvas.ontouchstart = (e) =>{
                    let x = e.touches[0].clientX
                    let y = e.touches[0].clientY
                    last = [x, y]
                }
                canvas.ontouchmove = (e) => {
                    let x = e.touches[0].clientX
                    let y = e.touches[0].clientY
                    drawLine(last[0],last[1], x, y)
                    last = [x, y]
                }

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

else {
canvas.onmousedown = (e) => {
                painting = true  
                last = [e.clientX,e.clientY]
                }  
canvas.onmousemove = (e) => {
                if (painting === true) {
                    drawLine(
                        last[0],last[1],e.clientX,e.clientY
                    )
                last = [e.clientX,e.clientY]
                }
                }
canvas.onmouseup = () => {
                painting = false  
                }
}

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源