50projects50days知识点-22-drawing-app

示例网址：

https://50projects50days.com/projects/drag-n-drop/
http://50projects.tc.cluski.top/50projects50days/drag-n-drop/

效果：

思路：

主要是用了html5的canvas相关的东西

canvas简单使用

使用canvas需要在html中写上<canvas>标签：

<canvas id="canvas" width="800" height="700"></canvas>

然后在js中获取该元素，并获取对应的2d的Context

const canvasEl = document.querySelector('canvas');
const ctx = canvasEl.getContext('2d');

之后就可以使用这个Context对象来进行画图了。

画移动轨迹

在本例子中会给根据鼠标的移动轨迹来画线段：

let isPressed = false
let globalX = undefined
let globalY = undefined

canvasEl.addEventListener('mousedown', (e) => {
    let offsetX = e.offsetX;
    let offsetY = e.offsetY;

    isPressed = true
    globalX = offsetX
    globalY = offsetY
})

canvasEl.addEventListener('mouseup', () => {
    isPressed = false
    globalY = undefined
    globalX = undefined
})

canvasEl.addEventListener('mousemove', (e) => {
    if (!isPressed) {
        return
    }
    // 在开始绘图之前，需要调用beginPath()方法
    ctx.beginPath()
    // 一开始需要先画一个圆形
    // 圆形方法为arc(初始x坐标，初始y坐标，半径，起始角度，终止角度)
    ctx.arc(globalX, globalY, Number(size), 0, Math.PI * 2)
    ctx.fillStyle = color
    // 完成之后需要调用fill()函数来填充
    ctx.fill()

    let offsetXMove = e.offsetX;
    let offsetYMove = e.offsetY;
    ctx.beginPath()
    // 画路径的话，需要使用到moveTo、lineTo函数
    ctx.moveTo(globalX, globalY)
    ctx.lineTo(offsetXMove, offsetYMove)
    ctx.lineWidth = size * 2
    ctx.strokeStyle = color
    // 同样需要使用stroke来进行填充
    ctx.stroke()

    globalX = offsetXMove
    globalY = offsetYMove
})

相关链接：

Canvas 教程 - Web API 接口参考 | MDN (mozilla.org)

HTML5 Canvas | 菜鸟教程 (runoob.com)