Canvas
Речь идет не о том, чтобы предвидеть будущее,
а о том, чтобы творить его.
Дени де Ружмон
Элемент html5 canvas заключает в себе отличные возможности для создания по настоящему интерактивных веб-приложений, так как с его использованием у веб-мастеров отпадает необходимость устанавливать Flash Player.
Как же можно использовать элемент canvas ? Он может быть использован для отображения текста, изображений, графики, линейных и радиальных градиентов и многого другого.
Содержание:
Веб-страница может содержать несколько элементов canvas , индивидуализация каждого элемента производится с помощью идентификатора посредством JavaScript.
Каждый графический элемент < canvas > имеет координаты Х и У. Х – является горизонтальной координатой, а У, соответственно вертикальной. Контекст (getContext) даёт доступ к свойствам и методам 2D API, которые позволяют рисовать и манипулировать изображениями на холсте элемента.
Формы и цвет
Для элемента canvas существует целая группа свойств и функций, которые позволяют рисовать фигуры. Для начала рассмотрим как рисуются прямоугольники. Ниже приведены соответствующие функции.
-
- FillRect (х, у, W, H) — эта функция позволяет рисовать прямоугольник, используя текущий стиль заполнения (по умолчанию цвет чёрный).
- strokeRect (х, у, W, H) — рисует окно, которое описывает данный прямоугольник на холсте, используя текущий стиль линии.
- clearRect (х, у, W, H) — удаляет все пиксели на холсте делая прямоугольник прозрачным.
Смотрим пример кода:
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("Canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.fillRect(5,5,150,150);
}
}
</script>
</head>
<body onload="draw()" bgcolor="lightgray" >
<div>
<canvas id="Canvas" width="500" height="500" > </canvas>
</div>
</body>
</html>
Этот код рисует черный прямоугольник, начиная с 5 пикселей сверху, 5 пикселей слева и 150 пикселей в ширину и высоту.
Для того, чтобы сделать прямоугольник цветным — в код вписываем функцию fillStyle.
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("Canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(5,5,150,150);
}
}
</script>
</head>
<body onload="draw()" bgcolor="lightgray" >
<div>
<canvas id="Canvas" width="500" height="500" > </canvas>
</div>
</body>
</html>
Для того чтобы добавить на холст ещё один прямоугольник добавляем fillRect ещё раз, но со своим fillStyle.
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("Canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(5,5,150,150);
ctx.fillStyle="blue";
ctx.fillRect(25,25,150,150);
}
}
</script>
</head>
<body onload="draw()" bgcolor="lightgray" >
<div>
<canvas id="Canvas" width="500" height="500" > </canvas>
</div>
</body>
</html>
Для того, чтобы нарисовать круг используется дуга, которая описывает окружность. Для построения дуги применяется функция arc.
- arc (x, y, radius, startAngle, endAngle, anticlockwise) — эта функция позволяет рисовать дугу, начинающуюся с начальных координат X, У , радиуса, начального угла поворота двух дуг, отрисовки по часовой либо против часовой стрелки.
Смотрим пример кода:
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("Canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth="3";
ctx.arc(150,150,100,0,Math.PI*2, false);
ctx.stroke();
}
}
</script>
</head>
<body onload="draw()" bgcolor="lightgray" >
<div>
<canvas id="Canvas" width="500" height="500" > </canvas>
</div>
</body>
</html>
Для заливки цветом применяем уже знакомый fillStyle.
Градиенты
Еще одна особенность полотна дает возможность создания градиентов. Соответствующие функции для этого приведены ниже.
- addColorStop (offset, color) — функция остановки цвета, указывает позицию вдоль градиента, она может быть от 0 до 1.
- createLinearGradient (x0, y0, x1, y1) — линейный градиент, цвет переходит по линии от х0, у0 до х1, у1.
- createRadialGradient (x0, y0, r0, x1, y1, r1) — радиальный градиент, цвет переходит по конксу между двумя заданными координатами окружностями.
Смотрим пример кода линейного градиента:
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("Canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// создаем линейный градиент с помощью элемента canvas
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
// добавляем цвета в процентном соотношении
gradient.addColorStop("0","magenta");
gradient.addColorStop(".25","blue");
gradient.addColorStop(".50","green");
gradient.addColorStop(".75","yellow");
gradient.addColorStop("1.0","red");
// при помощи gradient
ctx.fillStyle = gradient;
ctx.fillRect (0,0,500,500);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="Canvas" width="500" height="500"> </canvas><br>
</body>
</html>
Линии, текст и тени
Для того чтобы нарисовать линию необходимо описать в коде её путь в системе координат, который начинается со значения MoveTo, дальнейший путь линии указывается значением LineTo. Так же необходимо указать необходимую толщину линии функцией lineWidth. В следующем примере нарисуем звезду.
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Canvas beginePath example</title>
<script>
function beginDemo()
{
var canvas = document.getElementById("star")
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth="3"; // Толщина линии
ctx.strokeStyle="blue"; // Синяя линия
ctx.moveTo(300,0);
ctx.lineTo(0,600);
ctx.lineTo(600,200);
ctx.lineTo(0,200);
ctx.lineTo(600,600);
ctx.lineTo(300,0);
ctx.stroke();
}
</script>
</head>
<body onload="beginDemo();">
<canvas id="star" width="600" height="600"></canvas>
</body>
</html>
Для написания текста на холсте используются функции приведённые ниже.
- font [ = value ] — задаёт необходимый шрифт.
- textAlign [ = value ] — задаёт параметры выравнивания текста.
- textBaseline [ = value ] — выравнивает текст по базовой линии.
- fillText (text, x, y [, maxWidth ] ) и strokeText (text, x, y [, maxWidth ] ) — эти функции задают три параметра: сам текст, расположение на холсте и максимальную ширину самого текста.
Смотрим пример:
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.font = "italic 36px/2 Unknown Font, sans-serif";
ctx.fillStyle = "blue";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "white";
ctx.fillText ("Привет!!!",canvas.width/8,canvas.height*.8);
}
}
</script>
</head>
<body onload="draw()" bgcolor="lightgray" >
<div>
<canvas id="MyCanvas" width="500" height="500" > </canvas>
</div>
</body>
</html>
Для оформления теней в canvas используются следующие функции:
- shadowOffsetX — смещает тень от элемента по горизонтали.
- shadowOffsetY — смещает тень от элемента по вертикали.
- shadowBlur — задаёт величину размытия тени.
- shadowColor — указывает цвет тени.
Смотрим пример:
<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.font = "italic 48px/2 Unknown Font, sans-serif";
ctx.fillStyle = "blue";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=2;
ctx.shadowColor="white";
ctx.fillStyle = "white";
ctx.fillText ("Привет!!!",canvas.width/4,canvas.height*.8);
ctx.shadowOffsetX=3;
ctx.shadowOffsetY=3;
ctx.shadowBlur=5;
ctx.shadowColor="white"
}
}
</script>
</head>
<body onload="draw()" bgcolor="lightgray" >
<div>
<canvas id="MyCanvas" width="500" height="500" > </canvas>
</div>
</body>
</html>
Вот на примере такого кода можно сделать довольно интересную заставку.
<canvas width="600" height="450"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 40);
</script>