Примеры Canvas. Canvas заключает в себе отличные возможности для создания по настоящему интерактивных вебприложений, так как с его использованием у вебмастеров отпадает необходимость устанавливать Flash Player. Как же можно использовать элемент canvas

Название	Canvas заключает в себе отличные возможности для создания по настоящему интерактивных вебприложений, так как с его использованием у вебмастеров отпадает необходимость устанавливать Flash Player. Как же можно использовать элемент canvas
Дата	07.01.2019
Размер	71.5 Kb.
Формат файла
Имя файла	Примеры Canvas.doc
Тип	Документы #62756

Canvas

Речь идет не о том, чтобы предвидеть будущее,
а о том, чтобы творить его.
Дени де Ружмон

Элемент html5 canvas заключает в себе отличные возможности для создания по настоящему интерактивных веб-приложений, так как с его использованием у веб-мастеров отпадает необходимость устанавливать Flash Player.

Как же можно использовать элемент canvas? Он может быть использован для отображения текста, изображений, графики, линейных и радиальных градиентов и многого другого.

Содержание:

Формы и цвет.
Градиенты.
Линии, текст и тени.

Веб-страница может содержать несколько элементов canvas, индивидуализация каждого элемента производится с помощью идентификатора посредством JavaScript.

Каждый графический элемент < canvas > имеет координаты Х и У. Х – является горизонтальной координатой, а У, соответственно вертикальной. Контекст (getContext) даёт доступ к свойствам и методам 2D API, которые позволяют рисовать и манипулировать изображениями на холсте элемента.

Формы и цвет

Для элемента canvas существует целая группа свойств и функций, которые позволяют рисовать фигуры. Для начала рассмотрим как рисуются прямоугольники. Ниже приведены соответствующие функции.

FillRect (х, у, W, H) - эта функция позволяет рисовать прямоугольник, используя текущий стиль заполнения (по умолчанию цвет чёрный).
strokeRect (х, у, W, H) - рисует окно, которое описывает данный прямоугольник на холсте, используя текущий стиль линии.
clearRect (х, у, W, H) - удаляет все пиксели на холсте делая прямоугольник прозрачным.

Смотрим пример кода:

< !DOCTYPE html>
< html>
< head>
  < 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>
< html>
< head>
  < 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>
< html>
< head>
  < 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, У , радиуса, начального угла поворота двух дуг, отрисовки по часовой либо против часовой стрелки.

Градиенты

Еще одна особенность полотна дает возможность создания градиентов. Соответствующие функции для этого приведены ниже.

addColorStop (offset, color) - функция остановки цвета, указывает позицию вдоль градиента, она может быть от 0 до 1.
createLinearGradient (x0, y0, x1, y1) - линейный градиент, цвет переходит по линии от х0, у0 до х1, у1.
createRadialGradient (x0, y0, r0, x1, y1, r1) - радиальный градиент, цвет переходит по конксу между двумя заданными координатами окружностями.

Смотрим пример кода линейного градиента:

< !DOCTYPE html>
< html>
< head>
  < script type="text/javascript">
function draw()
{
  var canvas = document.getElementById("Canvas");
  if (canvas.getContext)
    {
var ctx=canvas.getContext("2d");
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");
ctx.fillStyle=gradient;
ctx.fillRect(0,0,500,500);
    }
}
< /script>
< /head>
< body onload="draw()" bgcolor="lightgray">
  < div>
    <canvas id="Canvas"width="500"height="500">< /canvas>
  < /div>
< /body>
< /html>

Нажми чтобы посмотреть

Линии, текст и тени

Для того чтобы нарисовать линию необходимо описать в коде её путь в системе координат, который начинается со значения MoveTo, дальнейший путь линии указывается значением LineTo. Так же необходимо указать необходимую толщину линии функцией lineWidth. В следующем примере нарисуем звезду.

< !DOCTYPE html>
< html>
< head>
  < 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.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="draw()" bgcolor="lightgray">
  < div>
    <canvas id="Canvas"width="500"height="500">< /canvas>
  < /div>
< /body>
< /html>

Нажми чтобы посмотреть

Для написания текста на холсте используются функции приведённые ниже.

font [ = value ] - задаёт необходимый шрифт.
textAlign [ = value ] - задаёт параметры выравнивания текста.
textBaseline [ = value ] - выравнивает текст по базовой линии.
fillText (text, x, y [, maxWidth ] ) и strokeText (text, x, y [, maxWidth ] ) - эти функции задают три параметра: сам текст, расположение на холсте и максимальную ширину самого текста.

shadowOffsetX - смещает тень от элемента по горизонтали.
shadowOffsetY - смещает тень от элемента по вертикали.
shadowBlur - задаёт величину размытия тени.
shadowColor - указывает цвет тени.

Смотрим пример:

< !DOCTYPE html>
< html>
< head>
  < script type="text/javascript">
function draw()
{
var canvas=document.getElementById("Canvas");
  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);
  }
}
< /script>
< /head>
< body onload="draw()" bgcolor="lightgray">
  < div>
  <canvas id="Canvas"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>

Нажми чтобы посмотреть