HTML 5 canvas (продължение)
12-09-2010
Първият урок можете да намерите на този линк HTML 5 canvas

Първото, което е ще работим по същия html от предишния урок, затова и тук само ще давам init функцията.


<!DOCTYPE html>
<html>
<head>
<title>Canvas First Example Demo</title>
<meta charset="utf-8">
<style>
canvas { border: 1px dotted black; }
</style>
<script>
function init() {

}
</script>
</head>
<body>
<canvas id="my_canvas" width="400" height="400">Този текст се показва в браузъри, които не поддържат canvas (thank you IE)</canvas>
<button onclick="init()">Стартирай кода!</button>
</body>
</html>


Първите две функции, които ще разгледаме в този урок са quadraticCurveTo и bezierCurveTo. Причината да ги разглеждме заедно е, че те са почти еднакви. Разликата се крие в илюстрацията по-долу, като нея съм я взел от
https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes



quadraticCurveTo(cpx, cpy, x, y);
void bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);


Разликата между двете функции е, че първата има една контролна точка (червените на картинката), а втората има две.

При quadraticCurveTo cpx и cpy са координатите на контролната точка, а x и y са координатите на крайната точка на правата (една от двете точки маркирани в синьо, другата е началната точка за рисуване).

При bezierCurveTo, cp1x, cp1y и cp2x, cp2y са съответно координатите на едната контролна точка и координатите на втората, а x и y са координатите на крайната точка на линията. И тук началната се определя преди това.

С тези две функции е твърде трудно да се рисува, защото няма визуално представяне на момента както е при продуктите на Adobe например.

За пример ще взема кода от https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes.

function init() {
var my_canvas = document.getElementById('my_canvas');
var my_context = my_canvas.getContext('2d');
my_context.beginPath();
my_context.moveTo(75,25);
my_context.quadraticCurveTo(25,25,25,62.5);
my_context.quadraticCurveTo(25,100,50,100);
my_context.quadraticCurveTo(50,120,30,125);
my_context.quadraticCurveTo(60,120,65,100);
my_context.quadraticCurveTo(125,100,125,62.5);
my_context.quadraticCurveTo(125,25,75,25);
my_context.stroke();
}


ДЕМО

my_context.moveTo(75,25);

с този отрязък от код местим началната ни точка на координати x = 75, y = 25

my_context.quadraticCurveTo(25,25,25,62.5);

после правим линия с начални координати, зададените от moveTo и крайни координати x = 25, y = 62.5, и я изкривяваме като контролната ни точка за изкривяване е с координати x = 25, y = 25

my_context.quadraticCurveTo(25,100,50,100);

след това правим линия с начални координати, крайните от предишната стъпка и крайни координати x = 50, y = 100, и я изкривяваме като контролната ни точка за изкривяване е с координати x = 25, y = 100

и така до последнята линия, след това следва метода за изчертаване (споменат в предишния урок). Също може да бъде заменен с fill(), ако искаме да запълним селекцията.

function init() {
var my_canvas = document.getElementById('my_canvas');
var my_context = my_canvas.getContext('2d');
my_context.beginPath();
my_context.moveTo(75,40);
my_context.bezierCurveTo(75,37,70,25,50,25);
my_context.bezierCurveTo(20,25,20,62.5,20,62.5);
my_context.bezierCurveTo(20,80,40,102,75,120);
my_context.bezierCurveTo(110,102,130,80,130,62.5);
my_context.bezierCurveTo(130,62.5,130,25,100,25);
my_context.bezierCurveTo(85,25,75,37,75,40);
my_context.fill();
}


С тази функция рисуваме сърце чрез bezierCurveTo. Като началната точка на първата линия започва от координати 75, 40 (зададени от moveTo) и завършва на 50, 25. А първите 4 цифри са координатите на двете контролни точки (разлката с quadraticCurveTo е, че тук имаме 2 контролни точки за изкривяване)


Работа с текст
Тук ще разгледаме една променлива, на която можем да задаваме различен шрифт, размер и т.н и две функции за изчертаване на текст.



font : може да приема всяка стойност, която бихме задали на атрибута font в css
fillText(text, x, y [, maxWidth]) : изписва текста, зададен от text на координати x и y и приема незадължителен параметър maxWidth
strokeText(text, x, y [, maxWidth]) : изписва очертанията на текста, зададен от text на координати x и y и приема незадължителен параметър maxWidth


С тази init функция ще демонстрираме текста:

