渐变fillText在IOS中无法用泰语填充全文

问题描述

我对泰语文本有疑问,找不到答案。 我需要将此文本填充为带有渐变的泰语文本,但它无法填充底部字形,只能在 IOS 中使用。

This is correct text,in desktop

This is incorrect one,in IOS

这是我的简单代码

<!DOCTYPE HTML>
<html>

<head>
    <Meta http-equiv="Content-Language" content="th" />
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Sarabun" rel="stylesheet">
    <style>
        body {
            margin: 0px;
            padding: 0px;
            font-family: 'Sarabun',sans-serif;
        }
    </style>
</head>

<body>
    <h1>ซื้หมุนรี</h1>

    <canvas id="myCanvas" width="300" height="700"></canvas>
    <canvas id="myCanvas1" width="300" height="700"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.font = "80px Sarabun";
        var gradient = ctx.createLinearGradient(0,80);
        gradient.addColorStop(0,"rgb(255,128)");
        gradient.addColorStop(1,153,51)");
        ctx.fillStyle = "#FF0000";
        ctx.fillStyle = gradient;
        ctx.strokeStyle = "#FF0000";
        ctx.linewidth = 1;
        ctx.fillText("ซื้หมุนรี",80);
        ctx.strokeText("ซื้หมุนรี",80);

        var canvas1 = document.getElementById("myCanvas1");
        var ctx1 = canvas1.getContext('2d');
        ctx1.font = "80px Sarabun";
        ctx1.fillText("ซื้หมุนรี",80);
    </script>
</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)