jQuery的画布图像大小覆盖

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％。

但是，如果说图片是500像素宽，则会将其缩小。 效果不错，但是当我将鼠标悬停在图像上以使其从黑白变为彩色时，彩色版本（我认为是由画布覆盖）显示的是500px的图像，而不是250px的图像。

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

$(".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%');