Научиться работать с тегом html5 “Canvas” (что переводится как «Холст») достаточно просто, хотя, конечно, без знания основ работы с html и javascript не обойтись. Цель данной статьи – не развернутый курс по работе с canvas, а краткое введение для начинающих, после которого, пользуясь справочной информацией вроде приведенных здесь шести статей вы сможете адекватно ориентироваться в нем и работать с ним.
Чтобы понять, насколько проста работа с canvas, не поленимся создать пустой html-файлик и разместим в нем следующий код:
<!DOCTYPE html>
<body>
<canvas width="200" height="200" id="my-canvas">Обновите браузер!</canvas>
<script>
var mycvs = document.getElementById("my-canvas");
var myctxt = mycvs.getContext("2d");
myctxt.fillRect(0, 0, 100, 100);
</script>
</body>
</html>
Запустив файл, вы получите на экране некое подобие шедевра Малевича. Откуда же оно берется? Пропустив информацию по базовым html-тегам, перейдем сразу к главному:
Тег canvas создает на странице новый элемент – холст для рисования. От нас требуется задать размеры этого холста (атрибуты width и height – ширина и высота), а также задать id, через который мы будем к нему обращаться. Холст готов для рисования, но пока пуст.
Рисование, естественно, происходит командами js. Как мы видим, их потребовалось всего три. В первой строке происходит присваивание переменной mycvs объекта холста HTMLCanvasElement (определение которого происходит как раз по id, ибо их (канвасов) на странице может быть много). Во второй – присваиваем переменной myctxt, с которой теперь и будем в основном работать, контекста рисования данного холста. Далее начинается само рисование. Как нетрудно догадаться, метод fillRect рисует на заданном холсте прямоугольник с указанными координатами (первые два параметра) и указанных размеров (следующие два).
//Попробуем изменить скрипт, добавив в него строку:
var mycvs = document.getElementById("my-canvas");
var myctxt = mycvs.getContext("2d");
myctxt.fillRect(0, 0, 100, 100);
myctxt.fillRect(50, 50, 100, 100);
Как мы видим, мы получили в результате два слипшихся квадрата, наложенных один на другой. И так каждый новый элемент будет раз за разом накладываться на предыдущие, конечно, оставаясь в рамках холста, так как все выходящее за его рамки, заданные в самом теге canvas атрибутами размеров width и height, отображаться не будет.
Не вдаваясь в подробности, сообщим, что так же существуют методы для рисования иных простых фигур – кругов, а также сложных, состоящих из точек, соединенных прямыми или кривыми Безье и заливки. Эти и любые другие методы более детально можно рассмотреть в вышеприведенных и любых других справочных статьях. А мы коснемся более интересных тем.
Для анимации, реализуемой, как правило, через метод setInterval, предусмотрены такие методы, как метод очистки куска холста для перерисовки clearRect (с теми же параметрами, что и для рисования квадрата), методы сохранения состояния холста и его восстановления save() и restore(), а также, например, методы, отвечающие за вращение или трансформирование: rotate и transform.
Но, естественно, существенный момент для Web-графики – это вывод на холст изображений. Вот тут остановимся поподробнее. Делается это методом drawImage, однако требует чуть большей подготовки, чем рисование квадрата. Во-первых создадим объект javascript изображение (можно дописать после вышеприведенного примера):
var myImg = new Image();
//Во-вторых, зададим путь до файла этого изображения (используйте свой):
myImg.src = "myimg.png"; // или другой путь к файлу
//И, наконец, после загрузки изображения (onload), выведем его на холст:
myImg.onload = function() {
myctxt.drawImage(myImg, 0, 0);
}
После того, как изображение загрузится из указанного файла, оно будет выведено на холст в точке с координатами 0, 0. Соответственно, координаты можно изменить. Можно также добавить методу еще два параметра – ширину и высоту выводимого изображения: myctxt.drawImage(myImg, 0, 0, 150, 80). Параметров может быть также девять: myctxt.drawImage(myImg, 10, 10, 150, 80, 0, 0, 150, 80). В этом случае первые четыре параметра, следующие за переменной myImg описывают фрагмент изображения, который будет выводиться (т.е. оно выводится не целиком), а следующие четыре – место на холсте, куда он будет выводиться.
Выводимые изображения лепятся друг на друга по той же системе, что и остальные объекты, подобно слоям фотошопа. При этом мы можем управлять закономерностью их наложения. Для этого существует свойство globalCompositeOperation, определяемое перед выводом изображения, которое может получать значения:
source-over – новая фигура накладывается на старую (по умолчанию)
source-in – отображается только часть новой фигуры, совпадающая со старой. Остальная часть новой фигуры и старая фигура не выводятся
source-atop – аналогично предыдущему, но старая фигура также выводится, происходит только обрезка новой
destination-over – наложение старой фигуры поверх новой
и многие другие, например сложение цветов или вырезание одной фигуры из другой (вспоминаем тот же фотошоп и другие графические редакторы). Пример вывода двух изображений, одно из которых становится маской для второго выводимого:
myctxt.drawImage(msk, 0, 0); myctxt.globalCompositeOperation = "source-in"; myctxt.drawImage(mskdImage, 0, 0, 300, 200); //где изображение mskdImage обрезается по контуру изображения msk, а изображение-маска msk не выводится, а только задает контур для обрезки.
Предусмотрена в канвасе и маска – clip() – но, увы, маской в данном случае может являться только геометрическая фигура, созданная самим канвасом, а не свободное изображение.
И последнее, о чем сегодня стоит упомянуть – это полезное свойство канваса, позволяющее превратить результаты нашего рисования обратно в изображение. Для этого существует метод toDataURL. Он возвращает из указанного холста (ВНИМАНИЕ – холста, т.е. mycvs а не myctxt в нашем примере) данные изображения, выстроенные в виде интернет-адреса (по умолчанию, если не заданы параметры, говорящие об ином, изображение рассматривается как png). Т.е. выводим данные из объекта холста:
var myImgData = mycvs.toDataURL(); //Полученные данные мы можем использовать для вывода на экран, использовав вместо url-адреса изображения: var myImgTwo = new Image(); var myImgData = mycvs.toDataURL(); myImgTwo.src = myImgData;
или
document.getElementByTagName("img").src = myImgData;
//а также для сохранения этих данных в базу или файл.
Вот и все. Надеюсь полученных данных вам хватит для начала ознакомления с тегом html-5 canvas, ибо оно того стоит а познаний требует не столь уж масштабных – по сути для первичного ознакомления с ним хватит дня, остальное придет в процессе. Удачных вам экспериментов!