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

Posted 2023-03-14

【中文标题】HTML Canvas 线条透明度不适用于移动 Safari

【英文标题】：HTML Canvas lines transparency not working on mobile safari

【发布时间】：2019-07-19 06:24:16

【问题描述】：

我在我的网站 (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);

画布的定位是 position:absolute，但我认为这并不重要。非常感谢您的帮助。我真的没有想法。

【参考方案1】：

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

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