<canvas?width="600"?height="400"?id="canvas"?style="background-color:?#ddd;"></canvas>

window.onload?=?function?()?{????
    //?默認(rèn)鼠標(biāo)是沒有按下的????
    let?isDown?=?false;????
    //?記錄上一次鼠標(biāo)的位置????
    let?lastX?=?0;?//?x軸????
    let?lastY?=?0;?//?y軸????????
    //?獲取canvas
  ??const?canvas?=?document.getElementById("canvas");????
    //?獲取canvas的上下文????
    const?ctx?=?canvas.getContext("2d");????
    //?定義線條的寬度，即畫筆的粗細(xì)????
    ctx.lineWidth?=?3;????
    //?定義畫筆的顏色????
    ctx.strokeStyle?=?"#000";????
    /**
??????* 定義繪制方法
????? *?線條其實(shí)是由兩個點(diǎn)連起來的一個線段
????? * 一個又一個的小線段，連起來就組成了一個線條
??????*?在畫布上繪制線條，主要用到的三個核心方法??????
      * moveTo:?是 Canvas 2D API 將一個新的子路徑的起始點(diǎn)移動到?(x，y)?坐標(biāo)的法。???
      * lineTo:?是 Canvas 2D API 使用直線連接子路徑的終點(diǎn)到 x，y 坐標(biāo)的法。??????
      *?當(dāng)然，定義了起點(diǎn)和終點(diǎn)還不夠，還需要手動調(diào)用開始繪制這個路徑
? ? ? * startX 和 startY 一起組成了起點(diǎn)的坐標(biāo)
????? * endX?和 endY?一起組成了線段終點(diǎn)的坐標(biāo)
??????*/
????function?draw(startX, startY, endX, endY)?{????????
        //?起點(diǎn)????????
        ctx.moveTo(startX, startY);????????
        //?終點(diǎn)????????
        ctx.lineTo(endX, endY);????????
        // 調(diào)用 stroke，即可看到繪制的線條????????
        ctx.stroke();????
    }????
    //?監(jiān)聽鼠標(biāo)按下，得到按下時鼠標(biāo)在畫布上的坐標(biāo)????
    canvas.addEventListener("mousedown",?({?x,?y?})?=>?{
        isDown?=?true;
        // 按下時的點(diǎn)作為起點(diǎn)
        lastX?=?x;
        lastY?=?y;
        //?創(chuàng)建一個新的路徑
        ctx.beginPath();
    }, false);????
    //?監(jiān)聽鼠標(biāo)移動????
    canvas.addEventListener("mousemove",?({?x,?y?})?=>?{????????????
      //?沒有按下就不管
      if?(!isDown)?return;
      //?調(diào)用繪制方法
      draw(lastX,?lastY,?x,?y);
      //?把當(dāng)前移動時的坐標(biāo)作為下一次的繪制路徑的起點(diǎn)
      lastX?=?x;
      lastY?=?y;
    }, false);
    //?監(jiān)聽鼠標(biāo)抬起
    canvas.addEventListener("mouseup", ()?=>?{
      isDown?=?false;
      //?關(guān)閉路徑
      ctx.closePath();
    },?false);
    // 監(jiān)聽鼠標(biāo)移出
    canvas.addEventListener("mouseleave", () => {
        // 移出canvas范圍，也認(rèn)為是鼠標(biāo)抬起了，再移入需要重新按下鼠標(biāo)，避免移出之后再抬起鼠標(biāo)，重新進(jìn)入畫筆還能繼續(xù)畫的問題
        isDown = false;
        ctx.closePath();
    }, false);
};

//?使用canvas的toDataURL()方法，將畫布內(nèi)容轉(zhuǎn)換為base64格式的圖片數(shù)據(jù):
let?imgData?=?canvas.toDataURL('image/png');?
//?創(chuàng)建下載鏈接
let?link?=?document.createElement('a');
link.download?=?'picture.png';
link.href?=?imgData;
//?觸發(fā)點(diǎn)擊
link.click();
//?移除元素
document.body.removeChild(link);

