Javascript 画布的不透明度不影响内部图像

我遇到的问题是图像滑块。蓝色三角形是使用多重画布效果创建的，如下所示：

我希望蓝色三角形的

不透明度为0.5

，但如果我将其放在css（画布元素）上，它也会影响下面图像的不透明度。有什么办法可以做到这一点吗

这是我的代码：

    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 * bottomValue / 255;
    }

函数到画布（im、w、h）{
变量isIE8=$.browser.msie&+$.browser.version===8；
var帆布；
var图像底部；
var im_w=w；
var im_h=h；
var imgData；
var-pix；
var pixcount=0；
var paintrow=0；
var multiplyColor=[70116145]；
var x#u offset=数学地板（$（'#'+im）.attr（'width'）-im#w）/2）；
变量y#u offset=数学地板（$（'#'+im）.attr（'height'）-im#h）/2）；
如果（isIE8）{
$('' , {
“id”：“div-”+im，
“类”：“伪画布”
}).css({
“宽度”：im_w，
“高度”：im_h
}).insertBefore（“#”+im）；
$（'#'+im）.appendTo（'#div-'+im.fadeIn（）；
$（'im_w-（im_h-paintrow））{
pix[i]=乘法（多色[0]，pix[i]）；
pix[i+1]=乘法（多色[1]，pix[i+1]）；
pix[i+2]=乘法（多色[2]，pix[i+2]）；
}
如果（像素计数

这就是我想要的三角形颜色/不透明度（显然没有背面图像的不透明度）： 如果你有画布-

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d");
context.globalCompositeOperation = "destination-over";
context.fillStyle = "rgba(0, 0, 200, 0.5)";//Change the color combination here
context.fillRect(0, 0, 1000, 1000);

---

一种方法是使用半透明背景（例如png文件）

如果三角形始终存在，为什么不将其放置在其顶部的不同div位置，然后更改其不透明度？因为三角形是由画布倍增效果构成的，我不能把它放在另一个分区上，这可能是一个糟糕的解决方法，但只需要制作一个三角形的图像，然后像上面所说的那样求解？这就是我能想到的，我不确定是否有其他方法可以做到。对于图像，它不会产生“倍增”效果，它只是不透明度…我放了这个，然后没有显示三角形：）

Uncaught ReferenceError:context没有定义

你能扩展一下这个答案吗，也许可以举个例子来帮助提问者？