slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 982
Теги: html5, canvas, lineTo, moveTo, рисуем

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

Для начала создадим холст и получим его контекст, как в предыдущей статье.

Для того, чтобы рисовать линии в HTML5 есть два метода - moveTo(x,y) и lineTo(x,y). Принцип следующий, первый метод moveTo(x,y), как бы берет карандаш в руки и устанавливает его по заданным координатам на холсте, как бы оставляя точку. Если следующим использовать метод lineTo(x,y), то от места где установлен карандаш нарисуется линии к месту, указанному в качестве координат метода lineTo(x,y).

Таким образом можно перемещать карандаш по всему холсту, либо не рисуя линии, либо рисовать непрерывно, как будто вы не убираете руку от листа. Так же важно указывать координаты в допустимых пределах холста.

Ещё один момент – координаты начинаются не с привычного левого нижнего угла или центра холста, а с верхнего левого угла, при этом увеличение координат по оси y идет вниз.

canvas04

Важным моментом является то, что необходимо так же использовать два дополнительных метода, иначе у вас ничего не получиться - перед рисованием нужно применить метод beginPath(), и в конце метод, который укажет каким образом отрисовать полученный контур, может быть два варианта: stroke() - просто линии, fill() линии с заливкой внутри.

Для примера, нарисуем пустой треугольник и залитый квадрат. Ниже приведет полный код всех файлов - HTML-разметки, CSS-файла и JS-файла.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta name="viewport" content="width=device-width" />    
    <link rel="stylesheet" href="/css/template.css" type="text/css" />
    <script type="text/javascript" src="/js/script.js"></script>
    <title>Страница</title>
</head>
<body onLoad="Draw()">
	<canvas id="id_canvas" height="200" width="300"></canvas>
</body>
</html>
/* Общие стили */
body {
	margin:0;
	text-align:center;
}
/* Общие стили закончилась */

canvas {
	margin:30px auto;
	box-shadow:0 0 6px rgba(0,0,0,0.2);
}
function Draw() {
	var canvas = document.getElementById("id_canvas");
	var context = canvas.getContext("2d");	// Получаем так называемый контекст холста, к которому уже можем применять функции отрисовки.
	
	/* рисуем треугольник */
	context.beginPath();
	context.moveTo(10,10);
	context.lineTo(40,40);
	context.lineTo(10,70);
	context.lineTo(10,10);
	context.stroke();
	
	/* рисуем закрашенный квадрат */
	context.beginPath();
	context.moveTo(60,10);
	context.lineTo(150,10);
	context.lineTo(150,100);
	context.lineTo(60,100);
	context.lineTo(60,10);
	context.fill();
}

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

demo

Ничего сложного, правда? Есть ещё очень много различных методов, рисующих дуги и прочие прелести, которые мы рассмотрим в других статьях и научим Вас использовать их.

Как всегда, можете задавать свои вопросы в комментариях, ответим так быстро, как увидим.

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

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

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

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

IHC

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

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

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

Содержание «Курса по HTML»

Это страница с содержанием курса по HTML, который поможет любому новичку изучить и понять основы этого языка программирования.

Теги:

html, html5, курсы, обучение

Комментариев: 0 Подробнее
Доктайп в html. Тег DOCTYPE. Просмотров 790
Доктайп в html. Тег DOCTYPE.

Каждая html-страница в идеале должна начинатся с определения доктайпа документа (doctype — document type declaration или dtd). Очень часто встречаются сайты без определения этого самого доктайпа. И это очень плохо, так как он имеет важную роль.

Теги:

html, html5, doctype

Комментариев: 0 Подробнее
Всплывающая подсказка с собственным дизайном и стилем.

В этой статье мы рассмотрим валидный способ создания всплывающей подсказки для HTML5-спецификации с уникальным дизайном, который можно задать через CSS-стили.

Теги:

html5, tooltip, title, jQuery, data

Комментариев: 0 Подробнее
Тег canvas - как начать рисовать?

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

Теги:

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

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

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

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

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.