javascript - HTML Canvas 线条透明度不适用于移动 Safari

Question

我正在我的网站上使用 Canvas 绘制线条( https://framedthread.com )，它们是具有透明度的线条，并且在 Android 和 Windows 上显示良好，但在移动 Safari 上却不然。绘制了线条，但未应用透明度，这导致线条完全变暗，最终图像过暗。

这是我用来绘制线条的代码:

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);

Canvas 的位置是绝对的，但我认为这并不重要。非常感谢您的帮助。我实在是没主意了。

Answer 1

rgba 中的 alpha 值介于 0(表示完全透明)和 1(表示不透明)之间。如果您想要 50% 的透明度，请尝试将 rgba 更改为 rgba(0,0,0,0.5)。

但即便如此，根据这个 post rgba 在浏览器上的呈现方式有所不同。