如何在画布图像上做径向渐变？

-1

我有一张图片。当用户用鼠标点击它时，我想获得鼠标位置的像素，并在点击鼠标的特定半径处淡化图像？如何在画布图像上做径向渐变？

检查此琴："http://jsfiddle.net/qFuDr/711/"

当我点击鼠标，然后移动甚至我松开鼠标像素得到清除，背景是可见的

我想顺利的圆，也很清楚像素要计算像素的百分比去除

希望你明白我的问题

来源

2014-07-11 user3125407

我为你创建了一个使用'createRadialGradient'的例子，在这种情况下不需要使用掩码。我和@icktoofay过于复杂的解决方案。 –

你可以采取的globalCompositeOperation和012的优势我在这里（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(); 
});

来源

2014-07-11 02:47:47

+1，因为径向渐变+合成将完成任务。顺便说一句，我认为提问者想要与你所说明的效果相反 - 他们希望图像在鼠标位置完全可见，并在效果半径范围内淡出。 – markE

哦这么喜欢这个http://jsfiddle.net/icodeforlove/T7qGh/5/ :) –

我想清除在一个小半径的鼠标位置的图像，并显示背景 – user3125407

您可以用<canvas>标签做到这一点。特别是，您可以创建一个画布。然后，您创建一个剪贴蒙版，该蒙版仅排除您希望排除的区域。然后将旧图像绘制到其中。您的新画布将包含结果。然后，您可以清除旧画布，然后从新画布中绘制图像，然后您可以放弃该画布。创建剪贴蒙版时，请注意缠绕。

除了概念简单之外，此方法优于直接修改图像数据的优点是它可以与交叉源图像源一起使用。交叉原点图像不能检查或操纵其图像数据，但可以根据需要进行绘制和裁剪。

来源

2014-07-11 02:50:15 icktoofay

你也可以使用'createRadialGradient'和'globalCompositeOperation'来获得更平滑的效果。 –

如何在画布图像上做径向渐变？

回答

相关问题