Профессиональный веб-дизайн

:

Перспективные технологии и языки веб-разработки
[+]
Опубликован: 04.07.2012 | Уровень: специалист | Доступ: платный
Самостоятельная работа 3:

Практическое введение в HTML 5. Создание собственного видео-плеера на HTML5 Video
A
|
версия для печати
< Лекция 7 || Самостоятельная работа 3: 123 || Лекция 8 >

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

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

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

  1. Создайте в WebMatrix пустой веб-сайт, например с именем "HTML5SVGDemo" и добавьте в него пустую HTML страницу
  2. Добавьте на веб-странице элемент 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>
  3. После запуска на просмотр в веб-браузере (обратите внимание на обработчик события mouseClicked у элемента ellipse) клик левой кнопки мышки будет приводить к увеличению радиуса овала, тогда как клик правой кнопки мышки будет уменьшать радиус овала.

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

  1. Создайте в WebMatrix пустой веб-сайт, например с именем "HTML5CanvasDemo" и добавьте в него пустую HTML страницу
  2. Внесите на веб-страницу следующий код. 
    <!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>
  3. После запуска на просмотр в веб-браузере по нажатию левой кнопки мышки можно будет перемещать круг в браузере по всему полю элемента canvas.

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

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

Дальше >>
< Лекция 7 || Самостоятельная работа 3: 123 || Лекция 8 >

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

вопросов: 3
Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

ответить
Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

ответить