HTML5 Canvas API - 用斜体格式化单个单词

Question

我在 HTML5 中使用 Canvas API 时遇到一个小问题。我有一个文本，必须在 html 页面的画布上显示。

文本示例可以是“这是一个斜体单词”。所以我要做的就是显示从数据库中获取的文本，但只将句子中的一个单词设为斜体。所以我必须像这样显示文本：

“这是一个斜体字”

所以我的代码如下所示：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//text
context.fillStyle  = "#000000";
context.font = "20px Sans-Serif";
context.textBaseline = "top";
context.fillText  ("This is an ", 195, 80 );

context.font = "italic 20px Sans-Serif";
context.fillText  ("Italic", 285, 80 );
context.font = "20px Sans-Serif";
context.fillText  ("text", 330, 80 );

所以这段代码实际上并不是动态的，我一直都知道正确的像素从哪里开始句子的其余部分。有人知道如何动态且干净地解决这个问题吗？

Answer 1

为了实现某种灵活性，您必须在文本中决定一个约定，以表明样式已更改。
\n而且，您还必须使用measureText才能将文本的“runs”分开，每次运行使用正确的样式，measureText(thisRun).width将为您提供当前运行的大小（以像素为单位）。
\n然后您需要绘制单独的文本串，每个文本串都有自己的样式，然后根据measureText的返回值在“光标”上移动。

\n\n

举个简单的例子，我将样式约定“\xc2\xa7r”=常规文本，“\xc2\xa7i”=斜体，“\xc2\xa7b”=粗体，“\xc2\xa7l”=较亮，所以字符串:

\n\n

var text = "This is an \xc2\xa7iItalic\xc2\xa7r, a \xc2\xa7bbold\xc2\xa7r, and a \xc2\xa7llighter\xc2\xa7r text";\n

\n\n

将输出为：

\n\n

\n\n

小提琴在这里：

\n\n

http://jsfiddle.net/gamealchemist/32QXk/6/

\n\n

代码是：

\n\n

var canvas = document.getElementById(\'myCanvas\');\nvar context = canvas.getContext(\'2d\');\n\n// marker used in the text to mention style change\nvar styleMarker = \'\xc2\xa7\';\n\n// table code style --> font style\nvar styleCodeToStyle = {\n    r: \'\',\n    i: \'italic\',\n    b: \'bold\',\n    l: \'lighter\'\n};\n\n// example text\nvar text = "This is an \xc2\xa7iItalic\xc2\xa7r, a \xc2\xa7bbold\xc2\xa7r, and a \xc2\xa7llighter\xc2\xa7r text";\n\n// example draw\ndrawStyledText(text, 20, 20, \'Sans-Serif\', 20);\n\n// example text 2 : \n\nvar text2 = "This is a text that has separate styling data";\nvar boldedWords = [ 3, 5, 8 ];\nvar italicWords = [ 2, 4 , 7];\n\nvar words = text2.split(" ");\nvar newText =\'\';\n\nfor (var i=0; i<words.length; i++) {\n  var thisWord = words[i];\n  if (boldedWords.indexOf(i)!=-1) \n      newText += \'\xc2\xa7b\' + thisWord + \'\xc2\xa7r \';\n   else if (italicWords.indexOf(i)!=-1) \n      newText += \'\xc2\xa7i\' + thisWord + \'\xc2\xa7r \';\n    else \n       newText += thisWord + \' \';\n}\n\ndrawStyledText(newText, 20, 60, \'Sans-Serif\', 20);\n\n\nfunction drawStyledText(text, x, y, font, fontSize) {\n    // start with regular style\n    var fontCodeStyle = \'r\';\n    do {\n        // set context font\n        context.font = buildFont(font, fontSize, fontCodeStyle);\n        // find longest run of text for current style\n        var ind = text.indexOf(styleMarker);\n        // take all text if no more marker\n        if (ind == -1) ind = text.length;\n        // fillText current run\n        var run = text.substring(0, ind);\n        context.fillText(run, x, y);\n        // return if ended\n        if (ind == text.length) return;\n        // move forward\n        x += context.measureText(run).width;\n        // update current style\n        fontCodeStyle = text[ind + 1];\n        // keep only remaining part of text\n        text = text.substring(ind + 2);\n    } while (text.length > 0)\n}\n\n\nfunction buildFont(font, fontSize, fontCodeStyle) {\n    var style = styleCodeToStyle[fontCodeStyle];\n    return style + \' \' + fontSize + \'px\' + \' \' + font;\n}\n

\n\n

\n