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>

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *