Question

我有一个jQuery图像悬停，可以将图像从灰度变为彩色。

工作正常，如果图像说，100px罚款。

如果在CSS中我想将图像缩放到其边界容器的100％，就像这样

.class { display: inline-block; width: 250px; height: 250px; }
.class img { display: inline-block; width: 100%; height: auto; }

所以我有一个250px宽的div，并且该div内的图像缩放到100％。

但是，如果图像是500px宽，则会缩小图像。哪个，工作正常，但当我将鼠标悬停在图像上以便从黑白变为彩色时，颜色版本（我假设的画布重叠）显示500px图像，而不是250px版本。

如何在下面的jquery中告诉画布叠加是100％的包含div？

$(".imglist a").hover(
    function() {
        var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        masky, maskwidth,
        image = new Image();

        image.src = this.getElementsByTagName('img')[0].src;
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.style.position = 'absolute';
        masky = image.height;
        maskwidth = Math.sqrt(image.width * image.width + image.height * image.height);
        ctx.rotate(0.45);

        $(this).find('div').prepend(canvas);

        (function animate() {
            if (masky <= -(image.width / 2)) {
                return false;
            } else {
                masky -= 15;
                ctx.save();
                ctx.rect(0, masky, maskwidth, image.height);
                ctx.clip();
                ctx.rotate(-0.45);
                ctx.drawImage(image, 0, 0);
                ctx.restore();
                window.requestAnimFrame(animate, 0);
            }
        })();
    }, 
    function() {
        $(this).find('canvas').animate({opacity: 0}, 500, function() {
            $(this).remove();
        });
    }
);

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function(callback, element) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

Answer 1

尝试将width: 100%添加到画布中：

canvas.style.width = '100%';

或者，使用jQuery：

$(canvas).css('width', '100%');

jquery画布图像大小叠加

1 个答案: