HTML Canvas 线条透明度不适用于移动 safari

Question

我在我的网站 (https://framedthread.com) 上使用 canvas 绘制线条，它们是透明的线条，在 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 被定位为 position:absolute，但我认为这无关紧要。非常感谢您的帮助。我真的没脑子了。

Answer 1

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

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

HTML Canvas 线条透明度不适用于移动 safari

HTML Canvas lines transparency not working on mobile safari

html

javascript

mobile-safari

ios

html5-canvas