Курси JavaScript

Canvas введення ctx.moveTo / ctx.lineTo ()

Прокрутити вниз

Canvas

Курси JavaScript це другий ступінь навчання після вивчення HTML і CSS. Давайте спочатку згадаємо що таке JavaScript. Це мова, яка необхідна вам для виконання складних операцій на вебсторінці. У випадках, коли на вебсторінці відбувається щось більше, ніж просто її статичне відображення – відображення контенту, що періодично оновлюється, або інтерактивних карт, або анімація 2D/3D графіки, або прокрутка відео в програвачі, і т.д. – можете бути впевнені, що, швидше за все, не обійшлося без JavaScript. Це третій шар листкового пирога стандартних web технологій, два з яких HTML і CSS.

  • HTML – це мова розмітки, яку ми використовуємо для візуального та смислового структурування нашого web контенту, наприклад, визначаємо параграфи, заголовки, таблиці даних, або вставляємо зображення та відео на сторінку.
  • CSS – це мова стилів за допомогою якої ми надаємо стиль відображення нашого HTML контенту, наприклад надаємо колір фону (background) і шрифту, надаємо контенту багатоколонний вигляд.
  • JavaScript – мова програмування, яка дозволяє вам створити динамічно оновлюваний контент, управляє мультимедіа, анімує зображення.

Курси JavaScript допоможуть зрозуміти основні поняття та принципи програмування та алгоритми.

І сьогодні ми поговоримо про елемент <canvas> і для чого він використовується.

Елемент <canvas>, доданий до HTML5, призначений для створення графіки за допомогою JavaScript. Наприклад, його використовують для малювання графіків, створення фото композицій, анімації та навіть обробки та рендерингу відео в реальному часі.

«Canvas» у перекладі з англійської означає «полотно».

Програми від Mozilla підтримують <canvas> починаючи з Gecko 1.8 (тобто з Firefox 1.5). Цей елемент спочатку був представлений Apple для OS X Dashboard і Safari. Internet Explorer підтримує <canvas> починаючи з 9 версії; для більш ранніх версій IE підтримку для <canvas> можна додати за допомогою скрипта з проєкту Google’s Explorer Canvas. Google Chrome та Opera 9 також підтримують <canvas>.

Елемент <canvas> також використовується технологією WebGL для відтворення апаратно-прискореної 3D-графіки на вебсторінках.

Приклад

Це простий приклад використання CanvasRenderingContext2D.fillRect() методу.

HTML

<canvas id=”canvas”></canvas>

JavaScript

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

ctx.fillStyle = “green”;
ctx.fillRect(10, 10, 100, 100);

Відредагуйте код нижче, щоб побачити результат на полотні.

Ми нагадали вам про елемент <canvas>. А перевірити свої знання ви можете, пройшовши тест вгорі сторінки. Сертифікат про проходження можна обміняти на подарунки в адміністратора школи Gomother. Докладніше про курси програмування для дітей ви можете зв’язавшись з нами: 0965119907. Ми допоможемо визначитися з напрямком залежно від захоплень дитини.