如何使用onmousedown在画布上夹一个洞，同时遵循鼠标路径

Question

目标：

1. 显示全部在div内部的画布遮蔽的背景图像
2. onmousedown和onmousemove：解除背景图像以鼠标指针为中心圆形部分的蒙版。
3. 返回一个完整的掩码onmouseup

这是我目前所掌握的--任何帮助都将不胜感激。它似乎可以工作，但它留下的痕迹，鼠标曾经去过。我希望它只显示周围的圆形区域，鼠标立即在任何给定的点。

功能JSfiddle:https://jsfidle.net/shaedmorgan/4325d8pg/19/

我尝试过更改globalCompositeOperation，并使用clip（），但似乎无法正确处理。我认为主要问题在于“重绘”功能。谢谢你来看看。

null

let canvas = document.getElementById('canvas');

window.onload = function () {
canvas.width = 200;
canvas.height = 200;
let centerx = canvas.width/2;
let centery = canvas.height/2;
let radius = 100;

let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);
ctx.fill();
}

function getMouse(e, canvas) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: (e.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
    y: (e.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
  };
}

function redraw (canvas, mouse) {
  var ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = 'destination-in'
  ctx.beginPath();
  ctx.arc((canvas.width) / 2, (canvas.height) / 2, (canvas.width) / 2, 0, 2 * Math.PI)
  ctx.arc(mouse.x, mouse.y, (canvas.width) / 4, 0, 2 * Math.PI)
  ctx.fill('evenodd'); 
}

function moveOnMouseDown (canvas, moveFunction) {
  var endMove = function () {
    canvas.width = 200;
    canvas.height = 200;
    let centerx = canvas.width/2;
    let centery = canvas.height/2;
    let radius = 100;

    let ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);
    ctx.fill();
    window.removeEventListener('mousemove', moveFunction);
    window.removeEventListener('mouseup', endMove);
  };

  canvas.addEventListener('mousedown', function (event) {
    event.stopPropagation();
    var canvas = document.getElementById('canvas')
    var mouse = getMouse(event,canvas)
    redraw(canvas,mouse)
    window.addEventListener('mousemove', moveFunction);
    window.addEventListener('mouseup', endMove);
  });
}

moveOnMouseDown(document.getElementById('canvas'), function (e) {
  var mouse = getMouse(e, document.getElementById('canvas'));
  //console.log(mouse) <--confirmed mouse position is good.
  redraw(document.getElementById('canvas'), mouse);
})

#TML_div {
  position: absolute;
  overflow: hidden;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

html prettyprint-override"><div id='TML_div'>
  <canvas id='canvas'></canvas>
</div>

null

#TML_div {
  position: absolute;
  overflow: hidden;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

<div id='TML_div'>
  <canvas id='canvas'></canvas>
</div>

Answer 1

重绘功能中重置画布：

null

let canvas = document.getElementById('canvas');

window.onload = function() {
  drawCircle();
}

function clearCanvas() {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawCircle() {
  canvas.width = 200;
  canvas.height = 200;
  let centerx = canvas.width / 2;
  let centery = canvas.height / 2;
  let radius = 100;

  let ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);
  ctx.fill();
}

function getMouse(e, canvas) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: (e.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
    y: (e.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
  };
}

function redraw(canvas, mouse) {
  clearCanvas();
  drawCircle();

  const ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = 'destination-in'
  ctx.beginPath();
  ctx.arc((canvas.width) / 2, (canvas.height) / 2, (canvas.width) / 2, 0, 2 * Math.PI)
  ctx.arc(mouse.x, mouse.y, (canvas.width) / 4, 0, 2 * Math.PI)
  ctx.fill('evenodd');

}

function moveOnMouseDown(canvas, moveFunction) {
  var endMove = function() {
    canvas.width = 200;
    canvas.height = 200;
    let centerx = canvas.width / 2;
    let centery = canvas.height / 2;
    let radius = 100;

    let ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);
    ctx.fill();
    window.removeEventListener('mousemove', moveFunction);
    window.removeEventListener('mouseup', endMove);
  };

  canvas.addEventListener('mousedown', function(event) {
    event.stopPropagation();
    var canvas = document.getElementById('canvas')
    var mouse = getMouse(event, canvas)
    redraw(canvas, mouse)
    window.addEventListener('mousemove', moveFunction);
    window.addEventListener('mouseup', endMove);
  });
}

moveOnMouseDown(document.getElementById('canvas'), function(e) {
  var mouse = getMouse(e, document.getElementById('canvas'));
  //console.log(mouse) <--confirmed mouse position is good.
  redraw(document.getElementById('canvas'), mouse);
})

#TML_div {
  position: absolute;
  overflow: hidden;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url(https://source.unsplash.com/random);
}

html lang-html prettyprint-override"><div id='TML_div'>
  <canvas id='canvas'></canvas>
</div>