Тег canvas - рисуем прямоугольники (rectangles)

5 / 5

Автор: Администратор

29.10.2016

Теги: canvas, clearRect, strokeRect, fillRect

В этой статье мы познакомимся с внутренними функциями, позволяющими рисовать прямоугольники в canvas.

В отличии от SVG, canvas поддерживает только примитивные фигуры, например, прямоугольники. Все остальные фигуры могут быть созданы при помощи различных комбинаций прямоугольников и линий. Для рисования прямоугольников используются три функции, о которых и пойдет речь дальше.

Для всех примеров используется следующая HTML-структура файла:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />
<script src="/js/script.js" type="text/javascript"></script>
<title>Страница</title>
</head>
<body onLoad="Draw()">
	<CANVAS id="id_canvas" height="200" width="300"></CANVAS>
</body>
</html>

Canvas - fillRect(x, y, width, height)

Рисует закрашенный прямоугольник. x и y тут координаты верхнего левого угла, а width и height - ширина и высота прямоугольника. Рассмотрим простой пример:

function Draw() {
	var canvas = document.getElementById("id_canvas");
	var context = canvas.getContext("2d");	// Получаем так называемый контекст холста, к которому уже можем применять функции отрисовки.
	
	context.fillStyle="#0000FF"; // произвольный цвет
	context.fillRect(50, 25, 150, 100); // рисуем прямоугольник
}

Результат на демо-странице:

Canvas - strokeRect(x, y, width, height)

Рисует пустой прямоугольник (только его границы). x и y тут координаты верхнего левого угла, а width и height - ширина и высота прямоугольника. Рассмотрим простой пример:

function Draw() {
	var canvas = document.getElementById("id_canvas");
	var context = canvas.getContext("2d");	// Получаем так называемый контекст холста, к которому уже можем применять функции отрисовки.
	context.strokeRect(50, 25, 150, 100); // рисуем прямоугольник
}

Результат на демо-странице:

Canvas - clearRect(x, y, width, height)

Очищает выделенную прямоугольную область до цвета фона. x и y тут координаты верхнего левого угла, а width и height - ширина и высота прямоугольника. Рассмотрим простой пример:

function Draw() {
	var canvas = document.getElementById("id_canvas");
	var context = canvas.getContext("2d");	// Получаем так называемый контекст холста, к которому уже можем применять функции отрисовки.
	context.fillRect(50, 25, 150, 100); // рисуем прямоугольник
	context.clearRect(80, 50, 70, 40); // очищаем прямоугольник
}

В этом примере мы сначала рисуем залитый прямоугольник, чтобы увидеть эффект от функции clearRect.

Результат на демо-странице:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
26.80
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Тег canvas - как начать рисовать? Просмотров 1785

В этой статье мы изучим базовые возможности тега <canvas>, чтобы у вас сложилось впечатление, что это вообще такое и как это можно использовать.

Теги:

javascript, html5, canvas, гайд, основы

Комментариев: 0 Подробнее

Тег canvas - рисуем линии moveTo и lineT... Просмотров 2652

Тег canvas - рисуем линии moveTo и lineTo.

После того, как мы разобрались с тем, что за тег canvas и как начать его использовать, то можем пойти дальше и научимся использовать карандаш и нарисуем линии.

Теги:

html5, canvas, lineTo, moveTo, рисуем

Комментариев: 0 Подробнее

Canvas - реализация ластика (Eraser) Просмотров 4646