Тег <canvas>

Internet Explorer

Chrome

Opera

Safari

Firefox

Android

iOS

9.0+

6.0+

9.6+

3.1+

4.0+

2.1+

3.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

Синтаксис

<canvas id="идентификатор"></canvas>

Атрибуты

height

Задает высоту холста. По умолчанию 300 пикселов.

width

Задает ширину холста. По умолчанию 150 пикселов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>canvas</title>

<script>

window.onload = function() {

var drawingCanvas = document.getElementById('smile');

if(drawingCanvas && drawingCanvas.getContext) {

var context = drawingCanvas.getContext('2d');

// Рисуем окружность

context.strokeStyle = "#000";

context.fillStyle = "#fc0";

context.beginPath();

context.arc(100,100,50,0,Math.PI*2,true);

context.closePath();

context.stroke();

context.fill();

// Рисуем левый глаз

context.fillStyle = "#fff";

context.beginPath();

context.arc(84,90,8,0,Math.PI*2,true);

context.closePath();

context.stroke();

context.fill();

// Рисуем правый глаз

context.beginPath();

context.arc(116,90,8,0,Math.PI*2,true);

context.closePath();

context.stroke();

context.fill();

// Рисуем рот

context.beginPath();

context.moveTo(70,115);

context.quadraticCurveTo(100,130,130,115);

context.quadraticCurveTo(100,150,70,115);

context.closePath();

context.stroke();

context.fill();

}

}

</script>

</head>

<body>

<canvas id="smile" width="200" height="200">

<p>Ваш браузер не поддерживает рисование.</p>

</canvas>

</body>

</html>

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Вывод рисунка с помощью тега <canvas>

HTML5

Изображения