WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

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


Курсы WEB

Закончив наш курс, вы научитесь самостоятельно строить коммерческие интернет сайты любой сложности, управлять их размещением на WEB - хостинге, оптимизировать их и "продвигать" в Интернете.

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

hit 
counter

Узнать подробнее


Введите текст с картинки

Регистрация на сайте

HTML5 canvas

Элемент HTML <canvas> используется для рисования графики на веб-странице.

Элемент HTML <canvas> - холст для рисования графики «на лету» с помощью сценариев (обычно JavaScript).

Элемент <canvas> - это только контейнер для графики. Для рисования внутри него нужно использовать скрипт. Текст внутри элемента canvas игнорируется, если браузер поддерживает элемент <canvas> HTML5. Если он не поддерживается, то текст будет отображаться браузером .

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

Для элемента <canvas> можно задать размеры, можно задать атрибут style. По-умолчанию его размеры: 300 на 150 пикселей (если они не заданы). 

Создать canvas :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">Your browser does not support HTML5 </canvas>

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

Одна точка рисуемого элемента соответствует отдному пикселю в том случае, если canvas имеет размеры по-умолчанию (300 на 150 пикселей). Если, например, задать для него размеры 600 на 150, то все горизонтальные размеры рисуемого объекта бутут увеличены в 2 раза.

Например, при рисовании на наком холсте прямоугольника размером 100 на 100, его изображение будет иметь размер 200 на 100.

Рисование простых элементов

Холст изначально пуст. Чтобы отобразить что-то, скрипт (JavaScript) сначала должен получить доступ к нему для рисования. Для этого элемент <canvas> имеет метод getContext (). Метод getContext () принимает один параметр, тип контекста. Для 2D-графики, например, указывается «2d», чтобы получить CanvasRenderingContext2D.

Инициализация

Получить доступ к canvas для рисования (контекст)

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

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

Задать цвет заливки для рисуемого объекта

ctx.fillStyle = "#FF0000";

ctx.fillStyle='rgba(0,255,0,0.5)';

Задать цвет заливки для прямоугольника

ctx.fillRect(0,0,150,75);

Задать свойства линии

ctx.strokeStyle = "#0000ff";

ctx.lineWidth = 5;

ctx.strokeRect(10,10, 100,100);

Нарисовать линию

Чтобы нарисовать прямую линию на холсте, используются следующие методы:

moveTo (x, y) - определяет начальную точку линии

lineTo (x, y) - определяет конечную точку линии

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(100,0); ctx.lineTo(200,100); ctx.stroke();  

Нарисовать дугу

При рисовании дуги используются методы:

beginPath() - начинает путь

arc(x,y,r,startangle,endangle) - рисует дугу (координаты центра, радиус, угол начала дуги, угол конца дуги)

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(200,200,50,0,2*Math.PI); ctx.stroke(); 

Прямоугольник

fillRect(x, y, width, height); - нарисовать залитый прямоугольник

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

clearRect(x, y, width, height) - стирает прямоугольник.

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(210,110,150,75); 

Стереть всё, очистить canvas 

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height);


Нарисовать текст

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
ctx.strokeText("Hello World",10,50);

Линейный градиент

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); 

Радиальный градиент

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); 


Рисование кривой

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

  • beginPath() - начало линии
  • closePath() - конец линии
  • moveTo (x, y) - при рисовании кривой используется виртуальное «перо» или «указатель». Этот виртуальный указатель всегда находится в некоторой точке. Перемещение виртуального указателя выполняется с помощью этой функции
  • lineTo() - рисует линию из места расположения виртуального указатнля в нужную точку, lineTo () также перемещает виртуальный указатель на конечную точку линии
  • stroke() , fill() - описанные выше функции только создают линию, реально не прорисовывая её на экране. Реальное рисование созданной линии производят функции stroke() , fill()
  • arcTo(x1,y1,x2,y2,r); - дуга между двумя касательными (в точке 1 и точке 2) с радиусом r

Пример:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); // Начали рисовать кривую
ctx.moveTo(20,20); // Переместили перо в начало линии
ctx.lineTo(100,20); // Отрезок горизонтальной линии
ctx.arcTo(150,20,150,70,50); // Дуга
ctx.lineTo(150,120); // Вертикальная линия
ctx.stroke(); // Нарисовать созданную кривую


Кривые Безье

