如何使用 jquery 在 HTML 画布中的选定图像对象中添加渐变效果

Question

我有 html 画布，我将图像放在上面我想对图像应用线性渐变效果。我的场景是用户可以通过鼠标在画布上选择图像的某些部分，并且可以从颜色选择器中选择颜色。我只想对选定的部分应用效果。

Answer 1

这听起来像是createRadialGradient() 的工作：

var mouse = {
  down: false,
  x1: null,
  y1: null,
  x2: null,
  y1: null
};
var grad = 'transparent';
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = init;
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/D%C3%BClmen%2C_Kirchspiel%2C_B%C3%B6rnste%2C_Feld_--_2017_--_3171.jpg/500px-D%C3%BClmen%2C_Kirchspiel%2C_B%C3%B6rnste%2C_Feld_--_2017_--_3171.jpg";


function updateGrad() {
  var cx = mouse.x1;
  var cy = mouse.y1;
  var dist = Math.hypot(mouse.x1-mouse.x2, mouse.y1-mouse.y2);
    
  grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, dist);
  
  grad.addColorStop(1, 'black');
  grad.addColorStop(0, 'transparent');
}

function draw() {
  // draw the image
  ctx.drawImage(img, 0,0);
  // draw the gradient
  ctx.fillStyle = grad;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  // draw the line?
  ctx.beginPath();
  ctx.rect(mouse.x1 - 4, mouse.y1 - 4, 8, 8);
  ctx.moveTo(mouse.x1, mouse.y1);
  ctx.lineTo(mouse.x2, mouse.y2);
  ctx.rect(mouse.x2 - 4, mouse.y2 - 4, 8, 8);
  ctx.stroke();
}

function init() {
  canvas.width = this.width;
  canvas.height = this.height;
  canvas.onmousedown = mousedown;
  document.onmousemove = mousemove;
  document.onmouseup = mouseup;
  ctx.strokeStyle = 'white';
  draw();
}

function mousedown(evt) {
  var rect = canvas.getBoundingClientRect();
  mouse.down = true;
  mouse.x1 = evt.clientX - rect.left;
  mouse.y1 = evt.clientY - rect.top;
}

function mousemove(evt) {
  if(!mouse.down) return;
  var rect = canvas.getBoundingClientRect();
  mouse.x2 = evt.clientX - rect.left;
  mouse.y2 = evt.clientY - rect.top;
  updateGrad();
  draw();
}

function mouseup(evt) {
  mouse.down = false;
}

<canvas id="canvas"></canvas>