HTML5 कैनवास rotate(angle) मेथड प्रदान करता है जिसका उपयोग कैनवास को वर्तमान मूल बिंदु (origin) के चारों ओर घुमाने के लिए किया जाता है।
यह मेथड केवल एक पैरामीटर लेता है और वह है वह कोण (angle) जिससे कैनवास घूमता है। यह एक घड़ी की दिशा में रेडियन (radians) में मापा गया घुमाव है।
उदाहरण
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('इस डेमो को देखने के लिए आपको Safari या Firefox 1.5+ चाहिए।'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas" width = "400" height = "400"></canvas> </body> </html>
