Html 画布上的大字体在Chrome中需要很长时间

有没有人注意到或找到解决我遇到的问题的方法？使用fillText（）在画布上用Chrome渲染大字体（>100px）需要很长时间。我需要有一个更快的帧速率，但一旦字体变大，它需要像一秒钟加载每个帧。但在firefox中运行良好

更新：

下面是在my draw（）函数中运行的相关代码，该函数每隔10毫秒运行一次。如果你突然想到什么，那就太好了。不过，我会尝试分析一下，谢谢

 g.font = Math.floor(zoom) + "px sans-serif";
    g.fillStyle = "rgba(233,233,245," + (ZOOM_MAX-zoom*(zoom*0.01))/(ZOOM_MAX) + ")";
    for (h=0; h<76; h++)
    {
        h_offset = 2.75*h*Math.floor(zoom);

        // only render if will be visible, because it tends to lag; especially in Chrome
        hpos = Math.floor(half_width + std_offset + h_offset);

        if (hpos > (-half_width)-h_offset && hpos < WIDTH+h_offset)
        {
            g.fillText(1950+h, hpos, anchor_y - 0);
        }
    }

    g.font = "600 " + Math.floor(zoom/40) + "px sans-serif";
    g.fillStyle = "rgba(233,233,245," + (ZOOM_MAX-zoom*(zoom*0.0001))/(ZOOM_MAX) + ")";
    for (h=0; h<76; h++)
    {
        h_offset = 2.75*h*Math.floor(zoom);

        hpos = Math.floor(half_width + std_offset + h_offset);

        if (hpos > (-half_width)-h_offset && hpos < WIDTH+h_offset)
        {                
            // see if we should bother showing months (or will it be too small anyways)
            if (zoom/40 > 2)
            {
                // show months
                for (i=0; i<12; i++)
                {
                    i_offset = 0.175*i*zoom;
                    ipos = Math.floor(WIDTH/2 + std_offset + i_offset + h_offset) + 10;

                    if (ipos > -half_width && ipos < WIDTH)
                    {
                        g.fillText(months[i], ipos, anchor_y - 20);
                    }
                }
            }
        }
    }


    g.font = "600 " + Math.floor(zoom/350) + "px sans-serif";
    g.fillStyle = "rgba(233,233,245," + (ZOOM_MAX-zoom/5)/(ZOOM_MAX*2.25) + ")";
    for (h=0; h<76; h++)
    {
        h_offset = 2.75*h*Math.floor(zoom);

        // only render if will be visible, because it tends to lag; especially in Chrome
        hpos = Math.floor(half_width + std_offset + h_offset);

        if (hpos > (-half_width)-h_offset && hpos < WIDTH+h_offset)
        {                
            // see if we should bother showing months (or will it be too small anyways)
            if (zoom/40 > 2)
            {
                // show months
                for (i=0; i<12; i++)
                {
                    i_offset = 0.175*i*zoom;
                    ipos = Math.floor(WIDTH/2 + std_offset + i_offset + h_offset) + 10;

                    // see if we should bother showing days (or will it be too small anyways)
                    if (zoom/350 > 2)
                    {
                        // show days
                        for (j=0; j<31; j++)
                        {
                            j_offset = 0.005*j*zoom + zoom*0.005;
                            jpos = Math.floor(half_width + std_offset + j_offset + i_offset + h_offset);

                            if (jpos > -half_width && jpos < WIDTH)
                            {
                                g.fillText(days[i][j], jpos, anchor_y - 20);
                                selected_days += 'm: '+i+', d: '+j+' | ';
                            }
                        }
                    }
                }
            }
        }
    }

g.font=Math.floor（缩放）+“px无衬线”；
g、 fillStyle=“rgba（233233245，”+（ZOOM_MAX-ZOOM*（ZOOM*0.01））/（ZOOM_MAX）+”）；
对于（h=0；h（-半宽度）-h_偏移和&hpos2）
{
//演出月份
对于（i=0；i-半宽度和&ipos2）
{
//演出月份
对于（i=0；i 2）
{
//演出日
对于（j=0；j-半宽度和&jpos

我们需要更多的信息，我不相信绘制大字体实际上是导致性能问题的原因。对于我尝试过的任何浏览器，在我的机器上绘制如此大的字体都非常快

您应该做的第一件事是打开Chrome profiler，然后运行代码，看看是否是占用时间的

ctx.fillText

调用。我想这其实是另外一回事

您可能调用了太多的内容，例如不必要地反复设置

ctx.font

。在某些浏览器上设置

ctx.font

实际上比调用

fillRect

花费的时间要长得多！如果应用程序中的字体发生更改，您可以随时缓存

以下是10月份的测试：

正如您所看到的，在许多版本的Chrome中，字体设置不必要地将所需时间增加了一倍！因此，请确保尽可能少地设置它（使用缓存等）