web-touristHTML 5 canvas (продължение)
Автор: adrian
Първият урок можете да намерите на този линк 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 и други, но те може да се погледнат в линка, който в началото на първия урок.
