HTML5 Canvas + нижний и верхний индексы

Я хотел бы заполнить текст на холсте в качестве параметров Subscript и Superscript. Как мне этого добиться.

Пожалуйста помоги.


canvas html5-canvas
person balaji palamadai    schedule 30.11.2011    source источник
comment
Это только числа, которые вы хотите подписать/надстрочным индексом?   -  person Phrogz    schedule 30.11.2011
comment
Я хотел бы добавить текст в верхнем индексе и числа в нижнем индексе   -  person balaji palamadai    schedule 01.12.2011

Ответы (2)


arrow_upward
13
arrow_downward

Поскольку вам не разрешено использовать HTML в drawText, вы не можете использовать <sup> и sub. Вместо этого придется сделать это самостоятельно.

Другими словами, если вам нужен надстрочный индекс, вам нужно изменить шрифт на меньший и либо нарисовать текст в более высокой позиции по оси y, либо установить textBaseline = "top". Для подписки вам придется сделать то же самое.

В противном случае вы можете использовать юникод. Например, допустимо написать:

ctx.fillText('x₂', 50, 50);, ctx.fillText('normalText0123₀₁₂₃₄₅₆₇₈₉', 50, 50); и т. д.

person Simon Sarris    schedule 06.12.2011
comment
расширяя юникод, можно написать что-то вроде ctx.fillText(String.fromCharCode(178),50,50), что означает верхний индекс 2 ² - person ZenJ; 20.06.2012
comment
Для полноты: Нижний индекс: ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ и Верхний индекс: ⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ - person Avatar; 10.12.2017

arrow_upward
5
arrow_downward

Ответ и комментарии идеальны, я хотел добавить, что вы можете легко преобразовать числа в подстрочные, сдвинув код символа на 8272, что соответствует разнице между кодом символа для «₀» (код 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's 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>

Это, очевидно, просто быстрый пример, который преобразует все числа в индекс, не обязательно то, что вы всегда хотели!

Что-то более полезное может заключаться в прямом преобразовании числового значения в индекс, вы можете перебрать все цифры и создать строку с символами между «₀» (код 8320) и «₉» (код 8329):

//  Numerical value to use as subscript
//  Don't start it with 0 otherwise it will be read as an octal value!
var index = 1234567890;

function toSub(value)
{
  var str = "";
  //  Get the number of digits, with a minimum at 0 in case the value itself is 0
  var mag = Math.max(0, Math.floor(Math.log10(value)));
  //  Loop through all digits
  while (mag >= 0)
  {
    //  Current digit's value
    var digit = Math.floor(value/Math.pow(10, mag))%10;
    //  Append as subscript character
    str += String.fromCharCode(8320 + digit);
    mag--;
  }
  return str;
}

//  Get the context
var ctx = document.getElementById('myCanvas').getContext('2d');

//  Write the string
ctx.font = "20px serif";
ctx.fillText("N" + index, 0, 20);
ctx.fillText("N" + toSub(index), 0, 40);
<canvas id='myCanvas' width='200' height='50'></canvas>

person Maxweel    schedule 08.01.2017