HTML5 Canvas Text

Содержание
  1. Рисование текста В HTML5 элемент холста поддерживает простую визуализацию текста построчно. Есть два метода fillText () и strokeText () для рисования текста на холсте. Вы можете использовать свойство font (type: string), чтобы указать ряд параметров текста, таких как стиль, вес, размер и шрифт. Стиль может быть обычным, курсивом или полужирным. Стиль по умолчанию нормальный. Пример кода свойства шрифта: ctx.font = 'italic 400 12px, sans-serif'; Толщина шрифта «400» не отображается, потому что это значение по умолчанию. Метод fillText () Метод fillText () используется для визуализации текста с заливкой на холсте с использованием текущего стиля и шрифта заливки. Синтаксис: ctx.fillText (text, x, y, maxWidth) Параметры Тип Описание text string Текстовые символы для рисования на холсте. x number Горизонтальная координата начала рисования текста относительно холста. y number Вертикальная координата начала рисования текста относительно холста. maxWidth number Максимально возможная ширина текста. Пример: HTML5 Canvas рисует текст с помощью метода fillText () Следующий веб-документ рисует текст используя метод fillText () и свойство font. Вывод: Код: Холст HTML5 - текст var canvas = document.getElementById ("DemoCanvas"); if (canvas. getContext) {var ctx = canvas.getContext ('2d'); ctx.font = 'курсив 32px без засечек'; ctx.fillText ('Учебное пособие по HTML5 Canvas', 10, 50); }

    Метод strokeText ()

    Метод strokeText () используется для визуализации указанного текст в указанной позиции с использованием текущего свойства font, lineWidth и strokeStyle.

    Синтаксис:

     ctx.strokeText (  text, x, y, maxWidth); 
    Параметры Тип Описание
    text string Текстовые символы для рисования на холсте.
    x number Горизонтальная координата для начала рисования текст относительно холста.
    y number Вертикальная координата для начать рисовать текст относительно холста.
    maxWidth number Максимум возможная ширина текста.

    Пример: HTML5 Canvas отрисовывает текст с помощью метода strokeText ()

    Следующий веб-документ рисует текст, используя метод strokeText () и свойства font, lineWidth.

    Вывод:

    Код:

          Холст HTML5 - Текст     холст>  var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d');  ctx.font = "курсив 36px Неизвестный шрифт, без засечек";  ctx.strokeStyle = "красный"; //устанавливаем красный цвет обводки ctx.lineWidth = "1.5"; //устанавливаем ширину штриха на 1,5 для (var i = 40; i
    
    
    Пример: рисование текста с помощью метода fillText () и линейного градиента
    
    
    Следующий веб-документ рисует текст, заполненный линейным градиентом.
    
    
    Вывод:
    
    
    
    
    
    Код:
     HTML5 Canvas - Text       var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); gradient = ctx.createLinearGradient (0, 0, canvas.width  , 0);//Добавляем цвета с фиксированными стопами на 25% ширины. Gradient.addColorStop ("0", "red"); gradient.addColorStop (". 25", "yellow"); gradient.addColorStop (  ".50", "green"); gradient.addColorStop (". 75", "blue"); gradient.addColorStop ("1.0", "magenta");//Используем gradient.ctx.font = "italic 700  25px Неизвестный шрифт, без засечек "; ctx  .fillStyle = градиент;  for (var i = 0; i
    Text Alignment
    
    
    В холсте HTML5 свойство textAlign используется для установки выравнивания текста на холсте. Возможные значения  - начало, конец, левый, правый и центральный. Значение по умолчанию: начало.
    start: текст выравнивается по нормальному началу строки (по левому краю для левого  языковые стандарты -направо, с выравниванием по правому краю для языков с написанием справа налево).
    end: текст выравнивается по нормальному концу строки (выравнивается по правому краю для языков с письмом слева направо).  locales, с выравниванием по левому краю для языков с написанием справа налево).
    left: текст выровнен по левому краю.
    right: текст выровнен по правому краю.
    center: текст центрируется.
    
    
    Синтаксис:
    ctx  .textAlign = value
    
    
    Пример: холст HTML5, рисование текста с использованием выравнивания текста
    
    
    В следующем примере кода показаны все значения свойств  свойства textAlign.
    
    
    Вывод:
    
    
    
    
    
    Код:
     Холст HTML5 - текст       var canvas = document.getElementById ("DemoCanvas"); if (canvas.  getContext) {var ctx = canvas.getContext ('2d');//Создаем линию в точке привязки .ctx.strokeStyle = "blue"; ctx.textAlign = "center"; ctx.moveTo (150, 60);  ctx.lineTo (150, 330); ctx.stroke (); ctx.strokeStyle = "зеленый"; ctx.font = "20px без засечек"; ctx.textAlign = "start"; ctx.fillText ("Начальная позиция"  , 150, 100); ctx.textAlign = "end"; ctx.fillText ("Конечная позиция", 150, 150); ctx.textAlign = "left"; ctx.fillText ("Выравнивание по левому краю", 150, 200);  ctx.textAlign = "center"; ctx.fillText ("Выравнивание по центру", 150, 250); ctx.textAlign = "right"; ctx.fillText ("Выравнивание по правому краю", 150, 300);}
    Базовая линия текста
    
    
    В холсте HTML5 textB  Свойство aseline используется для получения или установки текущих настроек для выравнивания базовой линии шрифта.  Допустимые значения: верхний, висящий, средний, буквенный, идеографический, нижний.
    top: верхняя часть квадрата с длинной строчкой.
    висит:  висячая базовая линия.
    middle: середина длинного квадрата.
    алфавитный: по умолчанию.  Базовая линия по алфавиту.
    ideographic: идеографическая базовая линия.
    bottom: нижняя часть квадрата em.
    ctx.textBaseline = value
    
    
    Положение каждого базового значения относительно ограничивающей рамки показано в  следующее изображение:
    
    
    
    Пример: холст HTML5, пример базовой линии текста
    
    
    В следующем примере текст центрирован по вертикали (textBaseline = 'middle) в ограничивающей рамке.
    
    
    
    
    
    Код:
      HTML5 Canvas - текст       var canvas = document.getElementById ("DemoCanvas"  ); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); for (i = 0; i
    Текстовые показатели
    
    
    В холсте HTML5 метод measureText () используется для получения текста  особенности текста HTML5 Canvas.  Метод возвращает объект, содержащий ширину (в пикселях) указанного текста.
    
    
    Синтаксис:
    var textWidth =  ctx. measureText (text)
    
    
    Пример: холст HTML5, пример текстовых показателей
    
    
    В следующем примере возвращается ширина (в пикселях)  заданный текст.
     Холст HTML5 - Текст       var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d  '); var text =' w3resource ';  ctx.font = "24px Неизвестный шрифт, без засечек";  ctx.fillText (текст, 120, 40); var metrics = ctx.measureText (текст);  оповещение (metrics.width);  }
    
    
    Редактор кода:
    
    
    См. перо  Общий редактор html css от w3resource (@ w3resource) onCodePen.
    
    
    
  2. Метод fillText ()
  3. Text Alignment
  4. Базовая линия текста
  5. Пример: холст HTML5, пример базовой линии текста
  6. Текстовые показатели

Рисование текста

В HTML5 элемент холста поддерживает простую визуализацию текста построчно. Есть два метода fillText () и strokeText () для рисования текста на холсте. Вы можете использовать свойство font (type: string), чтобы указать ряд параметров текста, таких как стиль, вес, размер и шрифт. Стиль может быть обычным, курсивом или полужирным. Стиль по умолчанию нормальный.
Пример кода свойства шрифта:

 ctx.font = 'italic 400 12px, sans-serif'; 

Толщина шрифта «400» не отображается, потому что это значение по умолчанию.

Метод fillText ()

Метод fillText () используется для визуализации текста с заливкой на холсте с использованием текущего стиля и шрифта заливки.

Синтаксис:

 ctx.fillText (text, x, y, maxWidth) 
Параметры Тип Описание

text

string Текстовые символы для рисования на холсте.
x number Горизонтальная координата начала рисования текста относительно холста.
y number Вертикальная координата начала рисования текста относительно холста.
maxWidth number Максимально возможная ширина текста.

Пример: HTML5 Canvas рисует текст с помощью метода fillText ()

Следующий веб-документ рисует текст используя метод fillText () и свойство font.

Вывод:

Код:

      Холст HTML5 - текст       var canvas = document.getElementById ("DemoCanvas"); if (canvas.  getContext) {var ctx = canvas.getContext ('2d');  ctx.font = 'курсив 32px без засечек';  ctx.fillText ('Учебное пособие по HTML5 Canvas', 10, 50);  }     

Метод strokeText ()

Метод strokeText () используется для визуализации указанного текст в указанной позиции с использованием текущего свойства font, lineWidth и strokeStyle.

Синтаксис:

 ctx.strokeText (  text, x, y, maxWidth); 
Параметры Тип Описание
text string Текстовые символы для рисования на холсте.
x number Горизонтальная координата для начала рисования текст относительно холста.
y number Вертикальная координата для начать рисовать текст относительно холста.
maxWidth number Максимум возможная ширина текста.

Пример: HTML5 Canvas отрисовывает текст с помощью метода strokeText ()

Следующий веб-документ рисует текст, используя метод strokeText () и свойства font, lineWidth.

Вывод:

Код:

      Холст HTML5 - Текст     холст>  var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d');  ctx.font = "курсив 36px Неизвестный шрифт, без засечек";  ctx.strokeStyle = "красный"; //устанавливаем красный цвет обводки ctx.lineWidth = "1.5"; //устанавливаем ширину штриха на 1,5 для (var i = 40; i  

Пример: рисование текста с помощью метода fillText () и линейного градиента

Следующий веб-документ рисует текст, заполненный линейным градиентом.

Вывод:

Код:

      HTML5 Canvas - Text       var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); gradient = ctx.createLinearGradient (0, 0, canvas.width  , 0);//Добавляем цвета с фиксированными стопами на 25% ширины. Gradient.addColorStop ("0", "red"); gradient.addColorStop (". 25", "yellow"); gradient.addColorStop (  ".50", "green"); gradient.addColorStop (". 75", "blue"); gradient.addColorStop ("1.0", "magenta");//Используем gradient.ctx.font = "italic 700  25px Неизвестный шрифт, без засечек "; ctx  .fillStyle = градиент;  for (var i = 0; i  

Text Alignment

В холсте HTML5 свойство textAlign используется для установки выравнивания текста на холсте. Возможные значения - начало, конец, левый, правый и центральный. Значение по умолчанию: начало.

  • start: текст выравнивается по нормальному началу строки (по левому краю для левого языковые стандарты -направо, с выравниванием по правому краю для языков с написанием справа налево).
  • end: текст выравнивается по нормальному концу строки (выравнивается по правому краю для языков с письмом слева направо). locales, с выравниванием по левому краю для языков с написанием справа налево).
  • left: текст выровнен по левому краю.
  • right: текст выровнен по правому краю.
  • center: текст центрируется.

Синтаксис:

 ctx  .textAlign = value 

Пример: холст HTML5, рисование текста с использованием выравнивания текста

В следующем примере кода показаны все значения свойств свойства textAlign.

Вывод:

Код:

      Холст HTML5 - текст       var canvas = document.getElementById ("DemoCanvas"); if (canvas.  getContext) {var ctx = canvas.getContext ('2d');//Создаем линию в точке привязки .ctx.strokeStyle = "blue"; ctx.textAlign = "center"; ctx.moveTo (150, 60);  ctx.lineTo (150, 330); ctx.stroke (); ctx.strokeStyle = "зеленый"; ctx.font = "20px без засечек"; ctx.textAlign = "start"; ctx.fillText ("Начальная позиция"  , 150, 100); ctx.textAlign = "end"; ctx.fillText ("Конечная позиция", 150, 150); ctx.textAlign = "left"; ctx.fillText ("Выравнивание по левому краю", 150, 200);  ctx.textAlign = "center"; ctx.fillText ("Выравнивание по центру", 150, 250); ctx.textAlign = "right"; ctx.fillText ("Выравнивание по правому краю", 150, 300);}    

Базовая линия текста

В холсте HTML5 textB Свойство aseline используется для получения или установки текущих настроек для выравнивания базовой линии шрифта. Допустимые значения: верхний, висящий, средний, буквенный, идеографический, нижний.

  • top: верхняя часть квадрата с длинной строчкой.
  • висит: висячая базовая линия.
  • middle: середина длинного квадрата.
  • алфавитный: по умолчанию. Базовая линия по алфавиту.
  • ideographic: идеографическая базовая линия.
  • bottom: нижняя часть квадрата em.
 ctx.textBaseline = value 

Положение каждого базового значения относительно ограничивающей рамки показано в следующее изображение:

Пример: холст HTML5, пример базовой линии текста

В следующем примере текст центрирован по вертикали (textBaseline = 'middle) в ограничивающей рамке.

Код:

       HTML5 Canvas - текст       var canvas = document.getElementById ("DemoCanvas"  ); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); for (i = 0; i  

Текстовые показатели

В холсте HTML5 метод measureText () используется для получения текста особенности текста HTML5 Canvas. Метод возвращает объект, содержащий ширину (в пикселях) указанного текста.

Синтаксис:

 var textWidth =  ctx. measureText (text) 

Пример: холст HTML5, пример текстовых показателей

В следующем примере возвращается ширина (в пикселях) заданный текст.

      Холст HTML5 - Текст       var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d  '); var text =' w3resource ';  ctx.font = "24px Неизвестный шрифт, без засечек";  ctx.fillText (текст, 120, 40); var metrics = ctx.measureText (текст);  оповещение (metrics.width);  }    

Редактор кода:

См. перо Общий редактор html css от w3resource (@ w3resource) onCodePen.

Оцените статью
nanomode.ru
Добавить комментарий