为HTML

Question

我试图在一大段文本中可视化一些计算分析的结果。分析给出了每个角色的得分[0-100]。我已经定义了一些类：

.c0 { background-color:rgb(6,50,99); }
.c1 { background-color:rgb(7,52,102); }
.c2 { background-color:rgb(8,54,105); }
.c3 { background-color:rgb(10,58,111); }

我文档的大部分内容如下：

<span class='c76'>i</span><span class='c75'>c</span><span class='c76'>k</span><span class='c73'>l</span><span class='c70'>y</span><span class='c72'>,</span><span class='c76'> </span><span class='c76'>a</span><span class='c78'>n</span><span class='c78'>d</span><span class='c76'> </span><span class='c76'>b</span><span class='c76'>e</span><span class='c76'>

这在视觉上很有效（请参见模糊的屏幕截图作为示例）：

但查看速度极慢。对于大型文档，这会将计算机拖延到静止状态。有没有更有效的方法将此信息呈现给浏览器，也许是使用JavaScript的那个？

Answer 1

我肯定会考虑使用HTML 5 画布。它与DOM分开渲染，通常采用某种形式的加速。您应该在查看时找不到减速，但初始渲染可能仍需要一秒左右。

您可以执行以下操作来绘制具有背景的角色：

ctx.font = font;
ctx.textBaseline = 'top';
ctx.fillStyle = colour;

var width = ctx.measureText(txt).width;
ctx.fillRect(x-1, y, width+1, parseInt(font, 10));

ctx.fillStyle = '#000';
ctx.fillText(txt, x, y);

这里有一个简单的例子来展示：http://jsfiddle.net/q2cwxnbp/3/

此方法的缺点是无法选择/复制文本，因为它以图形方式呈现。