HTML5 ক্যানভাসে rotate(angle) মেথড রয়েছে যা বর্তমান অরিজিনের চারদিকে ক্যানভাসকে ঘুরানোর জন্য ব্যবহৃত হয়।
এই মেথডটি শুধুমাত্র একটি প্যারামিটার গ্রহণ করে এবং তা হল ক্যানভাসটি কতটুকু ঘুরানো হবে তার কোণ। এটি একটি ঘড়ির কাঁটার দিকে ঘুরানো যা রেডিয়ানে পরিমাপ করা হয়।
উদাহরণ
নিচের কোডটি চালিয়ে HTML ক্যানভাস ঘুরানোর চেষ্টা করতে পারেন:
<!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script> function drawShape(){ // DOM ব্যবহার করে ক্যানভাস এলিমেন্টটি পান var canvas = document.getElementById('mycanvas'); // নিশ্চিত করুন যে ক্যানভাস সমর্থিত না হলে এক্সিকিউট করা হয় না if (canvas.getContext){ // getContext ব্যবহার করে ক্যানভাসে আঁকুন var ctx = canvas.getContext('2d'); ctx.translate(100,100); for (i = 1; i < 7; i++){ ctx.save(); ctx.fillStyle = 'rgb('+(51*i)+','+(200-51*i)+',0)'; for (j = 0; j < i*6; j++){ ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); } } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas" width = "400" height = "400"></canvas> </body> </html>
