Javascript 删除画布元素的图像

当鼠标悬停在图像上时，我使用画布创建一个倍增效果（带有蓝色三角形）

问题是，静态图像会自动安装到其容器中，但画布中的图像会更大，尽管三角形大小合适

是否可以删除画布中的图像，只留下蓝色三角形。。。那么悬停看起来没有更大的图像？我该怎么做？

这是我的画布代码：

    function to_canvas(im,w,h){
        var isIE8 = $.browser.msie && +$.browser.version === 8;
        var canvas;
        var imageBottom;
        var im_w = w;
        var im_h = h;
        var imgData;
        var pix;
        var pixcount = 0;
        var paintrow = 0;
        var multiplyColor = [70, 116, 145];
        var x_offset = Math.floor(($('#'+im).attr('width') - im_w)/2);
        var y_offset = Math.floor(($('#'+im).attr('height') - im_h)/2);
        if ( isIE8 ) {
            $('<div />' , {
                'id' : 'div-'+im,
                'class' : 'pseudo_canvas'
            }).css({
                'width' : im_w,
                'height' : im_h
            }).insertBefore('#'+im);
            $('#'+im).appendTo('#div-'+im).fadeIn();
            $('<img>' , {
                'src' : '/img/blueborder.png',
                'class' : 'blueborder'
            }).css({
            }).insertBefore('#'+im);
            $('#'+im).appendTo('#div-'+im).fadeIn();

        }else{
            imageBottom = document.getElementById(im);
            canvas = document.createElement('canvas');
            canvas.width = im_w;
            canvas.height = im_h;
            imageBottom.parentNode.insertBefore(canvas, imageBottom);
            ctx = canvas.getContext('2d');
            ctx.drawImage(imageBottom, -x_offset , -y_offset);
            imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
            pix = imgData.data;
            for (var i = 0 ; i < pix.length; i += 4) {
                if(pixcount > im_w - (im_h - paintrow) ){
                    pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                    pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                    pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
                }
                if(pixcount < im_w-1){
                    pixcount++;
                }else{
                    paintrow++;
                    pixcount = 0;
                }
            }
            ctx.putImageData(imgData, 0, 0);
            /* $('#'+im).remove(); */
        }
    }
    function multiply(topValue, bottomValue){
        return (topValue + 50) * bottomValue / 255;
    }

这就是问题所在（悬停时图像较大，但蓝色的乘法三角形大小合适）：

这就是标记（图像总是有不同的大小，这就是为什么它会自动适合容器）：

---

您可以更改此设置：

else{
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        ctx.drawImage(imageBottom, -x_offset , -y_offset);
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
        /* $('#'+im).remove(); */
    }    

else{
imageBottom=document.getElementById（im）；
canvas=document.createElement（'canvas'）；
canvas.width=im_w；
canvas.height=im_h；
imageBottom.parentNode.insertBefore（画布，imageBottom）；
ctx=canvas.getContext（'2d'）；
ctx.drawImage（图像底部，-x_偏移，-y_偏移）；
imgData=ctx.getImageData（0，0，canvas.width，canvas.height）；
pix=imgData.data；
对于（变量i=0；iim_w-（im_h-paintrow））{
pix[i]=乘法（多色[0]，pix[i]）；
pix[i+1]=乘法（多色[1]，pix[i+1]）；
pix[i+2]=乘法（多色[2]，pix[i+2]）；
}
如果（像素计数

为了

else{
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        //set canvas image to the same size and position of '.featured_img im'
        //ctx.drawImage(IMAGE, TOP, LEFT, WIDTH, HEIGHT);
        ctx.drawImage(imageBottom, parseFloat($('#'+im).css('left')),parseFloat($('#'+im).css('top')),$('#'+im).attr('width'),$('#'+im).attr('height'));
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
}    

else{
imageBottom=document.getElementById（im）；
canvas=document.createElement（'canvas'）；
canvas.width=im_w；
canvas.height=im_h；
imageBottom.parentNode.insertBefore（画布，imageBottom）；
ctx=canvas.getContext（'2d'）；
//将画布图像设置为与“.featured\u img im”相同的大小和位置
//ctx.drawImage（图像、顶部、左侧、宽度、高度）；
ctx.drawImage（imageBottom，parseFloat（$（'#'+im）.css（'left'）），parseFloat（$（'#'+im）.css（'top'）），$（'#'+im）.attr（'width'），$（'#'+im）.attr（'height'）；
imgData=ctx.getImageData（0，0，canvas.width，canvas.height）；
pix=imgData.data；
对于（变量i=0；iim_w-（im_h-paintrow））{
pix[i]=乘法（多色[0]，pix[i]）；
pix[i+1]=乘法（多色[1]，pix[i+1]）；
pix[i+2]=乘法（多色[2]，pix[i+2]）；
}
如果（像素计数

ctx.drawImage（）；可以像

---

ctx.drawImage（图像，x，y，宽度，高度）

为什么不把三角形放在png中，然后覆盖在图像的顶部呢？例如，在一个单独的div中（不使用canvas），因为无法使用png实现乘法效果。。。看起来会不一样，我从没想过我能找到答案。。。太完美了！非常感谢你！“发现差异”的答案没有解释为什么某些东西发生了变化，通常不是很有用。。。

else{
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        ctx.drawImage(imageBottom, -x_offset , -y_offset);
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
        /* $('#'+im).remove(); */
    }    

else{
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        //set canvas image to the same size and position of '.featured_img im'
        //ctx.drawImage(IMAGE, TOP, LEFT, WIDTH, HEIGHT);
        ctx.drawImage(imageBottom, parseFloat($('#'+im).css('left')),parseFloat($('#'+im).css('top')),$('#'+im).attr('width'),$('#'+im).attr('height'));
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
}