HTML5 कैनवास एक इमेज बनाने और उसे पूरी तरह मिटाने के लिए आवश्यक मेथड प्रदान करता है। हम HTML5 कैनवास पर अच्छी एनिमेशन का अनुकरण करने के लिए JavaScript की मदद ले सकते हैं।
उदाहरण
बुनियादी HTML5 कैनवास एनिमेशन करने के लिए आप निम्न कोड आज़मा सकते हैं:
<!DOCTYPE HTML> <html> <head> <script> var pattern= new Image(); function animate(){ pattern.src = '/html5/images/pattern.jpg'; setInterval(drawShape, 100); } function drawShape(){ // DOM का उपयोग करके कैनवास एलिमेंट प्राप्त करें var canvas = document.getElementById('mycanvas'); // सुनिश्चित करें कि कैनवास समर्थित न होने पर कोड न चले if (canvas.getContext){ // ड्राइंग के लिए कैनवास का उपयोग करने के लिए getContext var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgba(0,0,0,0.4)'; ctx.strokeStyle = 'rgba(0,153,255,0.4)'; ctx.save(); ctx.translate(150,150); var time = new Date(); ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() ); ctx.translate(0,28.5); ctx.drawImage(pattern,-3.5,-3.5); ctx.restore(); } else { alert('इस डेमो को देखने के लिए आपको Safari या Firefox 1.5+ चाहिए।'); } } </script> </head> <body onload="animate();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
