Последние учебники веб-разработки
×

JavaScript Справка

обзор

JavaScript

JS строка JS Число JS операторы JS Заявления JS математический JS Дата JS массив JS логический JS RegExp JS Глобальный JS конверсионный

браузер BOM

Window Navigator Screen History Location

HTML DOM

DOM Документ DOM элементы DOM Атрибуты DOM Мероприятия DOM Стиль

HTML Объекты

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Другие объекты

CSSStyleDeclaration


 

HTML canvas strokeText() Method

<Холст объекта

пример

Написать "Hello world!" и "Big smile!" (with gradient) на холсте, используя strokeText() :

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);
Попробуй сам "

Поддержка браузеров

Числа в таблице указать первую версию браузера, который полностью поддерживает метод.

метод
strokeText() 4,0 9,0 3,6 4,0 10,1

Note: Параметр MaxWidth не поддерживается в Safari.


Определение и использование

strokeText() метод рисует текст (with no fill) на холсте. По умолчанию цвет текста черный.

Tip: Используйте шрифт свойство , чтобы указать шрифт и размер шрифта, а также использовать StrokeStyle свойство для отображения текста в другой цвет / градиент.

Синтаксис JavaScript: context . strokeText( text,x,y,maxWidth ) ;

Значения параметров

параметр Описание Сыграй
text Определяет текст, который будет записан на холсте Сыграй "
x Координаты х, где начать рисовать текст (относительно холста) Сыграй "
y Координату, где начать рисовать текст (относительно холста) Сыграй "
maxWidth Необязательный. Максимально допустимая ширина текста в пикселях Сыграй "

<Холст объекта