window.onload?=?function?()?{????
    //?默認(rèn)鼠標(biāo)是沒有按下的????
    let?isDown?=?false;????
    //?//?記錄上一次鼠標(biāo)的位置????
    //?let?lastX?=?0;?//?x軸????
    //?let?lastY?=?0;?//?y軸??????
    //?這次要用數(shù)組來記錄????
    let?points?=?[];?//?這是一個筆畫的點(diǎn)????
    let?allPonits?=?[];?//?這是所有筆畫的點(diǎn)????????
    //?獲取canvas元素?????
    const?canvas?=?document.getElementById("canvas");????//?獲取canvas的上下文????
    const?ctx?=?canvas.getContext("2d");????//?定義線條的寬度，即畫筆的粗細(xì)????
    ctx.lineWidth?=?3;????//?定義畫筆的顏色????
    ctx.strokeStyle?=?"#000";????????
    function?draw(startX, startY, endX, endY)?{????????
        //?起點(diǎn)????????
        ctx.moveTo(startX, startY);????????
        //?終點(diǎn)????????
        ctx.lineTo(endX, endY);????????
        // 調(diào)用 stroke，即可看到繪制的線條????????
        ctx.stroke();????
    }????
    //?監(jiān)聽鼠標(biāo)按下，得到按下時鼠標(biāo)在畫布上的坐標(biāo)????
    canvas.addEventListener("mousedown", ({?x,?y?})?=>?{????????????
        isDown?=?true;????????????
        //?lastX?=?x;
        //?lastY?=?y;
        // 保存當(dāng)前坐標(biāo)作為起點(diǎn)
        points.push({?x,?y?});????????????
        //?創(chuàng)建一個新的路徑????????????
        ctx.beginPath();????????
     }, false);????
     //?監(jiān)聽鼠標(biāo)移動????
     canvas.addEventListener("mousemove", ({?x,?y?})?=>?{
         //?沒有按下就不管
         if?(!isDown)?return;
         //?調(diào)用繪制方法
         //?draw(lastX,?lastY,?x,?y);
         //?把當(dāng)前移動時的坐標(biāo)作為下一次的繪制路徑的起點(diǎn)????????????
         //?lastX?=?x;
         //?lastY?=?y;
         // 每次都取最后一個點(diǎn)，作為繪制的起點(diǎn)
         const?lastPoint?=?points.at(-1);
         draw(lastPoint.x,?lastPoint.y,?x,?y);
         //?把當(dāng)前的點(diǎn)保存起來，又作為下一次繪制的起點(diǎn)
         points.push({?x,?y?});
     }, false);
     //?監(jiān)聽鼠標(biāo)抬起????
     canvas.addEventListener("mouseup", (e)?=>?{????????????
         isDown?=?false;
         //?關(guān)閉路徑
         ctx.closePath();
         //?鼠標(biāo)抬起，說明當(dāng)前這一筆就結(jié)束了，把這一筆的所有點(diǎn)的數(shù)組放到總的里面
         allPonits.push(points);
         //?清空這一筆畫，為下一筆畫做準(zhǔn)備????????????
         points?=?[];
     }, false);
    // 監(jiān)聽鼠標(biāo)移出
    canvas.addEventListener("mouseleave", () => {
        // 移出canvas范圍，也認(rèn)為是鼠標(biāo)抬起了，再移入需要重新按下鼠標(biāo)，避免移出之后再抬起鼠標(biāo)，重新進(jìn)入畫筆還能繼續(xù)畫的問題
        isDown = false;
        // 關(guān)閉畫筆
        ctx.closePath();
        // 如果是先抬起鼠標(biāo)再移出，那么points里面為空，就不保存了
        // 如果是先移出范圍，移出時就保存，這樣也不會觸發(fā)上面的監(jiān)聽鼠標(biāo)抬起事件，也不會push。
        if (points.length) {
            allPonits.push(points);
        }
        // 移出時也清空，因?yàn)闊o法判斷是先抬起還是先移出的。
        points = [];
    }, false);
 };

<div>
??<button?id="prev">上一步</button>
??<button?id="reset">重寫</button>
</div>

const?prev?=?document.getElementById("prev");
const?reset?=?document.getElementById("reset"); 
//?清空畫布
function?resetPath()?{
    ctx.clearRect(0,?0,?canvas.width,?canvas.height);
}
//?上一步
prev.addEventListener("click",?(e)?=>?{
    //?canvas本身不會記錄用戶的每一步操作
    //?要回到上一步，只能一次性清空所有的
    resetPath();
    //?刪除最后一個筆畫
    allPonits.pop();
    //?遍歷所有的筆畫并重新繪制
    // allPoints 是個二維數(shù)組
    allPonits.forEach((ps)?=>?{
        ps.forEach((item,?index)?=>?{
          // 下一個坐標(biāo)點(diǎn)
          let?next?=?ps[index?+?1];
          if?(next)?{
            // 有下一個點(diǎn)才執(zhí)行，否則到最后一個會報錯
            // 開始重新繪制
            ctx.beginPath();
            draw(item.x,?item.y,?next.x,?next.y);
            ctx.closePath();
          }
       });??
    });
});
//?重寫
reset.addEventListener("click", ()?=>?{
    //?點(diǎn)擊重寫時清空畫布，并清空所有的點(diǎn)????
    resetPath();
    allPonits?=?[];
}, false);