javascript Как вставит текст в элемент Canvas

Методы и свойства для работы с текстом доступные в API-интерфейсе Canvas.

Код для добавления текста:

// добавляем новый канвас в html код
	var canvas = document.createElement ("CANVAS");
	var main = document.getElementsByTagName ("body")[0]; 
	main.appendChild (canvas);
	canvas.setAttribute ("id", "draw");	
	canvas.setAttribute ("width", "600");	
	canvas.setAttribute ("height", "600");	
	var context = canvas.getContext ("2d");
//
// добавляем текст в этот канвас:
// цвет текста
	context.fillStyle = "red"; 
// шрифт
	context.font = "bold 1em sans-serif";
	context.textAlign = "left";
	context.fillText("этот текст невозможно скопировать...", 20, 40);
//
// добавляем еще один текст
	context.font = "bold 1.4em sans-serif"; 
	context.textAlign = "right";
	context.fillText("...потому что он выглядит как картинка!",
	canvas.width-20, canvas.height-40);

Мы получим две фразы, которые пользователь не сможет скопировать и скопипастить, эта своеобразная защита, текст можно только прочитать глазами или сохранить в виде картинки. Распознать можно только с помощью дополнительного софта. А вот поисковые машины с большей долей вероятность СМОГУТ индексировать этот текст, так как он находится в коде.

Свойство textAlign определяет, где будет находиться якорная точка для текста. Значением по умолчанию является "start".

context.textAlign = "left";

Возможные значения данного свойства: "start", "end", "left", "right" и "center". Варианты "start" и "end" означают то же самое, что и слева и справа в языках, где все пишется и читается слева направо (например, английский).

Свойство fillText, strokeText

Как и в случае с прямоугольниками, мы можем обводить текст и применять к нему заливку. Мы указываем текст для рисования, позицию х, у и опциональный параметр max-width, что обеспечит масштабирование текста, если он окажется шире, чем значение maxwidth.

context.fillText("Dog", 100, 100, 200);

context.strokeText("Cat", 100, 150, 200); // если текст окажется шире 200 пик то он автоматически будет подогнан посредством масштабирования до 200 пикселов

Свойство font

При задании значений для свойства font вы можете применять тот же формат, что и в CSS, - это удобно. Если вы будете задавать все значения для данного свойства, то среди них будут следующие: стиль шрифта, его толщина, размер, семейство — именно в таком порядке.

context.font = "2em Lucida Grande";

context.fillText("Tea", 100, 100);

context.font = "italic bold 1.5em Times, serif";

context.fillText("Coffee" , 100, 150);

В спецификации рекомендуется использовать только векторные шрифты (растровые шрифты не очень хорошо отображаются).

Свойство textBaseline устанавливает точки выравнивания в случае со шрифтом и определяет линию расположения ваших букв. Чтобы увидеть, как эта линия влияет на текст, попробуйте начертить ее в той же точке х, у, где вы рисовали текст.

context.beginPath();

context.moveTo(100, 100);

context.lineTo(250, 100);

context.stroke ();

context.textBaseline = "middle";

context.fillText("Alphabet", 100, 100);

Возможные значения данного свойства: "top", "hanging", "middle", "alphabetic", "ideographic" и "bottom". Значением по умолчанию является "alphabetic".