如何在HTML5 Canvas中扩散模糊滤镜半径？

Question

我正在尝试使用HTML5画布的模糊滤镜创建水彩填充效果，但是出现了问题。当我将鼠标保持在一个位置超过一秒钟时，会留下奇怪的圆形/靶眼残留物（附图）。我可以晃动鼠标一段时间来模糊它，但这样做很烦人，效果也不好。如何扩大模糊半径以避免出现这种奇怪的残留效果？

我的代码：

const canvas = document.getElementById('myCanvas');
let c = canvas.getContext("2d");
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;

var mouseX, mouseY, pMouseX, pMouseY;
let baseR, baseG, baseB;
let color;
setup();



function setup() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    baseR = Math.floor(Math.random() * 255);
    baseG = Math.floor(Math.random() * 255);
    baseB = Math.floor(Math.random() * 255);

    color = `rgba(${baseR}, ${baseG}, ${baseB})`;

    background("rgba(255, 255, 255, 0.00025)");
    draw();
};

function draw() {

    c.lineCap = "round";
    c.lineJoin = "round";
    background("rgba(255, 255, 255, .00001");
    c.strokeStyle = color;

    c.beginPath();
    c.lineWidth = 30;
    c.globalCompositeOperation = 'source-over';
    c.filter = `blur(30px) opacity(5%)`;
    c.stroke();
    c.lineWidth = 28;
    c.globalCompositeOperation = 'darken';
    c.filter = `blur(30px) opacity(10%)`;
    c.moveTo(pMouseX, pMouseY);
    c.lineTo(mouseX, mouseY);
    c.stroke();
    c.closePath();

    setTimeout(draw, 10);
};

function background(color) {
    c.beginPath();
    c.rect(0, 0, width, height);
    c.fillStyle = color;
    c.fill();
    c.closePath();
}

document.onmousemove = function (e) {
    pMouseX = mouseX;
    pMouseY = mouseY;
    mouseX = e.clientX;
    mouseY = e.clientY;
};

window.onresize = function (event) {
    setup();
};

document.onkeydown = function () {
    console.log('hi');
    color = `rgba(${Math.floor(Math.random() * baseR)},
    ${Math.floor(Math.random() * baseG)},
    ${Math.floor(Math.random() * baseB)})`;
    console.log(color);

}

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

- Anokhee Jandhyala

---

我们这里不提供外部资源推荐，你最好将问题中的那一部分删除，并更加关注你所面临的技术问题。目前还不是很清楚具体是什么问题。 - Kaiido

@Kaiido 嗷，很遗憾:( 谢谢你让我知道了，我编辑了问题。 - Anokhee Jandhyala

Answer 1

每次在绘制画布时，可以对鼠标位置添加随机偏移量。

const canvas = document.getElementById('myCanvas');
let c = canvas.getContext("2d");
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;

var mouseX, mouseY, pMouseX, pMouseY;
let baseR, baseG, baseB;
let color;
setup();



function setup() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    baseR = Math.floor(Math.random() * 255);
    baseG = Math.floor(Math.random() * 255);
    baseB = Math.floor(Math.random() * 255);

    color = `rgba(${baseR}, ${baseG}, ${baseB})`;

    background("rgba(255, 255, 255, 0.00025)");
    draw();
};

function draw() {
    c.lineCap = "round";
    c.lineJoin = "round";
    background("rgba(255, 255, 255, .00001");
    c.strokeStyle = color;

    c.beginPath();
    c.lineWidth = 30;
    c.globalCompositeOperation = 'source-over';
    c.filter = `blur(30px) opacity(5%)`;
    c.stroke();
    c.lineWidth = 28;
    c.globalCompositeOperation = 'darken';
    c.filter = `blur(30px) opacity(10%)`;
    c.moveTo(pMouseX, pMouseY);
    
    const xOffset = (Math.random() - .5) * 30,
    yOffset = (Math.random() - .5) * 30;
    c.lineTo(mouseX + xOffset, mouseY + yOffset);
    c.stroke();
    c.closePath();

    setTimeout(draw, 10);
};

function background(color) {
    c.beginPath();
    c.rect(0, 0, width, height);
    c.fillStyle = color;
    c.fill();
    c.closePath();
}

document.onmousemove = function (e) {
    pMouseX = mouseX;
    pMouseY = mouseY;
    mouseX = e.clientX;
    mouseY = e.clientY;
};

window.onresize = function (event) {
    setup();
};

document.onkeydown = function () {
    console.log('hi');
    color = `rgba(${Math.floor(Math.random() * baseR)},
    ${Math.floor(Math.random() * baseG)},
    ${Math.floor(Math.random() * baseB)})`;
    console.log(color);

}

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

另一个想法是在鼠标静止时降低不透明度或增加偏移范围。

- D. Pardal