slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 956
Теги: javascript, html5, canvas, гайд, основы

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

Данный тег был добавлен в HTML 5 и имел примерно следующее определение "растровый холст, используемый для отображения на странице диаграмм, игровой графики или отрисовки изображений средствами веб-страницы".

По сути представляет собой прямоугольную область, в которой можно производить различные манипуляции по отрисовке различных элементов и фигур, задается при помощи парного тега <canvas></canvas>, может иметь два дополнительных атрибута - width и height, которые будут задавать размер и, что не мало важно, будут задавать размер самого холста в координатах (использование аналогичных свойств в CSS не даст нужного результата).

Для того, чтобы начать рисовать на таком холсте, необходимо задать ему id и получить доступ к этому элементу по id в JavaScript, именно там и будет происходить вся логика отрисовки. После чего, при помощи различных встроенных функций можно будет рисовать различные фигуры, стирать их и производить другие манипуляции, как будто вы работаете в Paint или других графических редакторах.

Давайте рассмотрим простой пример - создадим пустой холст и нарисуем на нем черный прямоугольник, для восприятия сам элемент <canvas> поставим по центру и добавим ему тень:

<!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.fillRect(50, 25, 150, 100);
}

Здесь можно ответить функцию Draw, которая вызывается при помощи атрибута onLoad для <body> и рисует прямоугольник, в строке 2 мы получаем элемент <canvas> по id, в следующей строке мы получаем контекст на этот элемент, именно к нему применяются все функции рисования, а далее функцией рисуем прямоугольник из угла (50;25) в угол (150;100), который стандартно закрашивается черным цветом.

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

demo

Вот и все, что вам нужно знать, чтобы начать использовать Canvas, в следующих статьях мы постараемся раскрыть другие возможные рисуемые элементы и возможности работы с canvas.

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

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

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

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

IHC

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

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

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

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

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

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

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.

Теги:

javascript, img, jQuery

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

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

ZOMRO аватар
Домен — это неотъемлемая часть бизнеса, которая также влияет на поисковую систему. Признаки доменно...
Перейти в тему
ZOMRO аватар
На что ориентироваться при выборе хостинга? Функционал и количество ресурсов. Выбираем те параметр...
Перейти в тему
ZOMRO аватар
Красивое имя для сайта или регистрация доменных имен. Заказав у нас услугу хостинга или VDS/VPS, Вы ...
Перейти в тему

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

Javascript функции

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

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

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

CPA сети 30.01.2017
CPA сети

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