0

我有一个像素化（模糊）背景和正常图像。

用户将鼠标悬停在图像上几次后如何使图像恢复正常？查询。

样本：

http://i.stack.imgur.com/3JpaT.jpg

4

1 回答 1

3

从您的问题来看，您尝试实现的目标有点不清楚，但是假设您的意思是如何将一张图像中的耳朵/绘画到另一张图像中，可以简单地使用以下步骤：

  • 将目标图像（在这种情况下为正常）设置为画布的背景图像。
  • 在画布中绘制模糊版本 - 这将覆盖目标图像
  • 将复合模式更改为destination-out将擦除您绘制的内容。

您当然必须实现鼠标和绘图的逻辑。

这是此处的现场演示示例。

初始代码可以是：

var ctx = $('#demo')[0].getContext('2d'), /// get context
    img = new Image,                      /// load a new image
    isDown = false,                       /// for mouse button
    radius = 15;                          /// eraser radius

/// setup logic

$(img).on('load', function() {            /// onload for image

    /// when image has been loaded, attach event listeners for mouse
    $('#demo').on('mousedown', function(e) {
        isDown = true;
        erase(getXY(e));
    })
    .on('mousemove', function(e) {
        if (isDown) erase(getXY(e));
    })
    .on('mouseup', function(e) {
        isDown = false;
    });

    /// draw blurred image        
    ctx.drawImage(img, 0, 0);

    /// change composite mode so we can erase
    ctx.globalCompositeOperation = 'destination-out';
});
img.src = 'http://i.imgur.com/mi3zfEX.jpg'; /// blurred image

画布的目标背景（正常）是用 CSS 定义的：

#demo {
    background:url(http://i.imgur.com/v85BQ8k.jpg) no-repeat left top;
    cursor:crosshair;
}

然后我们只需要在鼠标位置绘制一些东西来监听覆盖并显示背景：

function erase(pos) {
    ctx.beginPath();                               /// start new path
    ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); /// draw a circle
    ctx.closePath();                               /// close path
    ctx.fill();                                    /// fill it
}

我们可以用任何颜色填充它——这并不重要，因为我们将destination-out模式用于复合模式，因为无论如何它都会在绘制它的区域中擦除。

我们唯一需要做的最后一件事是调整鼠标位置，以便我们相对于画布进行绘制 - 此函数返回一个具有x和y属性的对象：

function getXY(e) {
    var r = $('#demo')[0].getBoundingClientRect();
    return {x: e.clientX - r.left, y: e.clientY - r.top};
}
于 2013-11-14T06:04:59.027 回答