HTML5 ক্যানভাস ছবি আঁকতে এবং সম্পূর্ণরূপে মুছে ফেলতে απαয়শ্যক মেথডগুলো প্রদান করে। আমরা জাভাস্ক্রিপ্টের সাহায্যে HTML5 ক্যানভাসের ওপর ভালো অ্যানিমেশন অনুকরণ করতে পারি।
উদাহরণ
মৌলিক 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('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body onload="animate();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
