Graphics 绘制 跟 canvas 不一致

Graphics 绘制出来的内容和html canvas 不一致

<html>
    <head></head>
    <body>
        <canvas id="myCanvas" width="1024" height="1024"></canvas>
    </body>
    <script type="text/javascript">
        var canvas=document.getElementById('myCanvas');
        var ctx=canvas.getContext('2d');
        ctx.scale(1, -1)
        ctx.translate(0, -900)
        ctx.fillStyle='#FF0000';
        ctx?.moveTo(276, 728)
        ctx?.quadraticCurveTo (291, 722, 336, 729)
        ctx?.quadraticCurveTo (441, 762, 683, 784)
        ctx?.quadraticCurveTo (725, 788, 739, 785)
        ctx?.quadraticCurveTo (752, 775, 751, 769)
        ctx?.quadraticCurveTo (751, 765, 715, 695)
        ctx?.quadraticCurveTo (706, 682, 713, 677)
        ctx?.quadraticCurveTo (720, 673, 738, 683)
        ctx?.quadraticCurveTo (796, 717, 842, 728)
        ctx?.quadraticCurveTo (881, 738, 880, 747)
        ctx?.quadraticCurveTo (879, 757, 809, 813)
        ctx?.quadraticCurveTo (784, 834, 726, 820)
        ctx?.quadraticCurveTo (599, 808, 528, 794)
        ctx?.lineTo(489, 789)
        ctx?.quadraticCurveTo (437, 785, 376, 774)
        ctx?.quadraticCurveTo (327, 767, 278, 762)
        ctx?.bezierCurveTo (248, 759, 246, 732, 276, 728)
        ctx.fill()
        </script>
</html>

上面的在 html 中显示为:

在 creator 中显示为
截屏2021-04-30 下午6.00.41

忽略大小,只看形状

下面是cocos creator 代码

import { _decorator, Component, Graphics } from 'cc';
const { ccclass } = _decorator;

@ccclass('T')
export class T extends Component {

    start () {
        let ctx = this.getComponent(Graphics)
        ctx.moveTo(20, 20);
        ctx.quadraticCurveTo(20, 100, 200, 20);
        ctx.fill();
        ctx?.moveTo(276, 728)
        ctx?.quadraticCurveTo (291, 722, 336, 729)
        ctx?.quadraticCurveTo (441, 762, 683, 784)
        ctx?.quadraticCurveTo (725, 788, 739, 785)
        ctx?.quadraticCurveTo (752, 775, 751, 769)
        ctx?.quadraticCurveTo (751, 765, 715, 695)
        ctx?.quadraticCurveTo (706, 682, 713, 677)
        ctx?.quadraticCurveTo (720, 673, 738, 683)
        ctx?.quadraticCurveTo (796, 717, 842, 728)
        ctx?.quadraticCurveTo (881, 738, 880, 747)
        ctx?.quadraticCurveTo (879, 757, 809, 813)
        ctx?.quadraticCurveTo (784, 834, 726, 820)
        ctx?.quadraticCurveTo (599, 808, 528, 794)
        ctx?.lineTo(489, 789)
        ctx?.quadraticCurveTo (437, 785, 376, 774)
        ctx?.quadraticCurveTo (327, 767, 278, 762)
        ctx?.bezierCurveTo (248, 759, 246, 732, 276, 728)
        ctx.fill()
    }
}

3.0 版本会出现这个问题

试了下 2.4.5 版本,不会出现这个问题

截屏2021-05-03 下午6.25.08

3.0 版本下面,stroke 是正常的,但是fill 是有问题

求助引擎组的大佬们

@panda panda 求助求助 :rofl:,2.4.5 展示ok,但是 2.4.5 的 mask 的 type 不支持 Graphics

具体是什么平台呢

系统:截屏2021-05-08 下午7.10.22

cocos版本:


版本 3.0.1

引擎 76fc41a

编辑器 2561ff3

原生引擎 02f4f05

原生扩展 f68d1e5

cocos 命令行 0a3a1e1

是预览,还是构建,还是编辑器,构建的是什么平台?

浏览器预览