Понедельник, 13 Мая 2013 10:23

Canvas - первые шаги

Written by 
Оцени эту запись
(4 Голоса)

Немного отдохнув от майских праздников, я продолжаю писать статьи о верстке на Kate-land. Сегодня я хочу затронуть тему, которая почти не появлялась на страницах сайта - canvas. В этой статье мы пройдемся по основным моментам работы с элементом canvas.

 

Canvas - первые шаги

Canvas - это элемент, который позволяет рисовать графические элементы на HTML странице при помощи JavaScript. На страницу элемент вставляется при помощи тега <canvas>:

 

 

<canvas></canvas>

 

Данному элементу нужно задать размеры width и height:

 

 <canvas width="500" height="300"></canvas>

 

И обязательно элементу canvas нужно присвоить идентификатор для обращения к нему из JavaScript:

 

<canvas id="firststeps" width="500" height="300"></canvas>

 

Перед тем, как мы начнем разбирать возможности canvas, хочу обратить внимание на поддержку этого элемента браузерами. Его поддерживают браузеры Firefox, Opera, Chrome, и Safari, а также Internet Explorer начиная с 9 версии.

 

Итак, приступим) При помощи canvas можно рисовать линии, прямоугольники, окружности и писать текст. Постепенно с этим разберемся.

 

<canvas id="firststeps" width="200" height="100" style="background: #ccc;"></canvas>

<script>

window.onload = function () {

var canvasElem = document.getElementById('firststeps');

if (canvasElem) {

var firstSteps = canvasElem.getContext('2d');

firstSteps.strokeStyle = "magenta"; 

firstSteps.moveTo(0,0); 

firstSteps.lineTo(200,100);

firstSteps.stroke();

}

}

</script>

 

Результат:

 

 

А теперь пройдемся по строкам.

 

 

var canvasElem = document.getElementById('firststeps');

 

Задаем переменную, которая отвечает элементу canvas по идентификатору.

 

var firstSteps = canvasElem.getContext('2d');

 

Добавляем нашему элементу объект HTML5, при помощи которого сможем далее вставлять графические элементы.

 

Дальше мы уже может вставлять графику.

 

firstSteps.strokeStyle = "magenta"; 

 

Задаем цвет обводки - magenta.

 

 

firstSteps.moveTo(0,0); 

firstSteps.lineTo(200,100);

firstSteps.stroke();

 

Рисуем линию. При помощи moveTo(0,0) перемещаем курсор на указанные координаты от верхнего левого угла элемента canvas. При помощи lineTo(200,100) задаем координаты до которых должна прорисоваться линия. И проводим заданную линию при помощи stroke().

 

Теперь дорисуем прямоугольник при помощи fillRect(), которому нужно задать два параметра - координаты начальной точки прямоугольника и его размеры (ширину и высоту). Предварительно задаем цвет заливки прямоугольника - fillStyle.

 

 

firstSteps.fillStyle = "#00f";
 
firstSteps.fillRect(50,25,100,50);
 
Смотрим на прямоугольник:
 
 

 

 

Далее приступим к окружности. Ее мы может сделать при помощи arc(20, 20, 30, 0, Math.PI*2);

 

Параметрами являются координаты x,y центра элемента, радиус, начало и конец окружности. Кроме задания координат, нужно прорисовать окружность - начало и конец пути, залить элемент цветом и сделать обводку.

 

 

firstSteps.strokeStyle = "#ff0"; - цвет обводки
firstSteps.fillStyle = "#f00"; - цвет заливки
firstSteps.beginPath(); - начало рисования
firstSteps.arc(20, 20, 30, 0, Math.PI*2); - координаты
firstSteps.closePath(); - конец пути
firstSteps.stroke(); - рисование обводки
firstSteps.fill(); - рисование заливки

 

Результат:

 

 

 

Попробуем нарисовать другие окружности:

 

 

 

 

Здесь мы нарисовали окружность с черной заливкой, но без обводки:

 
 
firstSteps.fillStyle = "#000";
firstSteps.beginPath();
firstSteps.arc(50, 50, 10, 0, Math.PI*2);
firstSteps.closePath();
firstSteps.fill();
 
Круг с сине-фиолетовой обводкой, но без заливки:
 
 
firstSteps.strokeStyle = "blueviolet";
firstSteps.beginPath();
firstSteps.arc(100, 80, 10, 0, Math.PI*2);
firstSteps.closePath();
firstSteps.stroke();
 
А также розовый полукруг:
 
 
firstSteps.fillStyle = "pink";
firstSteps.beginPath();
firstSteps.arc(150, 10, 20, 0, Math.PI);
firstSteps.closePath();
firstSteps.fill();
 
 
И последнее, что я хочу рассмотреть в данной статье - это текст. Его добавить очень просто:
 
 
firstSteps.fillText("Cat",10,50); - для добавления текста заливкой
или
firstSteps.strokeText("Cat",100,50); - для добавления только обводки текста
 
 
Предварительно нужно также задать стиль текста:
 
 
firstSteps.font="30px Arial";
 
 
 
 

Здесь был использован код:

 

 

 

firstSteps.strokeStyle = "magenta"; 
firstSteps.fillStyle = "#0ff";
firstSteps.font="30px Arial";
firstSteps.fillText("Cat",10,50);
firstSteps.font="30px Arial";
firstSteps.strokeText("Cat",100,50);
 
 
Это все, что я хотела сказать в этой статье. Напомню, что мы ознакомились в основами Canvas, так сказать, сделали первые шаги в этом направлении. Желаю успешного развития в этом направлении!
 
 
 

 

 

Additional Info

Комментарии  

 
0 #2 kat-khmara 29.07.2013 07:32
Ок, пишите на почту
Цитировать
 
 
0 #1 Андрей 27.07.2013 13:07
:oops: девушка а давайте спишемся или созвонимся есть предложение серьезное!
Цитировать
 

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


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов