我一直在研究仅在HTML文本中运行的2D图形框架(即单个字符充当像素)。当然,我需要代码尽可能高效,因为我的目标是尽可能接近60 fps。
每一行字符都是它自己的HTML段落元素。我注意到当我添加了为每个角色着色的功能时,代码的性能大幅下降(大约60 fps下降到大约5或6)。
我为单个%字符着色的方法
"<FONT color=" + colour + ">%</FONT>"
其中color是所需颜色的十六进制值。
我现在已经看了一段时间,但我们找不到任何与我试图做的造型动态性相符的解决方案。有人知道一种更有效的方式来设计个性化角色吗?此外,深入了解上述方法效率如此低效的原因也会有所帮助。
谢谢(有关上下文中的代码,请查看https://a8afefdfe4646d1a727ae236e436a4e29773afd3.googledrive.com/host/0BwftsCVGDOiwQ0I4WUxRTEFuWkU/TextCanvas.js,drawChar和render函数是样式代码所在的位置)
答案 0 :(得分: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 );