在 mousemove - 画布上应用灰度和棕褐色滤镜

Question

我正在尝试在鼠标移动时在画布上应用灰度和棕褐色滤镜。 我正在使用 CanvasRenderingContext2D.filter 来应用过滤器。 这是示例代码

var radgrad = this.ctx.createRadialGradient(x, y, 50 / 8, x, y, 50 / 2);
radgrad.addColorStop(0, 'rgb(0, 0, 0)');
radgrad.addColorStop(1, 'rgb(0, 0, 0, 1)');

this.ctx.filter = "grayscale(100%) blur(5px) opacity(50%)";
this.ctx.fillStyle = radgrad;
this.ctx.beginPath();
this.ctx.arc(x, y, 50, 0, Math.PI * 2);
this.ctx.fill();

问题是当我尝试应用灰度时无法实现它，但 blur(5px) 正在被应用。

在上述方法中如何应用灰度或棕褐色滤镜的任何解决方案。

Here's a sample fiddle

解决方案的任何线索都会有所帮助。谢谢

Answer 1

我不太清楚你想要什么，所以我假设你想要一些累积的东西，因为在同一位置移动两次将应用过滤器两次。

为此，最简单的方法是从您的图像创建一个CanvasPattern。这样您就可以使用该图像作为填充样式来填充子路径，同时在这个新绘图上应用您的过滤器：

const img = new Image();
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1024px-Sunset_2007-1.jpg";
img.onload = begin;
const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
const rad = 25;

function begin() {
  canvas.width = img.width;
  canvas.height = img.height;
  // first draw the original image
  ctx.drawImage( img, 0, 0 );
  // create a CanvasPattern from it
  const patt = ctx.createPattern(img, 'no-repeat');
  // set the fillStyle to this pattern
  ctx.fillStyle = patt;
  // and the filter
  ctx.filter = "grayscale(100%) blur(5px) opacity(50%)";
  // now at each mousemove
  document.onmousemove = e => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    // we just draw a new arc
    ctx.beginPath();
    ctx.arc( x, y, rad, 0, Math.PI * 2 );
    // this will use the filtered pattern
    ctx.fill();
  };
}

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

如果您不希望它是累积的（如刮刮卡），那么您可以创建一个大子路径并在每一帧重绘所有内容。

const img = new Image();
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1024px-Sunset_2007-1.jpg";
img.onload = begin;
const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
const rad = 25;
const points = [];
const filter = "grayscale(100%) blur(5px) opacity(50%)";

function begin() {
  canvas.width = img.width;
  canvas.height = img.height;

  const patt = ctx.createPattern(img, 'no-repeat');
  ctx.fillStyle = patt;
  
  draw();

  // now at each mousemove
  document.onmousemove = e => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    // store that point
    points.push( { x, y } );
    // and redraw
    draw();
  };
}
function draw() {
  // remove the filter
  ctx.filter = "none";
  // so we can draw the background untouched
  ctx.drawImage( img, 0, 0 );
  // we'll now compose a big sub-path
  ctx.beginPath();
  points.forEach( ({ x, y }) => {
    ctx.moveTo( x, y );
    ctx.arc( x, y, rad, 0, Math.PI * 2 )
  });
  // with the filter
  ctx.filter = filter;
  ctx.fill();
}

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

请注意，此代码假定您使用的是现代浏览器，该浏览器确实将鼠标事件限制为帧速率。如果您的目标是较旧的浏览器，您可能需要自己做。