思路：
直接上代码啦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<!-- 鼠标按下，移动开始绘制，鼠标松开结束绘制 -->
<body>
<canvas width="500px" height="300px" id="mycanvas"></canvas>
<!-- 来一个取色器 -->
<input type="color">
<script>
let mycanvas = document.querySelector("#mycanvas");
let ctx = mycanvas.getContext('2d');
let flag = false; //判断鼠标是否被按下
let color = "black";
mycanvas.onmousedown = function() {
flag = true;
ctx.beginPath(); //重新定义轨迹，避免连上一段线段的末尾
//获取用户取色器的值
color = document.querySelector('input[type=color]').value;
// 设置签名的颜色
ctx.strokeStyle = color;
}
mycanvas.onmousemove = function() {
if (flag) {
ctx.lineTo(event.offsetX, event.offsetY); //
ctx.stroke();
}
};
mycanvas.onmouseup = function() {
flag = false;
}
</script>
</body>
</html>
注意一个问题，绘制时要随时跟新绘制起点，不然会出现意想不到的结果哦。 （我写的代码里面，直接用 ctx.lineTo(event.offsetX, event.offsetY)）来随着鼠标的移动，自己再实现绘制起点的更新。