Javascript 如何在画布图像上进行径向淡入？

我有一个形象。当用户用鼠标点击它时，我想得到鼠标位置的像素，并在鼠标点击的特定半径处使图像褪色

检查此小提琴：

“http://jsfiddle.net/qFuDr/711/“

当我点击鼠标然后移动时，我甚至会释放鼠标 像素被清除，背景可见

我想清除像素顺利，并在圆，还想计算像素的百分比删除

---

希望您理解我的问题

您可以利用

globalCompositeOperation

和

createRadialGradient

我在这里做了一个简单的演示（）

---

您可以使用

标记执行此操作。特别是，您可以创建画布。然后创建一个仅排除要排除的区域的剪裁遮罩。然后把旧图像画进去。新画布将包含结果。然后，您可以清除旧画布并从新画布中绘制图像，然后将其丢弃。创建剪裁遮罩时，请小心缠绕

---

与直接修改图像数据相比，该方法的优点在于，除了概念上的简单性外，它还适用于跨原点图像源。跨原点图像无法检查或处理其图像数据，但可以根据需要绘制和剪裁。

我使用

createRadialGradient

为您创建了一个示例，在这种情况下无需使用遮罩。Me和@icktoofay使解决方案过于复杂。您还可以使用

createRadialGradient

和

globalCompositeOperation

获得更平滑的效果。+1因为radial gradient+合成将完成任务。顺便说一句，我认为提问者想要的是与你演示的效果相反的效果——他们希望图像在鼠标位置完全可见，并在效果的半径范围内逐渐消失。哦，就像这样：）我想在小半径范围内清除鼠标位置的图像并显示背景，你应该能够，这里有一个动画的例子，我想这样做，但在这个例子中，它的矩形不是光滑的，我想在圆形。这是一种划痕

canvas.addEventListener('mousemove', function (event) {
    var rect = document.body.getBoundingClientRect(),
        x = event.pageX - rect.left,
        y = event.pageY - rect.top;

    context.drawImage(image, 0, 0, canvas.width, canvas.height);

    context.save();
    context.globalCompositeOperation = 'destination-out';

    var gradient = context.createRadialGradient(x, y, 0, x, y, 500);
    gradient.addColorStop(0, 'rgba(0,0,0,1)');
    gradient.addColorStop(1, 'rgba(0,0,0,0)');
    context.fillStyle = gradient;

    // repeat to intensify the fade
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.restore();
});