Canvas фігури, rect, stroke / fill (), stroke / fillStyle

Canvas – це новий елемент HTML5, який призначений для створення растрового зображення за допомогою JavaScript. Саме слово канвас перекладається як полотно або канва. Текст усередині тега буде проігнорований браузером з підтримкою канвас і показаний у браузері без підтримки canvas. Докладніше про цей елемент ми розповіли у минулій статті.


<canvas id="test" width="500" height="500">
Тут можна вказати текст для тих,
у кого не підтримується тег canvas
</canvas>

У тега є два атрибути – height (висота) і width (ширина). Якщо розміри не вказати, то за умовчанням розмір полотна дорівнюватиме 150х300 пікселів. Canvas створює область фіксованого розміру, вмістом якого управляють контексти. Атрибути не мають відношення до CSS, вони позначають ширину і висоту в пікселях не на екрані, а на координатній площині полотна.

Не рекомендується використовувати CSS для встановлення висоти та ширини полотна, тому що в цьому випадку канвас піддасться масштабуванню. Встановіть розміри в елементі.

Також потрібно встановити обов’язковий ідентифікатор для звернення до елемента JavaScript.

Також можна застосувати стиль, наприклад, зробимо рамку навколо полотна і не будемо встановлювати розміри, щоб побачити ширину та висоту за умовчанням.
<canvas id="border" style = "border:2px solid black">Canvas</canvas>

Зараз усі сучасні браузери підтримують канвас. Якщо такої впевненості немає, можна влаштувати невелику перевірку.

