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(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // create new image object to use as pattern var img = new Image(); img.src = 'images/pattern.jpg'; img.onload = function(){ // create pattern 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>
