Question

我一直在研究仅在HTML文本中运行的2D图形框架（即单个字符充当像素）。当然，我需要代码尽可能高效，因为我的目标是尽可能接近60 fps。

每一行字符都是它自己的HTML段落元素。我注意到当我添加了为每个角色着色的功能时，代码的性能大幅下降（大约60 fps下降到大约5或6）。

我为单个％字符着色的方法

    "<FONT color=" + colour + ">%</FONT>"

其中color是所需颜色的十六进制值。

我现在已经看了一段时间，但我们找不到任何与我试图做的造型动态性相符的解决方案。有人知道一种更有效的方式来设计个性化角色吗？此外，深入了解上述方法效率如此低效的原因也会有所帮助。

谢谢（有关上下文中的代码，请查看https://a8afefdfe4646d1a727ae236e436a4e29773afd3.googledrive.com/host/0BwftsCVGDOiwQ0I4WUxRTEFuWkU/TextCanvas.js，drawChar和render函数是样式代码所在的位置）

Answer 1

首先，不推荐使用font标签。使用span。

此外，这个答案假设你有这样做，而不是要绘制的更好canvas元素。

创建元素时应该执行的操作是：

//An example of the colors
var colors = [ "#e8e8e8", "#ffffff" ];

//This will hold them all for fast adding to your parent node
var fragment = document.createDocumentFragment();

for ( var i = 0; i < colors.length; i++ )
{
    //Create the element
    var color = document.createElement( "span" );

    //Set its color
    color.style.color = colors[ i ];

    //Add the % symbol (innerText is IE)
    color.textContent = color.innerText = "%";

    //Add to fragment
    fragment.appendChild( color );  
}

//Now add it to the parent node (will add all the children)
parentNode.appendChild( fragment );

如何有效地为元素中的单个字符设置样式？

1 个答案: