Текст в canvas можно создавать так же, как и фигуры либо с заливкой, либо с контурной обводкой. К нему можно добавлять тень. С одной стороны текст в canvas - это текст с различными текстовыми свойствами, с другой - это картинка, и текстом можно рисовать.
Создание текста
Для начала нужно указать свойства текста:
context.font- размер и семейство шрифта, а также стиль и жирность шрифта. Например,context.font = "30px serif"илиcontext.font = "bold 40px Arial, sans-serif";context.fillStyle- цвет заливки текстаcontext.strokeStyle- цвет контура для текста
Методы для добавления текста:
fillText(text, x, y [, maxWidth])- вставляет заданный текст в положении (x,y). Можно при необходимости указать максимальную ширину.strokeText(text, x, y [, maxWidth])- вставляет контур заданного текста в положении (x,y). Можно при необходимости указать максимальную ширину.
Пример текста в canvas с заливкой, контуром и тенью.
Здесь вы также можете увидеть текст с ограничением по ширине.
Код примера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<canvas id="textExample" width="500" height="400"></canvas> <script> const context = document.getElementById("textExample").getContext('2d'); context.font = 'bold 30px sans-serif'; context.fillStyle = '#1e8cbe'; context.fillText('Текст с заливкой', 50, 100) context.strokeStyle = '#2196f3'; context.strokeText('Текст в виде контура', 50, 200); context.font = "50px sans-serif"; context.strokeText("Текст с ограничением", 50, 280, 200); context.shadowColor = '#808080'; context.shadowBlur = 4; context.shadowOffsetX = 2; context.shadowOffsetY = 5; context.fillText('Текст с тенью', 50, 350); </script> |
Текст со шрифтом из Google Fonts
Чтобы отобразить текст из Google Fonts на холсте в canvas, вам нужно сначала выбрать нужный шрифт на сайте Google Fonts и получить код для его подключения. Затем, в HTML-коде добавbnm этот код в <head>, чтобы шрифт был доступен. После этого в теге <script> при рисовании текста на canvas, нужно сначала загрузить шрифт, и только после того, как загрузка произойдет, в функции then() установить свойство context.font в значение, соответствующее выбранному шрифту.
Код:
|
1 2 3 |
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet"> |
Код загрузки Google-шрифта для использования в canvas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function loadFont(name,url){ //загрузка кстомного шрифта Google Fonts //убедитесь, что URL-адрес является верным путем к нужному шрифту let customFont = new FontFace(name, "url(" + url + ")"); customFont.load().then((font) => { document.fonts.add(font); console.log("Font loaded: "+name); showText(); //функция для отрисовки текста с нужным шрифтом в canvas }); }; //вызов функции для загрузки шрифта "Alfa Slab One" loadFont("Alfa Slab One", "https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhew.woff2"); |
Откуда вы можете получить ссылку на шрифт в формате woff2, который где-то находится на серверах Google? Все просто - скопируйте ссылку из кода для блока head и просто вставьте ее в адресной строке браузера - откроется документ примерно такого вида. Выбирайте нужный вам язык (в примере latin) и копируйте url из свойства src:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* vietnamese */ @font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2d1he-Wv.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2dxhe-Wv.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/alfaslabone/v20/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhew.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } |
После этого нужно уже отрисовать текст нужным шрифтом в canvas с помощью функции showText(), которую мы вызывали ранее:
|
1 2 3 4 5 6 7 |
function showText() { let canvas = document.getElementById("fontCanvas"); let ctx = canvas.getContext("2d"); ctx.fillStyle = "#13def4"; ctx.font = '40pt "Alfa Slab One", serif'; ctx.fillText('Alfa Slab One Font', 50, 100); } |
В примере ниже вы найдете 2 варианта текста с разными шрифтами из коллекции Google Fonts.
See the Pen Canvas with Google Fonts by HTML-plus (@ambassador) on CodePen.
Свойства текста
Выравнивание текста
Свойство context.textAlign в Canvas определяет выравнивание текста, использованное при прорисовке.
Возможные значения:
|
1 |
context.textAlign = "left" || "right" || "center" || "start" || "end"; |
Значениt start выравнивает текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево) и по внешнему виду совпадает со значением left. Значение end задает выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево). Оно дает примерно тот же результат, что и значение right.
В примере ниже вы можете посмотреть на результаты выравниваний текста с помощью свойства textAlign и заодно на то, как можно нарисовать рамку вокруг текста в canvas.
fillText(). Так что, если значение textAlign равно "center", то текст будет прорисован в x - (width / 2).See the Pen canvas textAlign by HTML-plus (@ambassador) on CodePen.
Базовая линия текста
Для управления расположением текста существует ряд свойств. Одно из них - context.textBaseline- свойство Canvas, определяющее текущую базовую строку при рисовании текста. Имеет такие значения:
|
1 |
context.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; |
По умолчанию - "alphabetic", значения "hanging" используется в тибетских и других индийских письменностях, а "ideographic" - в китайской, японской и корейской письменностях, поэтому для изменений в основном выбирают "top", "middle" или "bottom". На разницу можно посмотреть ниже или в примере на MDN.
See the Pen canvas text by HTML-plus (@ambassador) on CodePen.
Текстовые эффекты с помощью canvas
В примере ниже вы увидите исчезновение и появление градиентного текста из точек.
See the Pen canvas rainbow text by HTML-plus (@ambassador) on CodePen.
В этом примере текст распадается на точки и взрывается небольшим фейерверком.
See the Pen Canvas Particle Text Effect by HTML-plus (@ambassador) on CodePen.
Светящийся текст от Goran Rakic
See the Pen BackLight Text by Goran Rakic (@golle404) on CodePen.
Текст из черточек от Johan Karlsson
Эффект похож на появление морозных узоров на стекле.
See the Pen Text by Brownian Motion by Johan Karlsson (@DonKarlssonSan) on CodePen.
Рисование текстом от Tim Holman
See the Pen Drawing with text by HTML-plus (@ambassador) on CodePen.
Смещение символов текста от Chris Gannon
See the Pen A PILE OF BOLLOCKS by Chris Gannon (@chrisgannon) on CodePen.
Текст из точек от Tibo
Эффект реализован на основе dat.GUI.
See the Pen Text particle by Tibo (@Gthibaud) on CodePen.
Текст из частиц от Sean Free
В примере есть возможность поиграться с настройками.
See the Pen Particle Text by Sean Free (@seanfree) on CodePen.
Текст в виде кода из матрицы от airen
Текст здесь формируется на основе строки String.fromCharCode(1e2 + Math.random() * 33).
See the Pen Canvas: Run Matrix Text by 大漠 (@airen) on CodePen.
"Невидимые чернила" от Darryl Huffman
Часть текста с классом ink заменяется элементом canvas с частицами, которые делают текст нечитабельным. Но он отображается при наведении мыши.
See the Pen Invisible Ink | Mouse Over! iOS 10 by Darryl Huffman (@darrylhuffman) on CodePen.
Эффект появления текста при наведении от Tyler Durrett
Тут, скорее эффект для текста, который не находится в canvas, но сам код интересен и красив.
See the Pen Reveal Hidden Text by Tyler Durrett (@electricgarden) on CodePen.
