我在 HTML5 中使用 Canvas API 时遇到一个小问题。 我有一个文本,我必须在 html 页面的 Canvas 上显示。
文本示例可以是“This is an Italic word”。 所以我要做的是显示我从数据库中获取的这段文本,但只将句子中的一个词变成斜体。所以我必须像这样显示文本:
"This is an Italic word"
所以我的代码是这样的:
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 );
所以这段代码实际上不是动态的,我一直都知道从哪里开始句子的其余部分的正确像素。 有没有人知道我怎样才能动态和干净地解决这个问题?
最佳答案
为了实现某种灵 active ,您必须在文本中确定一个约定,以告知样式已更改。
而且,您必须使用 measureText 才能填充文本的单独“运行”,每次运行都使用正确的样式,measureText(thisRun).width
将为您提供以像素为单位的大小当前运行的。
然后,您需要绘制单独的文本运行,每个运行都有自己的样式,然后根据 measureText 的返回值在“光标”上移动。
举个简单的例子,我将“§r”= 常规文本,“§i”= 斜体,“§b”= 粗体,“§l”= 更轻,所以字符串:
var text = "This is an §iItalic§r, a §bbold§r, and a §llighter§r text";
将输出为:
fiddle 在这里:
http://jsfiddle.net/gamealchemist/32QXk/6/
代码是:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// marker used in the text to mention style change
var styleMarker = '§';
// table code style --> font style
var styleCodeToStyle = {
r: '',
i: 'italic',
b: 'bold',
l: 'lighter'
};
// example text
var text = "This is an §iItalic§r, a §bbold§r, and a §llighter§r text";
// example draw
drawStyledText(text, 20, 20, 'Sans-Serif', 20);
// example text 2 :
var text2 = "This is a text that has separate styling data";
var boldedWords = [ 3, 5, 8 ];
var italicWords = [ 2, 4 , 7];
var words = text2.split(" ");
var newText ='';
for (var i=0; i<words.length; i++) {
var thisWord = words[i];
if (boldedWords.indexOf(i)!=-1)
newText += '§b' + thisWord + '§r ';
else if (italicWords.indexOf(i)!=-1)
newText += '§i' + thisWord + '§r ';
else
newText += thisWord + ' ';
}
drawStyledText(newText, 20, 60, 'Sans-Serif', 20);
function drawStyledText(text, x, y, font, fontSize) {
// start with regular style
var fontCodeStyle = 'r';
do {
// set context font
context.font = buildFont(font, fontSize, fontCodeStyle);
// find longest run of text for current style
var ind = text.indexOf(styleMarker);
// take all text if no more marker
if (ind == -1) ind = text.length;
// fillText current run
var run = text.substring(0, ind);
context.fillText(run, x, y);
// return if ended
if (ind == text.length) return;
// move forward
x += context.measureText(run).width;
// update current style
fontCodeStyle = text[ind + 1];
// keep only remaining part of text
text = text.substring(ind + 2);
} while (text.length > 0)
}
function buildFont(font, fontSize, fontCodeStyle) {
var style = styleCodeToStyle[fontCodeStyle];
return style + ' ' + fontSize + 'px' + ' ' + font;
}
关于javascript - HTML5 Canvas API - 用斜体格式化单个单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24163211/