Вебмастеру
раздел создан в помощь вебмастеру для того чтобы разобраться с чего начать создание сайта.

Словарь терминов
толкование терминов встречающихся при cоздании и раскрутке сайтов.

Поисковые системы
принцип работы поисковых систем, алгоритмы, факторы ранжирования.

Интересные статьи
здесь каждый найдёт для себя интересные статьи и ответы на вопросы связанные с созданием сайта.

Заработать в Интернете
реальные способы для вебмастера и не только, начни своё дело.

Известные люди
раздел содержит краткие биографии и истории из жизни людей повлиявших на ход истории Интернета.

Раскрутка сайта
эффективное продвижение сайта, выведи свой сайт на первые позиции.

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

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

< !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.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>
< 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 ] ) - эти функции задают три параметра: сам текст, расположение на холсте и максимальную ширину самого текста.

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

< !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 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="Canvas" width="500" height="500"> < /canvas>
  < /div>
< /body>
< /html>

Для оформления теней в canvas используются следующие функции:

  • 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>

Помогите автору, поделитесь ссылкой на эту страницу со своими друзьями в социальных сетях.

Удачи!



Полезно почитать:
Как заработать деньгиВыбор хостинга для сайтаБесплатные игры онлайн
Монетизация
сайта для начинающих вебмастеров и не только.

Партнерские программы
лучшие партнёрки для заработка в сети.

Рынок Forex
это внебиржевой валютный рынок, участниками которого могут быть как крупные инвесторы, компании, так и рядовые жители любого уголка нашей планеты, имеющие доступ в интернет.

Психология
интересные статьи по психологии и современным психологическим технологиям, рекламе и PR в интернете.

Полезные книги
книги по созданию, продвижению, поисковой оптимизации сайтов.

Интернет
история возникновения Интернета, психология поисковых запросов и т.п.