SOURCE

(function(){
//---------画板
const dcs = document.getElementById('drawingCanvas'), d2d = dcs.getContext('2d');
const sdw = document.getElementById('start_draw'),edw = document.getElementById('end_draw');
const ic = document.getElementById('id_color');
//是否 正在绘制
let painting = false;
//---------截图
const snc = document.getElementById('screenCanvas'), s2d = snc.getContext('2d');
const sdr = document.getElementById('start_screen'),edr = document.getElementById('end_screen');
const sc = document.getElementById('screen_range');
let ot={x:0,y:0,w:1,h:1,t:0,l:0,ox:0,oy:0}, screening = false;
//开始绘制
function startPosition(e) { painting = true; draw(e); }
//结束绘制
function finishedPosition() { painting = false; d2d.beginPath(); }
//绘制
function draw(e) {
    if (!painting) return;
    d2d.lineWidth = 5; // 设置线条宽度
    d2d.lineCap = 'round'; // 设置线条末端样式
    d2d.strokeStyle = ic.value; // 设置线条颜色
    d2d.lineTo(e.clientX - dcs.offsetLeft, e.clientY - dcs.offsetTop); // 获取鼠标位置并绘制线条
    d2d.stroke(); // 绘制线条到画布上
    d2d.beginPath(); // 开始新路径，避免线条连接问题
    d2d.moveTo(e.clientX - dcs.offsetLeft, e.clientY - dcs.offsetTop); // 将线条起点设置为当前鼠标位置，以便连续绘制
}
function startDraw(){
    endScreen();
    // var rect = drawCanvas.getBoundingClientRect();
    // var x = e.clientX - rect.left; // 获取鼠标相对于canvas的x坐标
    // var y = e.clientY - rect.top; // 获取鼠标相对于canvas的y坐标
    dcs.addEventListener('mousedown', startPosition);// 监听鼠标按下事件开始绘制
    dcs.addEventListener('mousemove', draw);// 监听鼠标移动事件进行绘制
    dcs.addEventListener('mouseup', finishedPosition);// 监听鼠标释放事件结束绘制
    // 监听鼠标离开画布事件结束绘制，以防鼠标快速移出画布外的情况
    dcs.addEventListener('mouseout', finishedPosition);
    sdw.disabled = true;
    edw.disabled = false;
}
function endDraw(){
    dcs.removeEventListener('mousedown', startPosition);
    dcs.removeEventListener('mousemove', draw);
    dcs.removeEventListener('mouseup', finishedPosition);
    dcs.removeEventListener('mouseout', finishedPosition);
    edw.disabled = true;
    sdw.disabled = false;
}
sdw.addEventListener('click',startDraw);
edw.addEventListener('click',endDraw);
startDraw();
//绘制截图区域
function upd(){
    sc.style.width = ot.w + 'px';
    sc.style.height = ot.h + 'px';
    sc.style.left = ot.l + 'px';
    sc.style.top = ot.t + 'px';
}
function openScreen(e){
    screening = true;
    //鼠标在元素内坐标 e.offsetX; 鼠标在页面坐标 e.clientX
    ot.x = e.clientX; ot.y = e.clientY; ot.ox = e.offsetX; ot.oy = e.offsetY;
    screen(e);
    sc.style.display = 'block';
}
function closeScreen(){ screening = false; }
function screen(e){
    if(!screening){ return; }
    let cx = e.clientX, cy = e.clientY;//鼠标
    if( cx >= ot.x ){ ot.w = cx - ot.x ; ot.l = ot.x; }else{ ot.w = ot.x - cx ; ot.l = cx; }
    if( cy >= ot.y ){ ot.h = cy - ot.y ; ot.t = ot.y; }else{ ot.h = ot.y - cy ; ot.t = cy; }
    upd();//绘制截图区域
    let x = cx >= ot.x?ot.ox:e.offsetX, y = cy >= ot.oy?ot.oy:e.offsetY;
    //方案1 截取原画布的一部分 drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
    s2d.clearRect(0, 0, snc.width, snc.height);//清空画布
    s2d.drawImage(dcs, x, y, ot.w, ot.h, 0, 0, ot.w, ot.h);
    //方案2 获取原画布的一部分像素数据--将这些像素数据放到新画布上
    //const gd = d2d.getImageData(100, 100, 250, 250); s2d.putImageData(gd, 0, 0);
}
function startScreen(){
    endDraw();
    dcs.addEventListener('mousedown', openScreen);
    dcs.addEventListener('mousemove', screen);
    dcs.addEventListener('mouseup', closeScreen);
    dcs.addEventListener('mouseout', closeScreen);
    sdr.disabled = true;
    edr.disabled = false;
}
function endScreen(){
    dcs.removeEventListener('mousedown', openScreen);
    dcs.removeEventListener('mousemove', screen);
    dcs.removeEventListener('mouseup', closeScreen);
    dcs.removeEventListener('mouseout', closeScreen);
    edr.disabled = true;
    sdr.disabled = false;
    sc.style.display = 'none';
}
sdr.addEventListener('click',startScreen);
edr.addEventListener('click',endScreen);
})()

<div>
    <button type="button" id="start_draw">开始绘制</button>
    <input type="color" id="id_color" value="#000">
    <button type="button" id="end_draw">结束绘制</button>
    <span>--</span>
    <button type="button" id="start_screen">开始截图</button>
    <button type="button" id="end_screen">结束截图</button>
</div>
<div>
    <div id="screen_range" class="screen"></div>
    <canvas id="drawingCanvas" width="600" height="400" style="border:1px solid #000000;"></canvas>
    <canvas id="screenCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
</div>

.screen{
  position: absolute;
  width: 10px; /* 更宽一些以便看到十字线效果 */
  height: 10px; /* 更宽一些以便看到十字线效果 */
  background-color: transparent; /* 背景透明 */
  pointer-events: none; /* 防止十字线挡住鼠标事件 */
  z-index: 1000; /* 确保十字线在最上层 */
  border: 1px dashed red; /* 虚线 */
}