📶 📋 🧀 एचटीएमएल 5 डेमो 👨‍👩‍👦 🧙🏼 👩🏿‍💻

Microsoft® WebMatrix पर साइट विकास प्रतियोगिता के लिए डेमो विकसित करने का विवरण।

प्रतियोगिता की श्रेणियों में से एक है "कोई रोक रचनात्मकता नहीं है। सावधानी एचटीएमएल 5 ", जो डेमो के लिए काफी उपयुक्त है।

आपको क्या चाहिए:
- आईडीई वेबमैट्रिक्स
- संगीत ट्रैक (आप Jamendo वेबसाइट पर मुफ्त ट्रैक डाउनलोड कर सकते हैं)
- कैनवास के साथ काम करने पर पृष्ठभूमि का प्रलेखन
- नि: शुल्क पार्किंग। पंजीकरण
- HTML5 समर्थन के लिए ब्राउज़र की जाँच करें

समस्या का बयान

हम पृष्ठ पर कई रंगीन वृत्त प्रदर्शित करते हैं और उन्हें धुरी के चारों ओर संगीत में घुमाते हैं, यह डेमो के लिए पर्याप्त होगा। एकरसता को खत्म करने के लिए, हम निकट आने / हटाने की धारणा बनाने के लिए उनके आकार और प्रक्षेपवक्र को बदल देंगे। हम रनिंग स्टार अंक और उज्ज्वल चमक भी जोड़ते हैं।

पेज कोड

<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>F11</title> <script src="jquery-1.6.4.min.js"></script> <script src="F11.js"></script> <style> body {margin: 0px; padding: 0px; background-color:#000000;} </style> </head> <body> <canvas id="canvas" width="500" height="500" /> <audio id="player" autoplay loop> <source src="mz.ogg" /> <source src="mz.mp3" /> </audio> <script type="text/javascript"> $(document).ready(function(){ initAll(); }); </script> </body> </html>

जैसा कि आप देख सकते हैं, पेज पर केवल दो तत्व हैं - ध्वनि खेलने के लिए ड्राइंग और ऑडियो के लिए कैनवास। बाकी सब कुछ स्क्रिप्ट द्वारा किया जाएगा।

ध्वनि के साथ चित्रों को सिंक करें

यह मुख्य कार्य है। तुल्यकालन के बिना, डेमो एक डेमो की तरह नहीं बल्कि संगीत के साथ एक तस्वीर के रूप में दिखेगा।
सबसे पहले, आपको चयनित ट्रैक के बीट की अवधि को मापने की आवश्यकता है (यह किसी भी ध्वनि संपादक जैसे ऑडेसिटी en.wikipedia.org/wiki/Audacity में किया जा सकता है)।
ग्राफिक्स के सभी परिवर्तन ट्रैक के उपायों से बंधे होने चाहिए।

 var stepSize=1.92;//      ... currentStep=Math.round((player.currentTime-stepSize/2.0)/stepSize);

चलिए एक ऐसा फंक्शन बनाते हैं जो एक निश्चित अवधि के बाद खुद को लॉन्च करता है

 var frate=1000.0/22;//22    ... function tick(){ ... setTimeout("tick()",frate); }

इसमें हम सेकंड की संख्या पढ़ेंगे जो ट्रैक की शुरुआत से हैं और गेंदों के निर्देशांक को बदलते हैं

 var ball = context2D.createRadialGradient(drawX+drawSize/2,drawY+drawSize/2,1,drawX+drawSize/2,drawY+drawSize/2,drawSize/2+1); ball.addColorStop(0.1,"rgba(255,255,255,1)"); ball.addColorStop(0.5,"rgba(255,255,255,0.1)"); ball.addColorStop(1.0,"rgba(255,255,255,0)"); context2D.fillStyle=ball; context2D.fillRect(drawX-1, drawY-1, drawSize+2, drawSize+2);

जहां drawX, drawY और drawSize वर्तमान खिलाड़ी समय के साइन और कोसाइन पर निर्भर करेगा। लगभग उसी तरह, आप प्रकाश के स्टार अंक और चमक को प्रदर्शित कर सकते हैं।

आप देख सकते हैं कि यहां क्या होता है (अधिकांश आधुनिक ब्राउज़र समर्थित हैं):
http://habrahabr.ru/special/microsoft/webmatrix/work/16/

लिपियों और ट्रैक को http://sssurkv-2.hosting.parking.ru पर डाउनलोड किया जा सकता है।

एचटीएमएल 5 डेमो

समस्या का बयान

ध्वनि के साथ चित्रों को सिंक करें

More articles: