|
Добрый день. Я сейчас прохожу курс повышения квалификации - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?
|
Инспектор
Вы можете этот курс.
Опубликован: 04.07.2012 | Уровень: специалист | Доступ: платный
Самостоятельная работа 3:
Практическое введение в HTML 5. Создание собственного видео-плеера на HTML5 Video
Порядок выполнения работы
Задание 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), а затем перемещается случайным образом (координаты центра вычисляются с помощью генератора случайных чисел).
Сергей Крупко
Галина Башкирова
|
Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности Системный администратор информационно-коммуникационных» систем.
|
