HTML5 ক্যানভাস একটি scale(x, y) মেথড প্রদান করে যা আমাদের ক্যানভাস গ্রিডের ইউনিট বাড়ানো বা কমাতে ব্যবহৃত হয়। এটি স্কেলডাউন বা বড় আকারের আকৃতি এবং বিটম্যাপ আঁকতে ব্যবহার করা যায়।
এই মেথড দুটি প্যারামিটার নেয় যেখানে x হলো হরিজোন্টাল দিকের স্কেল ফ্যাক্টর এবং y হলো ভার্টিক্যাল দিকের স্কেল ফ্যাক্টর। উভয় প্যারামিটারই পজিটিভ নম্বর হতে হবে।
উদাহরণ
একটি উদাহরণ দেখি −
<!DOCTYPE HTML> <html> <head> <script> function drawShape(){ // DOM ব্যবহার করে ক্যানভাস এলিমেন্ট পান var canvas = document.getElementById('mycanvas'); if (canvas.getContext){ // getContext ব্যবহার করে ক্যানভাস ড্রয়িংয়ের জন্য var ctx = canvas.getContext('2d'); ctx.strokeStyle = "#fc0"; ctx.lineWidth = 1.5; ctx.fillRect(0,0,300,300); // Uniform scaling ctx.save() ctx.translate(50,50); drawSpirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(0.75,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(133.333,0); ctx.scale(0.75,0.75); drawSpirograph(ctx,22,6,5); ctx.restore(); ctx.strokeStyle = "#0cf"; ctx.save() ctx.translate(50,150); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.translate(100,0); ctx.scale(1,0.75); drawSpirograph(ctx,22,6,5); ctx.restore(); ctx.strokeStyle = "#cf0"; ctx.save() ctx.translate(50,250); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.translate(133.333,0); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.translate(177.777,0); ctx.scale(0.75,1); drawSpirograph(ctx,22,6,5); ctx.restore(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } function drawSpirograph(ctx,R,r,O){ var x1 = R-O; var y1 = 0; var i = 1; ctx.beginPath(); ctx.moveTo(x1,y1); do { if (i>20000) break; var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) ctx.lineTo(x2,y2); x1 = x2; y1 = y2; i++; } while (x2 != R-O && y2 != 0 ); ctx.stroke(); } </script> </head> <body onload = "drawShape();"> <canvas id = "mycanvas" width = "400" height = "400"></canvas> </body> </html> 