HTML5 कैनवास के साथ पैटर्न बनाने के लिए निम्नलिखित मेथड का उपयोग करें: createPattern(image, repetition) − यह मेथड पैटर्न बनाने के लिए एक इमेज का उपयोग करेगा। दूसरा आर्गुमेंट निम्नलिखित मानों में से एक के साथ एक स्ट्रिंग हो सकता है: repeat, repeat-x, repeat-y, और no-repeat। यदि खाली स्ट्रिंग या null निर्दिष्ट किया जाता है, तो repeat मान लिया जाएगा।
उदाहरण
आप पैटर्न बनाना सीखने के लिए निम्नलिखित कोड चलाने का प्रयास कर सकते हैं:
<!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'); // पैटर्न के रूप में उपयोग करने के लिए नया इमेज ऑब्जेक्ट बनाएं var img = new Image(); img.src = 'images/pattern.jpg'; img.onload = function(){ // पैटर्न बनाएं var ptrn = ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn; ctx.fillRect(0,0,150,150); } } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
