Question

我有一张图片。当用户用鼠标点击它时，我想获取鼠标位置的像素，并在单击鼠标的特定半径处淡化图像？

检查这个小提琴："http://jsfiddle.net/qFuDr/711/"

当我单击鼠标然后移动时，我释放鼠标像素被清除并且背景可见

我希望在圆圈中平滑地清除像素，并且还想要计算移除的像素百分比

希望你理解我的问题

Answer 1

你可以利用globalCompositeOperation和createRadialGradient我在这里做了一个简单的演示（http://jsfiddle.net/icodeforlove/T7qGh/4）

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();
});

Answer 2

您可以使用<canvas>标记执行此操作。特别是，您可以创建画布。然后创建一个剪切蒙版，仅排除要排除的区域。然后将旧图像绘制到其中。您的新画布将包含结果。然后，您可以清除旧画布并从新画布中绘制图像，然后可以将其丢弃。在创建剪贴蒙版时，请注意缠绕。

除了概念简单之外，这种方法优于直接修改图像数据的优点在于它适用于跨源图像源。交叉原始图像不能检查或操纵其图像数据，但可以根据需要绘制和剪切。

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

2 个答案: