Тег <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 пикселов.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IE 8IE 9CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<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.
[画像:Вывод рисунка с помощью тега <canvas>]
Рис. 1. Вывод рисунка с помощью тега <canvas>