Я хотел бы заполнить текст в canvas как опции Subccript и Superscript. Как это сделать.
Пожалуйста, помогите.
Я хотел бы заполнить текст в canvas как опции Subccript и Superscript. Как это сделать.
Пожалуйста, помогите.
Поскольку вы не можете использовать HTML в drawText
, вы не можете использовать <sup>
и sub
. Вместо этого нужно сделать это самостоятельно.
Другими словами, если вам нужен надстрочный шрифт, вам нужно будет изменить шрифт меньшим и либо нарисуйте текст в более высоком у-положении, либо установите textBaseline = "top"
. Для индекса вам придется делать подобное.
В противном случае вы можете использовать unicode. Например, допустимо написать:
ctx.fillText('x₂', 50, 50);
, ctx.fillText('normalText0123₀₁₂₃₄₅₆₇₈₉', 50, 50);
и т.д.
Ответ и комментарии идеальны, я хотел добавить, что вы можете легко преобразовать числа в индексы, сдвинув код символа на 8272, что соответствует разнице между кодом char для "₀" (код 8320) и для "0" (код 48).
Например:
var text = "N1234567890";
function subNums(str)
{
var newStr = "";
for (var i=0; i<str.length; i++)
{
// Get the code of the current character
var code = str.charCodeAt(i);
if (code >= 48 && code <= 57)
{
// If it between "0" and "9", offset the code ...
newStr += String.fromCharCode(code + 8272);
}
else
{
// ... otherwise keep the character
newStr += str[i];
}
}
return newStr
}
// Get the context
var ctx = document.getElementById('myCanvas').getContext('2d');
// Write the string
ctx.font = "20px serif";
ctx.fillText(text, 0, 20);
ctx.fillText(subNums(text), 0, 40);
<canvas id='myCanvas' width='200' height='50'></canvas>