5

CSS3 を使用したクールな画像マスキングやその他の効果を見てきました。CSS3 のみを使用して、以下のコードで見られるこの効果を達成したり、フィドルの動作を確認したりできます。

http://jsfiddle.net/s6u9a/

HTML

<canvas id="canvas1" width="400" height="400"></canvas>

Javascript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

can.addEventListener('mousemove', function(e) {
var mouse = getMouse(e, can);
redraw(mouse);
}, false);


function redraw(mouse) {
console.log('a');
can.width = can.width;
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.rect(0,0,500,500);
ctx.arc(mouse.x, mouse.y, 70, 0, Math.PI*2, true)
ctx.clip();
ctx.drawImage(img2, 0, 0);
}

var img = new Image();
img.onload = function() {
redraw({x: -450, y: -500})
}
    img.src = 'http://placekitten.com/400/400';

var img2 = new Image();
img2.onload = function() {
redraw({x: -450, y: -500})
}
    img2.src = 'http://placekitten.com/400/395';


function getMouse(e, canvas) {
var element = canvas,
    offsetX = 0,
    offsetY = 0,
    mx, my;

if (element.offsetParent !== undefined) {
    do {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
}

mx = e.pageX - offsetX;
my = e.pageY - offsetY;

return {
    x: mx,
    y: my
};
}
4

2 に答える 2

2

background-image を使用した別のアプローチを次に示します。より柔軟で、円形 (または任意の形状) のビューポートが得られます。

http://jsfiddle.net/maackle/66uCs/

HTML

<div class="masker">
    <img class="base" src="http://lorempixel.com/400/400/cats/1" />
    <div class="overlay"></div>
</div>

CSS

.masker {
    position: relative;
}
.overlay {
    position: absolute;
    display: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(http://lorempixel.com/400/400/cats/2) no-repeat;
}

jQuery 1.10.1

$('.masker').on('mousemove', function (e) {
    var r, x, y, top, left, bottom, right, attr, $base, $overlay;
    r = 100;
    $base = $(this).find('.base');
    $overlay = $(this).find('.overlay');
    x = e.pageX - $base.offset().left;
    y = e.pageY - $base.offset().top;
    top = y - r / 2;
    left = x - r / 2;
    if (x < 0 || y < 0 || x > $base.width() || y > $base.height()) {
        $overlay.hide();
    } else {
        $overlay.show().css({
            'background-position': '' + (-left) + 'px ' + (-top) + 'px',
                'left': left,
                'top': top
        });
    }
});

//just for good measure
$('.masker').on('mouseout', function (e) {
    $(this).find('.overlay').hide();
});
于 2013-06-27T09:19:34.363 に答える
1

主にCSSを使用するソリューションを次に示します。マウスの位置を検出するには、Javascript が必要です。これにより、円ではなく正方形のビューポートが得られることに注意してください。ただし、CSS がクリップ プロパティの rect() と一緒に circle() を追加した場合は、そのオプションがあります。

http://jsfiddle.net/maackle/Yc2b4/

HTML

<div class="masker">
    <img class="base" src="http://lorempixel.com/400/400/cats/1" />
    <img class="overlay" src="http://lorempixel.com/400/400/cats/2" />
</div>

CSS

.masker {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

jQuery 1.10.1

$('.masker img').on('mousemove', function(e) {
    var r, x, y, top, left, bottom, right, attr, $overlay;
    r = 100;
    x = e.pageX - $(this).offset().left;
    y = e.pageY - $(this).offset().top;
    top = y - r/2;
    left = x - r/2;
    bottom = y + r/2;
    right = x + r/2;
    attr = 'rect('+(top)+'px, '+(right)+'px, '+(bottom)+'px, '+(left)+'px)';
    $overlay = $('.masker .overlay');
    $overlay.show().css({clip: attr});
});

$('.masker img').on('mouseout', function(e) {
    $('.masker .overlay').hide();
});
于 2013-06-27T08:50:37.313 に答える