Введение в HTML5 canvas

23-07-2010

Для тех кто вообще не знает что такое <canvas>. Это HTML5 тег который создает прямоугольную область на которой вы можете рисовать все что захотите. По сути дела, вместо того чтобы полагаться исключительно на инструменты создания образа, как Photoshop, GIMP или Paint.net для создания графики, у вас есть <canvas> на котором можно это сделать.
Вот пример обычного <canvas>, ничем особым не отличается от других HTML элементов:

<canvas  id="can1" width="300" height="300"></canvas>

Тэг определяется наряду с конкретными атрибутами как и другие HTML теги. Здесь мы указали канве высоту и ширину в 300 пикселей, а id позволит нам в дальнейшем рисовать на канве с помощью JavaScript, вызывая необходимые функции для рисования.
Попробуем создать что нибудь красочное, уделяя больше внимания программированию, а не художествам. Первое что нам нужно сделать это поставить ссылку на <canvas>:

var myCanvas = document.getElementById( "can1"  );
Если бы мы использовали Jquery библиотеку это выглядело бы так:
var myCanvas = $( "#can1" )[0];

так как мы особо не нуждаемся в синтаксической помощи Jquery будем использовать только JavaScript. Далее будем использовать метод getContext() для захвата фона отрисовки этого элемента. Это область использующая ваш <canvas> это фактически место где будет рисоваться рисунок.

var myContext = myCanvas.getContext( "2d" );

Мы указываем "2d" в качестве параметра потому что это единственный поддерживаемый фон на данный момент. Теперь так как я имею захваченный фон, я могу начать рисовать, используя свойства fillStyle и stokeStyle, я могу выбрать цвет заливки определенных областей моего рисунка, и цвета границ соответственно. Затем используя методы strokeRect() и fillRect(), можно применять цвета установленные в пошедших свойствах:

myContext.fillStyle   = '#00f';
myContext.strokeStyle = '#f00';
myContext.lineWidth   = 4;
myContext.strokeRect( 0,0,300,300);
myContext.fillRect(0, 0, 300, 300);

После чего мы получим синий квадрат с красными границами, может это не выглядит очень красиво, но сам факт того что это сделано только благодаря HTML и JavaScript очень здорово:


Теперь попробуем нарисовать че нибудь по сложнее например ромб, сперва с помощью метода moveTo() поменяем позицию начальной точки указав координаты x,y начнем рисовать с верхней середины:

myContext.moveTo( 150, 0 );

Затем используем метод lineTo() для того чтобы нарисовать линию до другой точки, отметим что не нужно каждый раз указывать первую точку, рисование продолжится с той точки на которой вы остановились.

myContext.lineTo( 0, 150 );
myContext.lineTo( 150, 300 );
myContext.lineTo( 300, 150 );
myContext.lineTo( 150, 0 );

После этого кода мы получим вот такой рисунок:


И последнее что я сделаю это поменяю цвет заливки и цвет границ используя свойства fillStyle и strokeStyle:

myContext.fillStyle   = '#F63806';
myContext.strokeStyle = "#000";

и теперь используя методы fill() и stroke() применю их к ромбу:

myContext.fill();
myContext.stroke();

Вот и все вот окончательный результат:


А вот исходный код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="noindex" />
  <title>Canvas Test</title>
</head>
 
<body>
 
<canvas id="can1" width="300" height="300"></canvas>
 
  <script type="text/javascript">
  var myCanvas = document.getElementById( "can1" );
  var myContext = myCanvas.getContext( "2d" );
  myContext.fillStyle   = '#00f';
  myContext.strokeStyle = '#F63806';
  myContext.lineWidth   = 4;
  myContext.fillRect(0, 0, 300, 300);
  myContext.strokeRect( 0,0,300,300);
 
  myContext.moveTo( 150, 0 );
  myContext.lineTo( 0, 150 );
  myContext.lineTo( 150, 300 );
  myContext.lineTo( 300, 150 );
  myContext.lineTo( 150, 0 );     
 
  myContext.fillStyle   = '#F63806';
  myContext.strokeStyle = "#000";
 
  myContext.fill();
  myContext.stroke();
 
  </script>
 
</body>
</html>
Роман Малышев7.23.2010 08:07
Очень интересно, спасибо :) HTML5 - это действительно интересно...
Владимир9.13.2013 09:09
Вот уж не думал, что с помощью HTML5 можно делать такие вещи! Спасибо за информацию. Может использую такие картинки на своем сайта.
ОСТАВИТЬ КОММЕНТАРИЙ