function init() {
var my_canvas = document.getElementById('my_canvas');
var my_context = my_canvas.getContext('2d');
my_context.font = "bold 15px arial"
my_context.strokeStyle = "blue";
my_context.strokeText("Очертанията на някакъв текст", 20, 20);

my_context.font = "14px 'Palatino Linotype'";
my_context.fillStyle = "red";
my_context.fillText("Някакъв текст, запълнен със съдържание", 20, 50);
}


ДЕМО

Както се вижда преди изписването на всеки текст задаваме шрифт, затова и двата са с различен шрифт, размер и стил. Сложил съм и различни цветове (като това как става е обяснено в предишния урок)


Как да правим градиенти
Има два типа градиент, linear и radial. А функциите, който ще използваме за направата на различни градиенти са:

createLinearGradient(x1, y1, x2, y2) : функцията прави градиент като започва от координатите на първата точка и завършва на координатите на втората точка.
createRadialGradient(x1, y1, r1, x2, y2, r2) : Функцията прави градиент като приема x1 и y1 са координатите на първия кръг, а r1 радиуса му и съответно x2, y2 и r2 са стойностите за втория кръг.
addColorStop(number, color) : функцията приема стойности за число от 0 до 1, като 0 е началото на градиента, а 1 неговият край. За color може да се зададе всяка стойност за цвят.


С този кратък код ще илюстрираме как става linear градиент. За radial няма да давам пример, но той ще стане горе-долу по същия начин.

function init() {
var my_canvas = document.getElementById('my_canvas');
var my_context = my_canvas.getContext('2d');

var my_gradient = my_context.createLinearGradient(0, 0, 0, 150);
my_gradient.addColorStop(0, "#FF0000");
my_gradient.addColorStop(1, "#00FF00");
my_context.fillStyle = my_gradient;
my_context.fillRect(0, 0, 150, 150);
}


ДЕМО

В този код има няколко неща за отбелязване. С първия ред

var my_gradient = my_context.createLinearGradient(0, 0, 0, 150);


създаваме променлива, която ще съдържа нашия градиент. Той ще е вертикален и ще започва от координати 0, 0 и ще завършва на координти 0, 150. Това е вертикална линия. Ако искаме да стане под някакъв диагонал, тогава трябва да завършва примерно на 50, 150.

След като сме създали променливата, присвоили сме и градиента, вече можем да сложим и цветовете. Това става с функцията, addColorStop. В моя код има само два цвята (един за начало и един за край), но лесно може да се добави примерно синьо по средата. Това ще стане с този код:

my_gradient.addColorStop(0.5, "#0000FF");


След като сме създали градиента, вече може да го зададем като fillStyle. След това правим квадрат с височина и широчина 150 и начални координати 0, 0. Точно затова започнахме градиента си от 0,0 и завършихме на височина 150. За да можем да видим целия резултат.



Как можем да използваме изображения в canavas елемнта ни?
Това става изключително лесно. Като използваме функцията drawImage. Тя има 6 варианта, но аз ще ви покажа само един. Останалите може да намерите тук

drawImage(image, x, y, width, height) : зарежда изображението, като го оразмерява до стойностите зададени от width и height. Има вариант на функцията, който вместо да го оразмерява взима само част от него

image - е пътя до изображението.
x - x координата от горния ляв ъгъл
y - y координата от горния ляв ъгъл
width - широчина на изображенито в canvas платното
height - височина на изображенито в canvas платното

Тук ще се наложи да променим малко кода. Ще имаме една функция, която зарежда изображението още със зареждането на страницата и при натискане на бутона то ще е наразположение, за да се покаже.

Така в html кода на body ще сложим onload="init()", а на button onclick="draw()".

и тогава javascript функциите ни ще станат:

var img = new Image();
function init() {
img.src = 'http://prikachi.com/images/975/2500975a.jpg';
}
function draw() {
var my_canvas = document.getElementById('my_canvas');
var my_context = my_canvas.getContext('2d');
my_context.drawImage(img, 20, 50, 99, 116);
}


ДЕМО

Преди да започнем с функциите създаваме една променлива, която е image. Във функцията init просто задаваме пътя до изображението. В моя случай е линк, но може и да е път от рода на images/1.jpg
И след като сме заредили изображението, то вече може да се ползва от функцията drawImage.

С това мисля да приключа и този урок. В общи линии повечето функции за рисуване на canvas се покриват с тези два урока. Остнаха някой функции за трансформиране като scale, rotate и други, но те може да се погледнат в линка, който в началото на първия урок.





/ Трябва да сте регистриран за да напишете коментар /