WEB start

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

hit 
counter

Обучение

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

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

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

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


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

Анимация

  • CSS - анимация

    Свойство animation  (для браузеров Chrome, Safari, Opera нужно использовать другое свойство: -webkit-animation)  в CSS можно использовать для анимации многих  свойств CSS, таких как цвет, фон, цвет, высота или ширина. Каждая анимация должна быть определена с помощью директивы @keyframes (для браузеров Chrome, Safari, Opera нужно использовать другую директиву: @-webkit-keyframes ), которая затем вызывается со свойством анимации.

    Набор свойств, которые могут быть анимированы

    background

    background-color

    background-position

    background-size

    border

    border-bottom

    border-bottom-color

    border-bottom-left-radius

    border-bottom-right-radius

    border-bottom-width

    border-color

    border-left

    border-left-color

    border-left-width

    border-right

    border-right-color

    border-right-width

    border-spacing

    border-top

    border-top-color

    border-top-left-radius

    border-top-right-radius

    border-top-width

    bottom

    box-shadow

    clip

    color

    column-count

    column-gap

    column-rule

    column-rule-color

    column-rule-width

    column-width

    columns

    filter

    flex

    flex-basis

    flex-grow

    flex-shrink

    font

    font-size

    font-size-adjust

    font-stretch

    font-weight

    height

    left

    letter-spacing

    line-height

    margin

    margin-bottom

    margin-left

    margin-right

    margin-top

    max-height

    max-width

    min-height

    min-width

    opacity

    order

    outline

    outline-color

    outline-offset

    outline-width

    padding

    padding-bottom

    padding-left

    padding-right

    padding-top

    perspective

    perspective-origin

    right

    text-decoration-color

    text-indent

    text-shadow

    top

    transform

    transform-origin

    vertical-align

    visibility

    width

    word-spacing

    z-index

     

     



    Свойство  CSS - animation позволяет анимировать переходы от одной конфигурации стиля CSS в другую. 

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

    Существуют три ключевых преимущества использования CSS - анимации перед традиционными методами анимации, управляемыми скриптами:

    1. Они просты в использовании для простых анимаций; Вы можете создавать их, даже не зная JavaScript.
    2. Анимация работает хорошо, даже при умеренной загрузке системы. Простые анимации часто могут плохо работать в JavaScript (если только они не особенно качественно сделаны). Механизм рендеринга может использовать пропуски кадров и другие методы, чтобы поддерживать оптимальную производительность.
    3. Предоставление браузеру управления последовательностью анимации позволяет ему оптимизировать производительность и эффективность, например, уменьшая частоту обновления анимаций, запущенных на вкладках, которые в настоящее время не отображаются.

    Настройка анимации

    Чтобы создать CSS - анимацию, необходимо оформить элемент, который нужно анимировать, с помощью свойства анимации. Это позволяет настроить время, продолжительность и другие детали того, как последовательность анимации должна выполняться. Но это не настраивает реальный внешний вид анимации, что выполняется с помощью правила @keyframes.




    Cвойства animation


    animation-delay

    animation-delay: 3s;
    animation-delay: 2s, 4ms;

    Настраивает задержку между загрузкой элемента и началом последовательности анимации.

    animation-direction

    /*  Единственная анимация  */
    animation-direction: normal;
    animation-direction: reverse;
    animation-direction: alternate;
    animation-direction: alternate-reverse;

    /* Множественные анимации */
    animation-direction: normal, reverse;
    animation-direction: alternate, reverse, normal;

    /* Глобальные значения  */
    animation-direction: inherit;
    animation-direction: initial;
    animation-direction: unset;

    Настраивает, должна ли анимация чередовать направление на каждом прогоне последовательности или сбрасываться до начальной точки и повторяться сама.

    animation-duration

    animation-duration: 6s;
    animation-duration: 120ms;
    animation-duration: 1s, 15s;
    animation-duration: 10s, 30s, 230ms;

    Настраивает продолжительность времени, которое анимация должна выполнить для завершения одного цикла.

    animation-iteration-count

    animation-iteration-count: infinite;
    animation-iteration-count: 3;
    animation-iteration-count: 2.3;

    animation-iteration-count: 2, 0, infinite;

    Настраивает количество повторений анимации; Вы можете указать бесконечное повторение анимации на неопределенный срок.

    animation-name

     

    Задаёт имя директивы @keyframes .

    animation-play-state

    /*  Одна анимация  */
    animation-play-state: running;
    animation-play-state: paused;

    /* Множественные анимации */
    animation-play-state: paused, running, running;

    /* Глобальные значения */
    animation-play-state: inherit;
    animation-play-state: initial;
    animation-play-state: unset;

    Позволяет приостановить и возобновить последовательность анимации.

    animation-timing-function

    /* Keyword values */
    animation-timing-function: ease;
    animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    animation-timing-function: ease-in-out;
    animation-timing-function: linear;
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    /* Function values */
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    animation-timing-function: steps(4, end);

    /* Multiple animations */
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

    /* Global values */
    animation-timing-function: inherit;
    animation-timing-function: initial;
    animation-timing-function: unset;

    Настраивает время анимации; То есть как анимация переходит через ключевые кадры, устанавливая кривые ускорения.

    animation-fill-mode

    forwards, backwards, both, none

    animation-fill-mode: none;
    animation-fill-mode: forwards;
    animation-fill-mode: backwards;
    animation-fill-mode: both;

    /* Several values may be given, separated by commas. */
    /* Each applies for each animation in animation-name. */
    animation-fill-mode: none, backwards;
    animation-fill-mode: both, forwards, none;

    Настраивает, какие значения применяются анимацией до и после ее выполнения.


    Пример:

    HTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Animations</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <h1>Animations</h1> <div id="div1">Rotate on hover</div> <div id="div2">Sliding... Hover to stop</div> <hr> <div id="div3">Bounce in </div> </body> </html>


    CSS

    DIV{ display: inline-block; padding: 10px 20px; margin: 20px; border: 1px solid red; } #div1{ animation-duration: 1s; animation-iteration-count: infinite; animation-play-state: paused; animation-timing-function: linear; } #div1:hover{ animation-play-state: running; animation-name: div1; } @keyframes div1{ to{ transform: rotate(1turn); } } #div2{ animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-name: div2; animation-direction: alternate; } #div2:hover{ animation-name: resetAnimation; } @keyframes div2{ from{ position: relative; left: 0px; } to{ position: relative; left: 300px; } } #div3{ animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-name: div3; } @keyframes div3 { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } @keyframes resetAnimation { /* Reset animation : apply empty animation*/ }



    Видео


  • Масштабируемая векторная графика (SVG)

    SVG (Scalable Vector Graphics) - это язык разметки, построенный на основе XML и предназначенный для описания двумерной векторной графики. SVG – это графическое расширение для языка HTML. То, что HTML  делает с текстом, SVG делает с графикой.

    SVG похож на фирменную технологию Adobe Flash, но это - текстовый открытый веб-стандарт вместо закрытого двоичного формата. Он разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.

    Изображение в формате SVG - это текстовый файл. Этот файл создаётся в формате XML. Поэтому изображения в этом формате можно создавать в текстовом редакторе. 

    Часто удобнее создавать такие изображения, использую специальные программы (например - INKSCAPE ) или экспортируя из популярных графических программ (например - Adobe Photoshop).

     

    Графические элементы, созданные в формате SVG, можно вставить в HTML страничку разными способами:

     

     

     

    • используя теги img, embed, iframe, object (для вставки изображения из отдельного файла)
    • в любой HTML тег в качестве фона
    • используя тег svg (описание изображения непосредственно в документе)

     

     

     

    Синтаксис описания SVG

    Теги <svg>, <g>, <defs>

     

    Пример


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>SVG 1</title>
    <style>
    SVG {
    height :300px;
    width :300px;
    border :1px solid black;
    }
    </style>
    </head>
    <body>
    <svg >
    <line x1="0" y1="0" x2="300" y2="300" stroke-width="10" stroke="rgb(255,0,0)"/>
    </svg>
    <svg>
    <polyline points="0,0 100,0 100,100 200,100 200,200 300,200 300,300" fill="rgb(255,0,0)" stroke-width="2" stroke="rgb(0,0,255)"/>
    </svg>
    <svg>
    <rect width="300" height="300" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
    <rect width="200" height="200" fill="rgb(255,0,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
    <rect width="100" height="100" fill="rgb(0,255,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
    </svg>
    <svg>
    <circle cx="150" cy="150" r="150" fill="rgb(255,255,0)" stroke-width="0" />
    <circle cx="150" cy="150" r="100" fill="rgb(0,0,255)" stroke-width="0" />
    </svg>
    <svg>
    <ellipse cx="150" cy="150" rx="150" ry="50" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
    </svg>
    <svg>
    <polygon points="0,100 100,100 100,50 300,150 100,250 100,200 0,200" fill="rgb(255,255,0)" stroke-width="1" stroke="rgb(255,0,0)" />
    </svg>
    </body>
    </html>

     

    Результат 

     

    Базовые формы изображений SVG 

    Линия - прямая <line>

    Тег рисует прямую линию. Использует параметры:

    x1, y1 - координаты начала

    x2, y2 - координаты конца

    stroke-width - толщина линии

    stroke - цвет линии

     

    Линия - ломаная  <polyline>

    Тег рисует ломаную линию. Использует параметры:

    points - массив координат узлов линии

    fill - цвет заливки

    stroke-width - толщина линии

    stroke - цвет линии

     

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

    Тег рисует прямоугольник. Использует параметры:

    x, y - координаты прямоугольника 

    width - ширина

    height - высота

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Круг <circle>

    Тег рисует круг. Использует параметры:

    cx, cy - координаты центра

    r - радиус

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

     

    Эллипс <ellipse>

    Тег рисует элипс. Использует параметры:

    cx, cy - координаты центра

    rx - ширина

    ry - высота

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Многоугольник <polygon>

    Тег рисует многоугольник. Использует параметры:

    points - массив координат углов

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Путь <path>

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

    Атрибут d тегв <path> задаёт набор команд рисования:

    M - переместить курсор в точку (Move)

    L - нарисовать отрезок прямой (Line)

    A - нарисовать дугу (Arc)

    Q - кривая Безье (Quadratic Bezier Curves)

    C - кривая Безье (Cubic Bezier Curves)

    Z - замкнуть путь 

     

    Например:

    <path d="M100,100
    L150,100
    a50,25 0 0,0 150,100
    q50,-50 70,-170
    Z"
    style="stroke: #006666; fill: none;"/>

     

     

     

    Команды, используемые при рисовании линии пути (path)

    Каждая команда обозначается буквой, за которой следует набор цифр (параметры команды). Команды, который обозначаются заглавными буквами, обычно используют абсолютные координаты.Сторочными - как координаты, относительно текущего положения карандаша.

    Команда Параметры Имя Описание
    M x,y moveto Перемещает карандаш в точку с абсолютными координатами x,y без рисования
    m x,y moveto Перемещает карандаш на x точек по горизонтали и на y - по вертикали, без рисования
     
    L x,y lineto Рисует строку из текущего местоположения пера в указанную точку x, y.
    l x,y lineto Рисует прямую от текущего положения до точки x,y относительно текущего положения
     
    H x horizontal lineto Draws a horizontal line to the point defined by 
    (specified x, pens current y).
    h x horizontal lineto Draws a horizontal line to the point defined by 
    (pens current x + specified x, pens current y). The x is relative to the current pens x position.
     
    V y vertical lineto Draws a vertical line to the point defined by 
    (pens current x, specified y).
    v y vertical lineto Draws a vertical line to the point defined by 
    (pens current x, pens current y + specified y). The y is relative to the pens current y-position.
     
    C x1,y1 x2,y2 x,y curveto Draws a cubic Bezier curve from current pen point to x,y. x1,y1 and x2,y2 are start and end control points of the curve, controlling how it bends.
    c x1,y1 x2,y2 x,y curveto Same as C, but interprets coordinates relative to current pen point.
     
    S x2,y2 x,y shorthand / 
    smooth curveto
    Draws a cubic Bezier curve from current pen point to x,y. x2,y2 is the end control point. The start control point is is assumed to be the same as the end control point of the previous curve.
    s x2,y2 x,y shorthand / 
    smooth curveto
    Same as S, but interprets coordinates relative to current pen point.
     
    Q x1,y1 x,y quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. x1,y1 is the control point controlling how the curve bends.
    q x1,y1 x,y quadratic Bezier curveto Same as Q, but interprets coordinates relative to current pen point.
     
    T x,y shorthand / smooth quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. The control point is assumed to be the same as the last control point used.
    t x,y shorthand / smooth quadratic Bezier curveto Same as T, but interprets coordinates relative to current pen point.
     
    A rx,ry 
    x-axis-rotation 
    large-arc-flag,
    sweepflag 
    x,y
    elliptical arc Draws an elliptical arc from the current point to the point x,y. rx and ry are the elliptical radius in x and y direction.
    The x-rotation determines how much the arc is to be rotated around the x-axis. It only seems to have an effect when rx and ry have different values.
    The large-arc-flag doesn't seem to be used (can be either 0 or 1). Neither value (0 or 1) changes the arc. 
    The sweep-flag determines the direction to draw the arc in.
    a rx,ry 
    x-axis-rotation 
    large-arc-flag,
    sweepflag 
    x,y
    elliptical arc Same as A, but interprets coordinates relative to current pen point.
     
    Z   closepath Closes the path by drawing a line from current point to first point.
    z   closepath Closes the path by drawing a line from current point to first point.
     

     

     

    Текст

     

    <text x="20" y="40" style="fill: #000000; stroke: none; font-size: 48px;"> Fill only </text> <text x="20" y="100" style="fill: none; stroke: #000000; font-size: 48px;"> Stroke only </text> <text x="20" y="150" style="fill: #999999; stroke: #000000; font-size: 48px;"> Fill and stroke </text>

     

     

     

    Оператор - switch

    Этот оператор позволяет использовать разные изображения, в зависимости от языка.

     

     

    <switch>
    <g systemLanguage="en-UK">
    <text x="10" y="20">UK English</text>
    </g>
    <g systemLanguage="en">
    <text x="10" y="20">English</text>
    </g>
    <g systemLanguage="es">
    <text x="10" y="20">Spanish</text>
    </g>
    </switch>

     

     SVG система координат

    В SVG отсчёт координат (точка с координатами х=0, y=0) начинается из левого верхнего угла. Ось y - направление сверху вниз. Ось x - направление слева направо.

     

    Единицы измерения

    Единица измерения указывается после значения. Например:  10cm или 125mm.

    Если единицы измерения не указаны, то имеются в виду пиксели - pixels (px).

    Кроме этого допускается использование:

    Единица Описание
    em Высота букв шрифта по умолчанию.
    ex Высота символа - x
    px Пиксели
    pt Пойнты (1 / 72 дюйма - inch)
    pc Picas (1 / 6 дюйма)
    cm Centimeters
    mm Миллиметры
    in Дюймы

    Единицы, установленные в элементе <svg> для  атрибутов width и height, влияют только на элемент <svg> (viewport - область просмотра).

    Формы, находящиеся  внутри элемента <svg> должны иметь свои собственные единицы.

    Если единицы измерения не указаны, то по умолчанию используются пиксели.

     

    Размеры форм, размер области их размещения

    Область, в которую выводятся SVG - формы, определяется тегом <svg>. Эта область - ViewPort определяется параметрами тега <svg> - width, height и параметром viewPort. 

    Если параметра viewBox в теге svg нет, то width и height определяют абсолютные размерый этой области.

    Это - абсолютные размеры области видимости форм. И параметры размеров самих форм, которые выводятся на экран тоже абсолютные (x, y, r, cx, cy,... ).

    Например, если задано в теге svg  height :500 и width :200, то на экране выделится для вывода изображений область шириной 200 и высотой 500 пикселей. Если в ней определено: 

    <rect   width=50 height=70 fill ="#0b0" stroke-width="1" stroke="#050" />

    то внутри области будет нарисован прямоугольник шириной 50 рикселей и высотой - 100.

    Параметр viewBox пропорционально меняет размеры всех элементов. Эта область имеет координаты (x, y ) и размеры (ширину, высоту).  Например: viewBox="0 0 50 20". Если для нашего примера задать такой viewBox, то реальные размеры всех элементов увеличется по горизонтали на коэффициент 500/50, а по вертикали - на коэффициент 200/20. То есть реальные размеры прясоугольника будут - 500 на 700 пикселей, а размер вилимой области - 5000 на 2000 пикселей.

     

     

    Применение стилей к SVG 

    С SVG можно использовать стили как внутри SVG - тегов, так и отдельно описанныа, аналогично HTML стилям.

    Примеры:

     

    <svg> <rect x="203" width="200" height="200" style="fill:red; stroke:black; stroke-width:3;"/> </svg>

     

    <style type="text/css" media="screen"> rect { fill: green; stroke: black; stroke-width: 3; } rect:hover { fill: green; } </style>

     

     

    <link rel="stylesheet" type="text/css" href="/style.css">

     

     

    <?xml-stylesheet type="text/css" href="/style.css"?>

     

     

    Назначение стилей для всех сгруппированных элементов

    <g style="fill:blue; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="200" width="200" height="200"/> <circle cx="120" cy="100" r="100"/> </g>

     

     

    Анимация SVGs при помощи CSS

    <svg> <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff"> <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 60 60" repeatCount="indefinite" /> </rect> </svg>

     

     

     

     

    <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" /> </rect>

     

     

     

    Пример: таймер


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>SVG Javascript test1</title>
    <script>
    var x2, y2, grad, clockFace, secCounter, arrLength// Declare globals
    function drawTimer(){
    // Init counter
    x2=0, y2 = 0, grad = -90, clockFace = 400, secCounter = 0, arrLength = 180

    document.getElementById("myTimer").style.width = clockFace + "px";
    document.getElementById("myTimer").style.height = clockFace + "px";
    document.getElementById("myTimer").style.border = "4px solid red";
    document.getElementById("myTimer").style.backgroundColor = "#FFDDDD";
    document.getElementById("myTimer").style.borderRadius = "30%";
    x1 = clockFace/2;
    y1 = clockFace/2;
    x2 = arrLength;
    y2 = 0;
    rad = grad * (Math.PI / 180);
    x2 = x1 + Math.cos(rad)*arrLength;
    y2 = y1 + Math.sin(rad)*arrLength;
    console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2);
    // Draw Line
    document.getElementById("arrow").setAttribute("x1",x1);
    document.getElementById("arrow").setAttribute("y1",y1);
    document.getElementById("arrow").setAttribute("x2",x2);
    document.getElementById("arrow").setAttribute("y2",y2);
    document.getElementById("arrow").setAttribute("stroke-width",2);
    document.getElementById("arrow").setAttribute("stroke","#FF0000");
    // Draw arrow end point
    document.getElementById("arrowEnd").setAttribute("cx",x2);
    document.getElementById("arrowEnd").setAttribute("cy",y2);
    document.getElementById("arrowEnd").setAttribute("r",4);
    document.getElementById("arrowEnd").setAttribute("fill","#FF0000");

    document.getElementById("arrowEnd").setAttribute("stroke-width",0);

    // Draw arrow start point
    document.getElementById("arrowStart").setAttribute("cx",x1);
    document.getElementById("arrowStart").setAttribute("cy",y1);
    document.getElementById("arrowStart").setAttribute("r",15);
    document.getElementById("arrowStart").setAttribute("fill","none");
    document.getElementById("arrowStart").setAttribute("stroke","#F00");
    document.getElementById("arrowStart").setAttribute("stroke-width",2);

    // draw numbers
    document.getElementById("out2").setAttribute("x",x1);
    document.getElementById("out2").setAttribute("y",y1);
    document.getElementById("out2").setAttribute("fill","#FFBBBB");
    document.getElementById("out2").setAttribute("font-size",arrLength);


    }

    function arrowStep(){
    // Move arrow once
    grad += 1;
    secCounter += 1;
    rad = grad * (Math.PI / 180);
    x2 = x1 + Math.cos(rad)*arrLength;
    y2 = y1 + Math.sin(rad)*arrLength;
    document.getElementById("arrow").setAttribute("x2",x2);
    document.getElementById("arrow").setAttribute("y2",y2);
    console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2 + ", angle (degrees) = " + grad);
    console.log(secCounter);
    // Draw arrow top point

    document.getElementById("arrowEnd").setAttribute("cx",x2);
    document.getElementById("arrowEnd").setAttribute("cy",y2);
    document.getElementById("arrowEnd").setAttribute("r",4);
    document.getElementById("arrowEnd").setAttribute("fill","#FF0000");
    document.getElementById("arrowEnd").setAttribute("stroke-width",0);
    document.getElementById("out2").innerHTML = secCounter;
    }
    </script>
    </head>
    <body onload="drawTimer()">
    <svg id="myTimer">
    <text id = "out2" x="" y="" fill="" font-size="" alignment-baseline="middle" text-anchor="middle">0</text>
    <line id="arrow" x1="" y1="" x2="" y2="" stroke-width="" stroke=""/>
    <circle id="arrowStart" cx="" cy="" r="" fill="" stroke-width="" />
    <circle id="arrowEnd" cx="" cy="" r="" fill="" stroke-width="" />
    </svg>

    <button onclick = "arrowStep();">Go one step</button>
    <button onclick = "int1 = setInterval(arrowStep,1000);">Start timer</button>
    <button onclick = "clearInterval(int1);">Stop timer</button>
    <button onclick = "drawTimer();">Reset counter</button>

    </body>
    </html>

     

     

    Результат

     

  • 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