HTML如何制作画板？canvas绘图怎么实现？

<canvas id="myDrawingBoard" width="800" height="600" style="border:1px solid #ccc; background-color: #fff; display: block; margin: 20px auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);"></canvas>

getContext('2d')

const canvas = document.getElementById('myDrawingBoard');
const ctx = canvas.getContext('2d');

// 设置一些初始的绘图样式，比如线条粗细、线帽样式和颜色
ctx.lineWidth = 4; // 默认画笔粗细
ctx.lineCap = 'round'; // 线条末端样式，让笔触更圆润
ctx.strokeStyle = '#333'; // 默认画笔颜色

let isDrawing = false; // 标记当前是否正在绘制
let lastX = 0; // 上次鼠标的X坐标
let lastY = 0; // 上次鼠标的Y坐标

// 监听鼠标按下事件：开始绘制
canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    // 记录下鼠标按下的起始点坐标
    // e.offsetX 和 e.offsetY 相对于目标元素（canvas）的偏移量，非常方便
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

// 监听鼠标移动事件：如果正在绘制，则画线
canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return; // 如果没按着鼠标，就啥也不做

    // 路径开始
    ctx.beginPath();
    // 移动到上一个点
    ctx.moveTo(lastX, lastY);
    // 画线到当前点
    ctx.lineTo(e.offsetX, e.offsetY);
    // 描边，让线条显示出来
    ctx.stroke();

    // 更新上一个点为当前点，为下一次绘制做准备
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

// 监听鼠标松开事件：停止绘制
canvas.addEventListener('mouseup', () => isDrawing = false);

// 监听鼠标移出canvas区域事件：也停止绘制，防止鼠标在外部松开后，再移回来继续画
canvas.addEventListener('mouseout', () => isDrawing = false);

beginPath()

moveTo(x, y)

lineTo(x, y)

arc()

rect()

stroke()

fill()

fillStyle

lineWidth

lineCap

lineJoin

ctx.save()

ctx.restore()

restore()

<input type="color">

change

<input type="color" id="colorPicker" value="#333333">

const colorPicker = document.getElementById('colorPicker');
colorPicker.addEventListener('change', (e) => {
    ctx.strokeStyle = e.target.value;
});

// 当橡皮擦模式开启时
// ctx.strokeStyle = '#ffffff'; // 假设背景是白色
// ctx.lineWidth = 20; // 橡皮擦通常比画笔粗