НОУ ИНТУИТ | Перспективные технологии и языки веб-разработки. Лекция 3: Практическое введение в HTML 5. Создание собственного видео-плеера на HTML5 Video

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 04.07.2012 | Доступ: свободный | Студентов: 2114 / 176 | Оценка: 4.08 / 3.69 | Длительность: 21:39:00

Темы: Интернет-технологии, Программирование

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 48 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Порядок выполнения работы

Задание 1. Интерактивное взаимодействие с SVG элементом.

В данном задании отображается фигура эллипса с градиентной заливкой, задаваемой элементом radialGradient. С помощью кода JavaScript поддерживается интерактивное взаимодействие пользователя с элементом svg.

Создайте в WebMatrix пустой веб-сайт, например с именем "HTML5SVGDemo" и добавьте в него пустую HTML страницу

Добавьте на веб-странице элемент SVG с помощью следующего кода:

<!DOCTYPE html>

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" id="elsvg" version="1.1" >
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" 
      fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse id="elps" cx="200" cy="70" 
        rx="85" ry="55" fill="url(#grad1)" 
        onmousedown="mouseClicked(event);"/>
</svg>

 <script type="text/javascript">

    var SVGelem = document.getElementById('elsvg');
    var elpsEl = document.getElementById('elps');
    var erx = elpsEl.getAttribute('rx'); 
    var ery = elpsEl.getAttribute('ry'); 
            
    function mouseClicked(event)
    {
       if (event.button == 2)
       {
           erx = 1.0*erx + 10;
           ery = 1.0*ery + 10;
                    
           elpsEl.setAttribute("rx",erx); 
           elpsEl.setAttribute("ry",ery);                           
        }           
        else
        {
            erx = erx - 10;
            ery = ery - 10;
                    
            elpsEl.setAttribute("rx",erx); 
            elpsEl.setAttribute("ry",ery);                          
        }
    }
            
 </script>
    
</body>
</html>

После запуска на просмотр в веб-браузере (обратите внимание на обработчик события mouseClicked у элемента ellipse) клик левой кнопки мышки будет приводить к увеличению радиуса овала, тогда как клик правой кнопки мышки будет уменьшать радиус овала.

Задание 2. Интерактивное взаимодействие с элементом canvas.

Создайте в WebMatrix пустой веб-сайт, например с именем "HTML5CanvasDemo" и добавьте в него пустую HTML страницу

Внесите на веб-страницу следующий код.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
    </head>
    
    <body>
        
        <canvas id="myCanvas" width="500" height="300" style="border:1px solid #c3c3c3;" onmousedown="mouseClicked(event);">
            Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            
            var x= 70;
            var y= 50;
            var r= 45;
            
            var dx;
            var dy;
            
            var canvWidth = c.width; 
            var canvHeight = c.height; 
                        
            ctx.fillStyle="#FF0000";
            ctx.beginPath();
            ctx.arc(x,y,r,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
            
            function mouseClicked(event)
            {
                if (ctx.isPointInPath(event.x,event.y)) 
                {

                 ctx.fillStyle="#FFFFFF";
                 ctx.beginPath();
                 ctx.arc(x,y,r,0,Math.PI*2,true);
                 ctx.closePath();
                 ctx.fill();

                 x = Math.round(canvWidth*Math.random());
                 y = Math.round(canvHeight*Math.random());

                 ctx.fillStyle="#FF0000";
                 ctx.beginPath();
                 ctx.arc(x,y,r,0,Math.PI*2,true);
                 ctx.closePath();
                 ctx.fill();
                 
                }
            }
            
        </script>
        
    </body>
</html>

После запуска на просмотр в веб-браузере по нажатию левой кнопки мышки можно будет перемещать круг в браузере по всему полю элемента canvas.

Отображение реализуется динамически с помощью JavaScript кода. Динамический доступ к элементу canvas обеспечивается стандартным методом документа getElementById. Круг прорисовывается с помощью метода arc аргументами которого являются координаты центра (x, y), радиус r, начальный и конечный углы дуги и направление прорисовки (true - по часовой стрелке).

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

Дальше >>

Авторизоваться

Перспективные технологии и языки веб-разработки

Практическое введение в HTML 5. Создание собственного видео-плеера на HTML5 Video

Порядок выполнения работы

Задание 1. Интерактивное взаимодействие с SVG элементом.

Задание 2. Интерактивное взаимодействие с элементом canvas.

Вопросы и ответы