var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
}else{
// Зробити щось для виведення прихованого вмісту // або дозволити браузеру вивести текст елемента canvas}

Ми знаходимо елемент канвас по ідентифікатору, а потім викликаємо метод getContext() з єдиним параметром – рядком 2d. Якщо getContext() повертає відповідь, ми отримуємо 2D-контекст полотна для додавання об’єктів.

Розмір полотна можна обчислити програмно через властивості canvas.width і canvas.height.

Перший приклад canvas

<canvas height='320' width='480' id='first_example'>Пример</canvas>


<script>


var canvas = document.getElementById("first_example");
var context = canvas.getContext('2d');
context.fillRect(0, 0, canvas.width, canvas.height);


</script>

Якщо відкрити створений приклад браузером, побачимо область з чорним прямокутником. Це і є те саме полотно, на якому намальований прямокутник, розміри якого рівні розмірам елемента canvas. Якби ми не малювали чорний прямокутник, то ми мали б прозоре полотно. Розміри задаються в пікселі, а відлік йде від верхнього лівого кута. На полотні можна малювати різні постаті. Можна вказати негативні значення для координат, помилки не станеться, але сенсу в цьому немає – фігури не буде видно на екрані.

Налаштування кольору та розміру

Стилі для заливки та обведення мають глобальний параметр. Якщо ви задали якусь властивість, то воно застосовується для всіх елементів, якщо не було після цього змінено. Наприклад, ми спочатку задали зелений колір для заливки та синій для обведення. Якщо після цього ми намалюємо кілька фігур, всі вони будуть мати зелений фон і синє обведення.

За заливку відповідає властивість FillStyle. За замовчуванням використовується чорний колір. За колір і стиль обведення відповідає властивість strokeStyle.

Колір задається так само як і в CSS (чотири способи)

// всі чотири рядки задають помаранчевий колір заливки
context.fillStyle = “orange”;
context.fillStyle = “#FFA500”;
context.fillStyle = “rgb(255,165,0)”;
context.fillStyle = “rgba(255,165,0,1)”

Є ще рідко використовуваний спосіб через HSL – hsl (219, 58%, 93%).

Встановимо бажані налаштування – вкажемо, що ми хочемо червоний колір (#FF0000) та товщину в 3 пікселі для обведення та зелений колір (#00FF00) для заливки:

context.strokeStyle = ‘#FF0000’; // Колір обведення
context.lineWidth = 3; // Ширина лінії
context.fillStyle = ‘#00FF00’; // Колір заливки

Прямокутники canvas

Почнемо із прямокутника. У канвас  є два види прямокутників – залиті та не залиті (обведення). Передбачено три функції малювання прямокутників.

• strokeRect(x, y, ширина, висота) – малює межі прямокутника
• fillRect(x, y, ширина, висота) – малює зафарбований прямокутник
• clearRect(x, y, ширина, висота) — Очищає область на полотні розмір прямокутника заданого розміру у зазначеній позиції

Функція clearRect()¦ як би вирізає шматок фігури, за яким можна побачити полотно.

context.clearRect(10, 10, 200, 200); // Очищення області зазначеного розміру та положення
context.clearRect(0, 0, canvas.width, canvas.height); // Очищення всього полотна

Намалюємо два види прямокутників.

var canvas = document.getElementById(“rectangles”);
var context = canvas.getContext(‘2d’);

context.strokeStyle = ‘#FF0000’; // Колір обведення
context.lineWidth = 3; // Ширина лінії
context.fillStyle = ‘#00FF00’; // Колір заливки

context.fillRect(10, 10, 390, 100);
context.strokeRect(40, 130, 200, 150);

Спробуйте намалювати ще один зафарбований прямокутник і вирізати ь із нього прямокутник меншого розміру.

Кожна фігура, що додається, розміщується на окремому рівні; наступний фрагмент коду створює три прямокутники зі зміщенням 15 пікселів, щоб вони частково наклалися один на одного.

<script>
var canvas = document.getElementById(“rects”);
var context = canvas.getContext(‘2d’);
canvas.height = 200;
canvas.width = 300;

context.fillStyle = “rgb(200, 0, 0)”;
context.fillRect(15, 15, 100, 100);
context.fillStyle = “rgb(0, 200, 0)”;
context.fillRect(30, 30, 100, 100);
context.fillStyle = “rgb(0, 0, 200)”;
context.fillRect(45, 45, 100, 100);

Малюємо шахівницю

<canvas id='chessboard'>Шахова дошка>
<script>
var canvas = document.getElementById(“chessboard”);
var context = canvas.getContext(‘2d’);
// Розміри полотна
canvas.width = 300;
canvas.height = 300;
// Зовнішня рамка для дошки
context.strokeRect(15, 15, 266, 266);
// Внутрішня рамка для дошки
context.strokeRect(18, 18, 260, 260);
// Зафарбовуємо внутрішню область чорним кольором
context.fillRect(20, 20, 256, 256);
for (i = 0; i < 8; i + = 2)
for(j=0; j<8; j+=2) {context.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
context.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
}

У цьому прикладі ми встановили розмір полотна 300 на 300 пікселів. Далі ми намалювали два порожні прямокутники, які формують рамку навколо нашої «шахової дошки». Далі зафарбовуємо внутрішню частину рамки прямокутником чорного кольору, а потім у циклі робимо в них своєрідні квадратні дірки, щоб через них просвічував білий колір. У результаті в нас вийде гарна шахівниця.

Розмальовуємо шахівницю


<canvas id='color_chessboard'>Кольорова шахівниця</canvas>
var canvas = document.getElementById(“color_chessboard”);
var context = canvas.getContext(‘2d’);
canvas.width = 300;
canvas.height = 300;
context.strokeStyle = ‘#B70A02’; // міняємо колір рамки
context.strokeRect(15, 15, 266, 266);
context.strokeRect(18, 18, 260, 260);
context.fillStyle = ‘#AF5200’; // міняємо колір клітин
context.fillRect(20, 20, 256, 256);
for (i = 0; i < 8; i + = 2)
for(j=0; j<8; j+=2) {
context.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
context.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
 }
</script>

Лінії та дуги canvas

Ми можемо малювати прямі та вигнуті лінії, кола та інші фігури. Замкнуті лінії можна заливати кольором. На відміну від малювання прямокутників, малювання ліній це одна команда, які послідовність. Так, спочатку треба оголосити початок нової лінії за допомогою beginPath (), а в кінці сказати від того, що малювання лінії закінчується за допомогою closePath (). Кожен відрізок лінії має початок і кінець.

beginPath використовується що б «почати» серію дій, що описують малювання фігури. Кожен новий виклик цього методу скидає всі дії попереднього та починає «малювати» знову.

closePath є не обов’язковою дією і по суті воно намагається завершити малювання провівши лінію від поточної позиції до позиції з якої почали малювати.

Завершальний крок – це виклик методів stroke або fill. stroke обводить фігуру лініями, а fill заливає фігуру суцільним кольором.

Також існують такі методи, як,

• moveTo(x, y) – переміщає “курсор” у позицію x, y і робить її поточною
• lineTo(x, y) – веде лінію з поточної позиції у вказану, і робить згодом вказану поточною
• arc(x, y, radius, startAngle, endAngle, anticlockwise) – малювання дуги, де x і y центр кола, далі початковий і кінцевий кут, останній параметр вказує напрямок

Намалюймо ламану, що складається з двох відрізків:

context.beginPath();
context.moveTo(10, 10); // Початок лінії
context.lineTo(100, 100); // Вузол лінії
context.lineTo(150, 100); // Кінець лінії
context.closePath();

Якщо набір відрізків буде замкнутий, то в нас вийде полігон, який можна залити кольором. Створимо та заллємо трикутник за допомогою функції fill().

context.beginPath();
context.moveTo(50, 50);
context.lineTo(50, 250);
context.lineTo(250, 250);
context.closePath();
context.fill();

Змінюємо ширину лінії

Значення ширини лінії зберігається у властивості lineWidth контексту canvas і одна одиниця відповідає одному пікселю. Значення за умовчання природне 1.0

Стиль верхівки ліній

Стиль верхівки лінії зберігається у властивості lineCap і для нього існують три можливі значення:

• butt (за замовчуванням)
• round
• sqare

Стиль з’єднання ліній

Стиль з’єднання ліній зберігається у властивості lineJoin і може приймати три можливі значення:

• miter (за замовчуванням)
• round
• bevel

Ми можемо обмежити довжину величезного хвоста miter за допомогою властивості miteLimit, яка за замовчуванням набуває значення 10.

Малюємо корону

<script>
var canvas = document.getEleme ntById(“crown”);
var context = canvas.getcanvas(‘2d’);
canvas.height = 200;
canvas.width = 200;
context.beginPath();
context.arc(80, 100, 56, 3/4 * Math.PI, 1/4 * Math.PI, true);
//Заливаємо дугу
context.fill();
context.moveTo(40, 140);
context.lineTo(20, 40);
context.lineTo(60, 100);
context.lineTo(80, 20);
context.lineTo(100, 100);
context.lineTo(140, 40);
context.lineTo(120, 140);
// Обводимо контур корони
context.stroke();

</script>

Кола

Кола малюються за допомогою команди arc(ox, oy, radius, startAngle, endAngle, antiClockWise), де ox і oy – координати центру, radius – радіус кола, startAngle й endAngle – початковий і кінцевий кути (у радіанах) для вимальовування кола, а antiClockWise — напрямок руху при малюванні (true для проти годинникової стрілки, false — проти). За допомогою arc() можна малювати як кола та кола, так і дуги та частини кола.

Окружність з радіусом у 100 пікселів:

context.beginPath();
context.arc(250, 250, 100, 0, Math.PI * 2, false);
context.closePath();
context.fill(); // Заливання кола

Намалюємо різноколірне коло:

Код намалює коло, що складається з 6 сегментів із довільними кольорами, які змінюватимуться при оновленні сторінки

<script>
canvas = document.getElementById(“color_circle”);
context = canvas.getContext(“2d”);

for(var i = 0; i < 6; i++) {
context.fillStyle = ‘rgb(‘ + Math.round(Math.random()*255) + ‘,’ + Math.round(Math.random() * 255) + ‘,’ + Math.round(Math.random ()*255) +’)’
context.beginPath();
context.arc(100, 100, 70, Math.PI/3 * i, Math.PI/3 * (i + 1), false)
context.lineTo(100, 100);
context.fill();
}

Намалюємо часточки апельсина чи кавуна, і навіть інші варіанти з допомогою своєї процедури.

Часточки
<script>
var canvas = document.getElementById(“arc_demo”);
var context = canvas.getContext(‘2d’);
canvas.height = 200;
canvas.width = 500;

function drawArc(xPos, yPos, radius, startAngle, endAngle, anticlockwise, lineColor, fillColor)
{
var startAngle = startAngle* (Math.PI/180);
var endAngle = endAngle * (Math.PI/180);
var radius = radius;
context.strokeStyle=lineColor;
context.fillStyle = fillColor;
context.lineWidth = 8;
context.beginPath();
context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
context.fill();
context.stroke();
}

drawArc(50, 15, 40, 0, 180, false, “aqua”, “yellow”);
drawArc(150, 15, 50, 350, 170, false, “green”, “pink”);
drawArc(270, 70, 60, 0, 100, true, “red”, “white”);
drawArc(400, 60, 50, 350, 20, true, “blue”, “purple”);

Тепер намалюємо кола з цих фігур.

Часточки
<script>
var canvas = document.getElementById(“circles_demo”);
var context = canvas.getContext(‘2d’);
canvas.height = 200;
canvas.width = 500;

function drawCircle(xPos, yPos, radius, lineColor, fillColor)
{
var startAngle = 0* (Math.PI/180);
var endAngle = 360* (Math.PI/180);
var radius = radius;
context.strokeStyle=lineColor;
context.fillStyle = fillColor;
context.lineWidth = 8;
context.beginPath();
context.arc(xPos, yPos, radius, startAngle, endAngle, false);
context.fill();
context.stroke();
}

drawCircle(50, 45, 40, “aqua”, “yellow”);
drawCircle(150, 55, 50, “green”, “pink”);
drawCircle(270, 70, 60, “red”, “white”);
drawCircle(400, 65, 50, “blue”, “purple”);

Часткове заливання кола

Намалюємо частково залите коло.

<script>
var canvas = document.getElementById(“part_circle”);
var context = canvas.getContext(‘2d’);
canvas.height = 400;
canvas.width = 400;
context.beginPath();
context.arc(200, 200, 100, 0, Math.PI * 0.85, false)
context.stroke();

context.beginPath();
context.arc(200, 200, 100, 0, Math.PI * 0.85, true);
context.fill();

Багато кіл

Намалюємо кола у випадковому порядку.

<script>
var canvas = document.getElementById(“random_circle”);
var context = canvas.getContext(‘2d’);
canvas.height = 400;
canvas.width = 400;

var numCircles = 500;
var maxRadius = 20;
var minRadius = 3;
var colors =
[“aqua”, “black”, “blue”, “fuchsia”, “green”, “cyan”, “lime”, “maroon”,
“navy”, “olive”, “purple”, “red”, “silver”, “teal”, “yellow”, “azure”,
“gold”, “bisque”, “pink”, “orange”];
var numColors = colors.length;

// у циклі створюємо кола
for(var n = 0; n <numCircles; n++)
{
// У випадковому порядку встановимо характеристики
var xPos = Math.random() * canvas.width;
var yPos = Math.random() * canvas.height;
var radius = minRadius + (Math.random() * (maxRadius-minRadius));
var colorIndex = Ma

th.random() * (numColors – 1);
colorIndex = Math.round(colorIndex);
var color = colors[colorIndex];
drawCircle(context, xPos, yPos, radius, color);
}

// функція малювання кола
function drawCircle(context, xPos, yPos, radius, color)
{
var startAngle=(Math.PI/180)*0;
var endAngle=(Math.PI/180)*360;
context.shadowColor = “gray”;
context.shadowOffsetX = 1;
context.shadowOffsetY = 1;
context.shadowBlur = 5;
context.beginPath();
context.arc(xPos, yPos, radius, startAngle, endAngle, false);
context.fillStyle=color;
context.fill();
}
</script>

Годинник

Закруглені кути

Закруглені кути малюються за допомогою функції arcto (), який містить п’ять параметрів.

• xBeginning – координата X початку дуги
• yBeginning – координата Y початку дуги
• xEnd – координата X кінця дуги
• yEnd – координата Y кінця дуги
• Radius – радіус дуги

<canvas id='arcto'>Закруглені кути</canvas>

<script>
var canvas = document.getElementById(“arcto”);
var context = canvas.getContext(‘2d’);
canvas.height = 150;
canvas.width = 400;

var xPos = 25;
var yPos = 25;
var width = 150;
var height = 75;
var radius = 30;

context.strokeStyle=”blue”;
context.lineWidth = 20;
context.lineCap=”square”;
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 5;
context.shadowColor = “gray”;
context.beginPath();
context.moveTo(xPos, yPos);
context.lineTo(xPos + width – radius, yPos);
context.arcTo(xPos + width, yPos, xPos + width, yPos + radius, radius);
context.lineTo(xPos + width, yPos + height);
context.stroke();

</script>

Криві Безьє

Є дві функції, для побудови кубічної та квадратичної кривої Безьє:

quadraticCurveTo(Px, Py, x, y)
bezierCurveTo(P1x, P1y, P2x, P2y, x, y)

x і y – це точки в які необхідно перейти, а координати P(Px, Py) у квадратичній кривій це додаткові точки, що використовуються для побудови кривої. У кубічній кривій відповідно дві додаткові точки.

Малюємо криві Безьє

<canvas id='bezier_demo'>криві Безьє</canvas>
<script>
var canvas = document.getElementById(“bezier_demo”);
var context = canvas.getContext(‘2d’);
canvas.height = 200;
canvas.width = 260;
context.beginPath();
context.moveTo(10, 15);
context.bezierCurveTo(75, 55, 175, 20, 250, 15);
context.moveTo(10, 15);
context.quadraticCurveTo(100, 100, 250, 15);
context.stroke();
</script>

Розмальовуємо криві Безьє

<canvas id='color_bezier'>Розмальовуємо криві Безьє</canvas>
<script>
var canvas = document.getElementById(“color_bezier”);
var context = canvas.getContext(‘2d’);
canvas.height = 100;
canvas.width = 260;
context.strokeStyle = ‘#f00’;
context.beginPath();
context.moveTo(10, 15);
context.bezierCurveTo(75, 55, 175, 20, 250, 15);
context.stroke();
context.strokeStyle = ‘#0f0’;
context.beginPath();
context.moveTo(10, 15);
context.quadraticCurveTo(100, 100, 250, 15);
context.stroke();
</script>

Це точка на фігурі?

Функція isPointInPath(float x, float y) поверне значення true, якщо точка з переданими координатами знаходиться всередині шляху. Створимо шлях у вигляді прямокутника і перевіримо:

Даний скрипт повинен вивести в консоль налагодження спочатку true, а потім false.

<p><canvas id='example8'>Пример 8</canvas></p>


<script type="text/javascript">

var example = document.getElementById("example8");


var ctx = example.getContext('2d');


example.height = 400;
example.width = 400;


ctx.beginPath();


ctx.rect(200, 200, 100, 200);


ctx.stroke();
console.log(ctx.isPointInPath(250, 250));

console.log(ctx.isPointInPath(100, 100));

</script>

Функція clip() – обмежуємо область малювання

Функція clip() нічого не малює. Після її виклику будь-який об’єкт малюватиметься лише у тому випадку, коли він знаходиться в області, на якій визначено шлях. Намалюємо коло та обмежимо область малювання цим колом. Потім намалюємо дві лінії, які будуть видні лише всередині кола:

Якщо закоментувати виклик функції clip(), то побачимо, як насправді малюються лінії.

<script>
var canvas = document.getElementById(“clip_demo”);
var context = canvas.getContext(‘2d’);
canvas.height = 400;
canvas.width = 600;
context.beginPath();
context.arc(200, 200, 150, 0, Math.PI * 2, true);
context.stroke(); //Намалюємо коло яким визначимо область шляху
context.clip(); // Обмежимо область для малювання областю шляху

context.beginPath();
context.moveTo(100, 320);
context.lineTo(500, 120);
context.lineTo(50, 250);
context.stroke() //Намалюємо лінії, які будуть видні лише всередині кола

</script>

Тіні

Тіні canvas відкидаються завжди, просто вони відкидаються з нульовим зміщенням та нульовим розмиттям. Є чотири властивості що керують тінями (через знак і вказані стандартні значення):

• shadowOffsetX = 0.0
• shadowOffsetY = 0.0
• shadowBlur = 0.0
• shadowColor = “transparent black”

Візьмемо попередній приклад і подивимося на тіні
<canvas id='clip_shadow'>Shadow</canvas>

<script>
var canvas = document.getElementById(“clip_shadow”);
var context = canvas.getContext(‘2d’);
canvas.height = 400;
canvas.width = 600;
context.beginPath();
context.arc(200, 200, 150, 0, Math.PI * 2, true);
context.stroke(); //Намалюємо коло яким визначимо область шляху
context.clip(); // Обмежимо область для малювання областю шляху

context.shadowOffsetX = -10;
context.shadowOffsetY = -10;
context.shadowBlur = 2;
context.shadowColor = ‘black’;

context.beginPath();
context.moveTo(100, 320);
context.lineTo(500, 120);
context.lineTo(50, 250);
context.stroke() //Намалюємо лінії, які будуть видні лише всередині кола
</script>

Приклад із прямокутниками.

<canvas id='rect_shadow'>Shadow</canvas>

<script>
var canvas = document.getElementById(“rect_shadow”);
var context = canvas.getContext(‘2d’);
canvas.height = 100;
canvas.width = 600;

var x1Pos = 25;
var x2Pos = 200;
var yPos = 10;
var length = 150; var height = 50;

// перший прямокутник з тінню
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 3;
context.fillStyle=”deeppink”;
context.shadowColor = “gray”;
context.fillRect (x1Pos, yPos, length, height);

// другий прямокутник з тінню
context.shadowOffsetX = 12;
context.shadowOffsetY = 12;
context.shadowBlur = 4;
context.strokeStyle = “aqua”;
context.shadowColor = “lightgreen”;
context.lineWidth = 8;
context.strokeRect (x2Pos, yPos, length, height);
<script>

Градієнти

Лінійні градієнти канвас

Спочатку створюється об’єкт градієнта за допомогою функції createLinearGradient (float x1, float y1, float x2, float y2) з точки (x1; y1) в точку (x2; y2). Потім додаються кольори за допомогою функції add ColorStop (float offset, string color), де offset – відступ зі значеннями від 0 до 1, а color – потрібний колір. Далі створений градієнт застосовується як стиль заливки як «fillStyle».

<canvas id="lineargradient" width="160" height="160"></canvas>

<script>
var canvas = document.getElementById(“lineargradient”);
var context = canvas.getContext(“2d”);
var gradient = context.createLinearGradient(0, 0, 150, 150);
gradient.addColorStop(0.0, ‘blue’);
gradient.addColorStop(0.5, ‘red’);
gradient.addColorStop(1.0, ‘green’);
context.fillStyle = gradient;

// малюємо залитий прямокутник
context.fillRect(0, 0, 150, 150);
</canvas>

Радіальні градієнти

Радіальний градієнт створюється за допомогою функції createRadialGradient(float x1, float y1, float r1, float x2, float y2, float r2) – плавний перехід кольору з кола з центром в точці (x1; y1) і радіусом r1 в коло з центр x2, y2) та радіусом r2.

Намалюємо кулю із псевдоосвітленням

<canvas id="radialgradient" width="500" height="170"></canvas>
<script>
var canvas = document.getElementById(“radialgradient”);
var context = canvas.getContext(“2d”);

context.shadowOffsetX = 10;
context.shadowOffsetY = 15;
context.shadowBlur = 10;
context.shadowColor = ‘#0F0’;

var gradient = context.createRadialGradient(60, 60, 15, 75, 75, 75);
gradient.addColorStop(0.0, ‘#0F0’);
gradient.addColorStop(1.0, ‘#0DA805’);

context.fillStyle = gradient;

context.beginPath();
context.arc(75, 75, 75, 0, Math.PI * 2, false);
context.fill();
</script>

Прозорість

Прозорість задається через атрибут globalAlpha. Значення знаходяться в діапазоні від 0 до 1, де 0 – повна
прозорість, 1 – суцільний колір.

<canvas id="transparent_demo" width="500" height="100"></canvas>
<script>
var canvas = document.getElementById(“transparent_demo”);
var context = canvas.getContext(“2d”);

// перший об’єкт
var xPos = 20;
var yPos = 20;
var gap = -20;
var width = 80; var height = 80;

// тінь
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 3;
context.shadowColor = “gray”;

// прозорість
context.globalAlpha=1;
context.fillStyle = “orange”;
context.fillRect (xPos + (0 * width) + (0 * gap), yPos, width, height);
context.globalAlpha=.5;
context.fillStyle=”blue”;
context.fillRect (xPos + (1 * width) + (1 * gap), yPos, width, height);
context.globalAlpha = .25;
context.fillStyle=”red”;
context.fillRect (xPos + (2 * width) + (2 * gap), yPos, width, height);
context.globalAlpha = .25;
context.fillStyle = “limegreen”;
context.fillRect (xPos + (3 * width) + (3 * gap), yPos, width, height);
context.globalAlpha=.4;
context.fillStyle=”magenta”;
context.fillRect (xPos + (4 * width) + (4 * gap), yPos, width, height);
context.globalAlpha = .25;
context.fillStyle=”gold”;
context.fillRect (xPos + (5 * width) + (5 * gap), yPos, width, height);
context.globalAlpha=.4;
context.fillStyle = “turquoise”;
context.fillRect (xPos + (6 * width) + (6 * gap), yPos, width, height);

Також прозорість можна встановити в атрибутах кольору:

context.fillStyle = “rgb(0, 0, 255, .5)”;

Використовуємо шаблони

Крім кольорів і градієнтів fillStyle і strokeStyle як значення можуть приймати та звані шаблони. Шаблони можна створити з того ж самого canvas елемента, зображення або відео. Наприклад, будемо використовувати зображення. Шаблон створюється методом createPattern(object any, string repeat), де repeat може приймати такі значення: “repeat” (за замовчуванням), “repeat-x”, “repeat-y”, “no-repeat”.

Трикутник Серпінського

< id="pascalCanvas" width="800" height="800">

<script>

function drawPixel(x, y, context) {
context.fillRect(x, y, 1, 1);
}

var canvas = document.getElementById(“pascalCanvas”);
var context = canvas.getContext(“2d”);

// gradient style
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, “#00f”);
gradient.addColorStop(1, “#f30”);
context.fillStyle = gradient;
//context.fillStyle = “#000”;

//Pascal’s triangle
var tr = новий Array (canvas.height);
for (i = 0; i < canvas.height; i++) {
tr[i] = New Array(canvas.width);
for (k = 0; k < canvas.width; k++) {
if (k == 0)
tr[i][k] = 1;
else
tr[i][k] = 0;
}
}

for (i = 1; i < canvas.height; i++) {
for (k = 1; k < canvas.width; k++) {
tr[i][k] = (tr[i-1][k-1] + tr[i-1][k]) % 2;
}
}

//Draw
for (i = 0; i < canvas.height; i++) {
for (k = 0; k < canvas.width; k++) {
if (tr[i][k] != 0)
drawPixel(k, i, context);
}
}

</script>

Малювання зображень

Щоб намалювати зображення, потрібно створити його об’єкт за допомогою конструктора Image, потім встановити шлях до зображення через властивість src отриманого об’єкта.

Перш ніж малювати зображення, його варто завантажити. Для цього додамо обробник події load для об’єкта img, додамо його після створення об’єкта.

Далі можна намалювати зображення вихідного розміру за допомогою функції drawImage(object img, float x, float y), де вказується його верхній лівий кут у точці (x; y).

Для масштабування використовується інша версія функції – drawImage (object img, float x, float y, float w, float h) – в останніх двох параметрах вказується ширина і висота.

Також можна обрізати картинку ще через одну версію функції drawImage(object img, float sx, float sy, float sw, float sh, float cx, float cy, float cw, float ch) – намалює частину зображення шириною sw і висотою sh розташовану в точці (sx, sy) у вихідному зображенні на canvas з шириною cw і висотою ch у точці (cx, cy).

var img = New Image()
img.onload = function(){
//Тут ваш код для роботи з контекстом
}
img.src = ‘path.png’

Виведемо зображення з різними розмірами

<canvas id="images_demo" width="500" height="150" style = "border:2px solid black"></canvas><script>
var canvas = document.getElementById(“images_demo”);
var context = canvas.getContext(“2d”);

var smallImageXPos = 40;
var smallImageYPos = 55;
var smallImageWidth = 75;
var smallImageHeight = 75;
var largeImageXPos = 225;
var largeImageYPos = 10;
var sourceCropX = 25;
var sourceCropY = 25;
var sourceCropWidthX = 50;
var sourceCropWidthY = 50;
var imageWidth = 80;
var imageHeight = 80;

var smallImage = новий Image();
var largeImage = новий Image();

smallImage.onload = function()
{
context.drawImage(smallImage, smallImageXPos, smallImageYPos);
context.drawImage(smallImage, smallImageXPos + 80, smallImageYPos – 25,
smallImageWidth, smallImageHeight);
}

largeImage.onload = function()
{
context.drawImage(largeImage, largeImageXPos, largeImageYPos);
context.drawImage (largeImage, sourceCropX, sourceCropY,
sourceCropWidthX, sourceCropWidthY,
largeImageXPos + 140, largeImageYPos + 10,
imageWidth, imageHeight);
}

smallImage.src = “../images/star.jpg”;
largeImage.src = “../images/star.jpg”;

context.shadowOffsetX = -3;
context.shadowOffsetY = 3;
context.shadowBlur = 8;
context.shadowColor = “gray”;
</script>

Не можна викликати метод drawImage(), якщо картинка не завантажена в браузер. У прикладі я заздалегідь вивів картинку за допомогою тега img. Зазвичай, у подібних випадках використовують виклик window.onload() або document.getElementById(“imageID”).onload.

Ваш браузер не підтримує канвас

<script>
window.onload = function() {
var canvas = document.getElementById(‘otherImage’);
var context = canvas.getContext(‘2d’);
var image = New Image();

image.onload = function() {
context.drawImage(image, 30, 30);
};

image.src = ‘http://developer.alexanderklimov.ru/android/images/android_cat.jpg’;
}

Для збереження зображень існує три методи (getAsFile, getBlob, toDataURL), найзручніший – toDataURL оскільки саме він найбільш добре підтримується браузерами. Варто зауважити, що метод застосовується не до контексту, а до канвас елемента, проте його можна отримати як властивість канвас контексту, також цей метод сприймає як аргумент тип зображення (за замовчуванням ‘png’). Цей метод поверне зображення у форматі base64.

Малювання тексту

Існують функції малювання тексту. Залитий текст малюється через функцію context.fillText(string text, float x, float y) в точці (x;y)

Функція fillText() має необов’язковий аргумент maxWidth, який не зовсім коректно працює в деяких браузерах.

Властивість контексту font управляє стилем тексту і має синтаксис схожий з css:

// формат
// context.font = “style weight size face”;

Не всі атрибути властивості font обов’язково вказувати. Якщо якийсь атрибут пропущено, буде використовуватись значення за умовчанням.

Для стилів використовуються наступні значення

normal(the default)
italic
oblique(подібний до італійського, зазвичай поєднаний з sans-serif faces)
inherit (style comes from the parent element)

Для ваги використовуються значення:

normal(the default)
Болд | bolder
lighter
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
inherit(weight comes from the parent element)

Для розмірів:

px – pixels
pt – points
em

Вибір шрифту залежить від підтримки браузерами, тому краще використовувати стандартні.

Sans-serif: Arial, Verdana
Serif: Georgia, Times New Roman, Times
Monospace: Courier New, Courier

context.font = “bold italic 30px sans-serif”;
context.fillText(“Hello Kitty”, 300, 300);

Керувати кольором ми можемо через властивості fillStyle і strokeStyle.

Для малювання контурів тексту застосовується функції strokeText() замість fillText().

Для вирівнювання тексту існує властивість textAlign, воно може приймати п’ять можливих значень:

left – текст вирівнюється зліва
right – текст вирівнюється праворуч
center – текст вирівнюється по центру
start — (значення за замовчуванням) текст вирівнюється з початку лінії ліворуч для письма ліворуч і вирівнюється праворуч ліворуч праворуч наліво
end — текст вирівнюється з початку лінії праворуч для листа зліва направо і вирівнюється зліва для листа справа наліво

 

<script>
var canvas = document.getElementById(“textalign_demo”);
var context = canvas.getContext(“2d”);
var xPos = canvas.width/2;
var yPos = 30;

context.font = “15pt Arial”;
context.fillStyle=”blue”;
context.strokeStyle = “hotpink”;
context.lineWidth = 1;
context.beginPath();
context.moveTo(xPos, 0);
context.lineTo(xPos, canvas.height);
context.stroke();
context.textAlign=”right”;
context.fillText(“right”, xPos, yPos * 1);
context.textAlign=”end”;
context.fillText(“end”, xPos, yPos * 2);
context.textAlign = “center”;
context.fillText(“center”, xPos, yPos * 3);
context.textAlign=”left”;
context.fillText(“left”, xPos, yPos * 4);
context.textAlign=”start”;
context.fillText(“start”, xPos, yPos * 5);

Для керування лінією основи тексту існує властивість textBaseline, вона може приймати наступні значення:

top
hanging
middle
alphabetic
ideographic
bottom

Виміряти ширину тексту можна через measureText(string text). Вона поверне спеціальний об’єкт TextMetrics, який має властивість width — ширина тексту в пікселях.

<script>
var canvas = document.getElementById(“drawtext_demo”);
var context = canvas.getContext(“2d”);

// центруємо текст
var mText = “Hello Kitty!”;
var xPos = canvas.width/2;
var yPos = canvas.height/2;

context.font = “60pt Comic Sans MS”;
context.fillStyle = “lime”;
context.textAlign = “center”;
context.textBaseline=”middle”;
context.fillText(mText, xPos, yPos);

Комбінування накладень

Накладання двох фігур можна здійснити за допомогою властивості globalCompositeOperation, яке може приймати одне зі значень.

• source-over
• source-in
• source-out
• source-atop
• destination-over
• destination-in
• destination-out
• destination-atop
• lighter
• copy
• xor

Виведемо всі методи в таблиці.

source-over	source-in	source-out	source-atop
destination-over	destination-in	destination-out	destination-atop
lighter	copy	xor

А детальніше дізнатися про програмування та створити власний проєкт ви можете на курсах IT школи GoMother. Ми знаходимося на м. Академмістечко, м. Житомирська.