context.quadraticCurveTo(cpx,cpy,x,y) - Метод quadraticCurveTo () добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют квадратичную кривую Безье. Квадратичная кривая Безье требует двух точек. Первая точка - контрольная точка, которая используется в квадратичном вычислении Безье, а вторая точка - конечная точка кривой. Отправной точкой для кривой является последняя точка в текущем пути. Если путь не существует, используются методы beginPath () и moveTo () для определения начальной точки.

cpx Х-координата контрольной точки Безье  

cpy Y-координата контрольной точки Безье 

x Х-координата конечной точки 

y У-координата конечной точки

Пример:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();


context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) - добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют собой кубическую кривую Безье. Кубическая кривая Безье требует трех точек. Первые две точки - это контрольные точки, которые используются в кубическом вычислении Безье, а последняя точка - конечная точка кривой. Отправной точкой для кривой является последняя точка в текущем пути. Если путь не существует, используются методы beginPath () и moveTo () для определения начальной точки.

cp1x Х-координата первой контрольной точки Безье  

cp1y У-координата первой контрольной точки Безье 

cp2x Х-координата второй контрольной точки Безье 

cp2y Y-координата второй контрольной точки Безье 

x Х-координата конечной точки 

y У-координата конечной точки


Свойства и методы контекста

Цвета, стили и тени

Свойство Описание
fillStyle Устанавливает или возвращает цвет, градиент или картинку, используемые для заполнения рисунка
strokeStyle Устанавливает или возвращает цвет, градиент или шаблон, используемый для линии
shadowColor Устанавливает или возвращает цвет, используемый для теней
shadowBlur Устанавливает или возвращает уровень размытия для теней
shadowOffsetX Устанавливает или возвращает горизонтальное расстояние тени от формы
shadowOffsetY Устанавливает или возвращает вертикальное расстояние тени от формы


Описание
createLinearGradient() Создает линейный градиент 
createPattern() Повторяет указанный элемент в указанном направлении
createRadialGradient() Создает радиальный / круговой градиент 
addColorStop() Определяет цвета и позиции остановки в градиентном объекте

Стили линии


Описание
lineCap Стиль окончания линии
lineJoin Стиль пересечения линий
lineWidth Толшина линии
miterLimit Устанавливает или возвращает максимальную длину

Прямоугольники


Описание
rect() Создаёт прямоугольник
fillRect() Рисует запоненный прямоугольник
strokeRect() Рисует контурный прямоугольник
clearRect() Удаляет прямоугольную область

Линии


Описание
fill() Fills the current drawing (path)
stroke() Actually draws the path you have defined
beginPath() Begins a path, or resets the current path
moveTo() Moves the path to the specified point in the canvas, without creating a line
closePath() Creates a path from the current point back to the starting point
lineTo() Adds a new point and creates a line to that point from the last specified point in the canvas
clip() Clips a region of any shape and size from the original canvas
quadraticCurveTo() Creates a quadratic Bézier curve
bezierCurveTo() Creates a cubic Bézier curve
arc() Creates an arc/curve (used to create circles, or parts of circles)
arcTo() Creates an arc/curve between two tangents
isPointInPath() Returns true if the specified point is in the current path, otherwise false

Преобразования


Описание
scale() Scales the current drawing bigger or smaller
rotate() Rotates the current drawing
translate() Remaps the (0,0) position on the canvas
transform() Replaces the current transformation matrix for the drawing
setTransform() Resets the current transform to the identity matrix. Then runs transform()

Текст


Описание
font Sets or returns the current font properties for text content
textAlign Sets or returns the current alignment for text content
textBaseline Sets or returns the current text baseline used when drawing text


Описание
fillText() Draws "filled" text on the canvas
strokeText() Draws text on the canvas (no fill)
measureText() Returns an object that contains the width of the specified text

Image Drawing


Описание
drawImage() Draws an image, canvas, or video onto the canvas

Pixel Manipulation


Описание
width Returns the width of an ImageData object
height Returns the height of an ImageData object
data Returns an object that contains image data of a specified ImageData object


Описание
createImageData() Creates a new, blank ImageData object
getImageData() Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
putImageData() Puts the image data (from a specified ImageData object) back onto the canvas

Compositing


Описание
globalAlpha Sets or returns the current alpha or transparency value of the drawing
globalCompositeOperation Sets or returns how a new image are drawn onto an existing image

Other


Описание
save() Saves the state of the current context
restore() Returns previously saved path state and attributes
createEvent()
getContext()
toDataURL()



Примеры

http://corehtml5canvas.com/code-live/

http://curran.github.io/HTML5Examples/

https://www.w3resource.com/html5-canvas/

https://www.sanwebe.com/2015/01/html5-canvas-examples

http://cssdeck.com/labs/image-nodes