Атрибут | Описание |
---|---|
width | Ширина холста |
height | Высота холста |
Элемент canvas
был введен в HTML5 для рисования графики.
<canvas id="myCanvas">
Не могу отобразить графику. Элемент canvas не поддерживается вашим браузером (IE<9).
</canvas>
Вышеупомянутый элемент создаст прозрачный элемент HTML <canvas>
размером 300 × 150 пикселей.
Вы можете использовать элемент canvas
для рисования потрясающих вещей, фигур, графиков, манипуляции изображениями, создания с помощью JavaScript привлекательных игр и т. д.
Интерфейс CanvasRenderingContext2D предоставляет контекст 2D рендеринга для поверхности рисования элемента <canvas>
. Для того, чтобы получить объект этого интерфейса, следует вызвать метод getContext()
объекта <canvas>
, передав ему в качестве первого аргумента строку "2d":
var ctx = document.getElementById("myCanvas").getContext("2d");
// сейчас мы получили 2D контекст холста в `ctx`
ctx.fillStyle = "#0f0";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, ширина, высота
ctx.fillStyle = "#000";
ctx.fillText("Мой зеленый холст с некоторым черным текстом", 24, 32); // текст, x, y
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Рисование двух прямоугольников на холсте</title>
<style>
canvas{
border:1px solid gray;
}
</style>
<script async>
window.onload = init; // по окночанию загрузки вызывает init()
function init(){
// #1 - Получаем элемент <canvas>
var canvas = document.querySelector('canvas');
// #2 - получаем контекст холста
var ctx = canvas.getContext('2d');
// #3 - теперь все операции заливки будут красными
ctx.fillStyle = 'red';
// #4 - заливаем прямоугольник 100x100 в точке x=0,y=0
ctx.fillRect(0,0,100,100);
// #5 - теперь все операции заливки будут зелеными
ctx.fillStyle = 'green';
// #6 - заливаем прямоугольник 50x50 в точке x=25,y=25
ctx.fillRect(25,25,50,50);
}
</script>
</head>
<body>
<canvas width=300 height=200>Не могу отобразить графику. Элемент canvas не поддерживается вашим браузером (IE<9).</canvas>
</body>
</html>
Получим: