ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML5 Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML5 Холст


Обозреватель не поддерживает элемент <Canvas>.

Элемент HTML <canvas> используется для рисования графики на веб-странице.

Рисунок слева создан с <canvas>. Он показывает четыре элемента: красный прямоугольник, градиентный прямоугольник, Многоцветный прямоугольник и многоцветный текст.


Что такое HTML холст?

Элемент HTML <canvas> используется для рисования графики, на лету, через JavaScript.

Элемент <canvas> является только контейнером для графики. Для рисования графики необходимо использовать JavaScript.

Canvas имеет несколько методов для рисования контуров, прямоугольников, кругов, текста и добавления изображений.


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

Номера в таблице указывают первую версию обозревателя, полностью поддерживающую элемент <canvas>.

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

Примеры холста

Холст — это прямоугольная область на HTML-странице. По умолчанию холст не имеет границ и не содержит содержимого.

Разметка выглядит следующим:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

Here is an example of a basic, empty canvas:

Your browser does not support the canvas element.

Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>


Рисование линии

Your browser does not support the canvas element

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Рисование окружности

Your browser does not support the canvas element

Пример

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

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

Your browser does not support the canvas element

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Текст обводки

Your browser does not support the canvas element

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Рисование линейного градиента

Your browser does not support the canvas element

Пример

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

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Рисование кругового градиента

Your browser does not support the canvas element

Example

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

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Рисование изображения

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

Справочник по холсту HTML

Чтобы узнать все о HTML <canvas>, посетите наш полный справочник HTML холст.