HTML5-এ drawImage() মেথড ব্যবহার করে ইমেজ আঁকা

HTML5 drawImage() মেথড ক্যানভাসে ইমেজ, ক্যানভাস বা ভিডিও আঁকতে ব্যবহৃত হয়। এটি ইমেজের অংশও আঁকে। এর মাধ্যমে ইমেজের আকার বড় বা ছোটও করা যায়।

drawImage() মেথডের প্যারামিটার মানগুলো নিচে দেওয়া হলো −

উদাহরণ

নিচের কোড চালিয়ে drawImage() মেথড ব্যবহার করে ইমেজ আঁকা শিখুন −

<!DOCTYPE HTML> <html> <head> <script type = "text/javascript">    var pattern = new Image();    function animate() {       pattern.src = '/html5/images/pattern.jpg';       setInterval(drawShape, 100);    }    function drawShape() {       // DOM ব্যবহার করে ক্যানভাস এলিমেন্ট পান       var canvas = document.getElementById('newCanvas');       // ক্যানভাস সাপোর্ট না হলে এক্সিকিউট না করুন       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 = "newCanvas" width = "400" height = "400"></canvas> </body> </html>