HTML Canvas行透明性不适用于移动浏览器

Question

我正在我的网站（https://framedthread.com上使用画布绘制线条，它们是透明的线条，它们在android和Windows上显示正常，但在移动浏览器中却没有。线条已绘制，但未应用透明效果，导致线条完全变暗，最终图像过暗。

这是我用来画线的代码：

var canvas_string = document.getElementById('homepage_portrait_string');
var ctx_string = canvas_string.getContext('2d');
canvas_string.width=601;
canvas_string.height=751;

var i=0;
var number_of_lines= lines_instructions.length;
setTimeout(function(){

    window.draw_function_interval=setInterval(function(){ 

        //Draw best line in string model
        ctx_string.beginPath();
        ctx_string.lineWidth = 0.2;
        ctx_string.strokeStyle = 'rgba(0,0,0,50)';
        ctx_string.moveTo(nail_x_coordinates[lines_instructions[i]], nail_y_coordinates[lines_instructions[i]]);
        ctx_string.lineTo(nail_x_coordinates[lines_instructions[i+1]], nail_y_coordinates[lines_instructions[i+1]]);
        ctx_string.stroke();
        ctx_string.closePath();
        i++;
        if(i==number_of_lines){
            clearInterval(window.draw_function_interval);
        }

      }, 6);

}, 1350);

画布的位置是绝对的，但我认为这并不重要。非常感谢您的帮助。我真的没有主意。

Answer 1

rgba中的alpha值介于0（对于完全透明）和1（对于不透明）之间。如果您想要50％的透明度，请尝试将rgba更改为rgba（0,0,0,0.5）。

但是即使如此，根据post，rgba在浏览器上的呈现方式也不同。