<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

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

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Тег canvas в HTML 5.

Тег canvas в HTML 5.

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

Canvas - это тег, который появился в html5 и позволяет нам рисовать растровые изображения прямо в браузере. Сам тег просто создаёт холст, а рисовать мы будем при помощи JavaScript.

<body>
  <canvas id="canvas" width="300" height="300">
   Браузер не поддерживает canvas
  </canvas>
</body>

Мы задаём ему какую-нибудь ширину, высоту, а также id, чтобы потом нам было легче искать его в JavaScript. Если браузер не поддерживает данный тег(старые IE), то будет выведена надпись между <canvas></canvas>

Теперь мы можем начать писать скрипт.

var tag = document.getElementById("canvas"),
    ctx = tag.getContext("2d");

Сначала мы отбираем наш canvas, а затем создаём контекст, который нам поможет отрисовывать разные элементы. Рисовать мы будем в 2d, хотя, в будущем планируется поддержка 3d.

Рисуем прямоугольники

Начнём мы с того, что научимся рисовать прямоугольники. Вот свойства и методы, которые нам в этом помогут:

  • strokeRect(x,y,width,height) - рисует очертание прямоугольника
  • fillRect(x,y,width,height) - рисует заполненный прямоугольник
  • clearRect(x,y,width,height) - стирает определённую область
  • fillStyle - цвет

Теперь посмотрим на практике

ctx.strokeRect(10,10,100,100); // рисуем контур прямоугольника с начальными координатами x=10, y=10, шириной и высотой 100px

Вот, что мы получим в результате

контур прямоугольника

Теперь нарисуем закрашенный

ctx.fillStyle = "blue"; // можно задавать всеми способами CSS(rgb,rgba,hsl и т.д.) ctx.fillRect(10,10,100,100);

закрашенный прямоугольник

Теперь давайте удалим маленькую область внутри нашего закрашенного прямоугольника

ctx.fillStyle = "blue";
ctx.fillRect(10,10,100,100);
ctx.clearRect(47,45,30,30); // удаляем область в координатах начиная с координаты x=47, y=45 шириной и высотой 30px

прямоугольник с дыркой

Получили вот такой прямоугольник с дыркой)

Рисуем линии

  • beginPath() - говорим, что начинаем рисовать
  • closePath() - говорим, что закончили рисовать
  • stroke() - обводит фигуру
  • fill() - заливает фигуру цветом
  • moveTo(x,y) - перемещает курсор в указанные координаты
  • lineTo(x,y) - рисует линию с текущей позиции в указанную в качестве параметров
ctx.beginPath(); // начинаем рисовать
ctx.fillStyle = "blue"; // устанавливаем цвет синим
ctx.moveTo(10,10); // ставим курсор в точку (10,10)
ctx.lineTo(100,30); // ведём линию до точки (100,30)
ctx.stroke(); // отрисовываем линию

линия

Вот такую линию мы отрисовали. Теперь давайте нарисуем треугольник

ctx.beginPath();
ctx.fillStyle = "red"; // меняем цвет на красный
ctx.moveTo(10,10);
ctx.lineTo(70,30);
ctx.lineTo(30,50); // идём с предыдущего значения координат(70,30) в новое(30,50)
ctx.fill(); // заполняем пространство между линиями

треугольник

Зачем же нужен canvas?

Например, с помощью canvas'а, мы можем динамично нарисовать график, исходя из каких-то данных

график

Или создавать крутые игры, которые будут выглядеть лучше, а работать быстрее, чем игры на flash. В интернете полно примеров, обязательно посмотрите.

На самом деле эту технологию можно много где применить и, наверняка, вы уже придумали, где могли бы это использовать, но то, что мы рассмотрели сегодня в статье, лишь капля в море. А если вы хотите узнать больше, то приобретайте курс HTML5 и CSS3 с Нуля до Гуру, пройдя который вы сможете смело создать свою игру и даже больше.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

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