HTML5 ক্যানভাস ট্রান্সফরমেশন ম্যাট্রিক্সকে সরাসরি সংশোধন করার মেথডগুলো প্রদান করে। ট্রান্সফরমেশন ম্যাট্রিক্স początাকালে আইডেন্টিটি ট্রান্সফরম হতে হবে। তারপর ট্রান্সফরমেশন মেথডগুলো ব্যবহার করে এটিকে সামঞ্জস্য করা যায়।
transform (m11, m12, m21, m22, dx, dy) মেথডটি বর্তমান ট্রান্সফরমেশন ম্যাট্রিক্সকে নিচের ম্যাট্রিক্সের সাথে গুণ করতে হবে −
m11 m21 dx m12 m22 dy 0 0 1
setTransform(m11, m12, m21, m22, dx, dy) মেথডটি বর্তমান ট্রান্সফরমকে আইডেন্টিটি ম্যাট্রিক্সে রিসেট করতে হবে, এবং তারপর একই আর্গুমেন্টসহ transform(m11, m12, m21, m22, dx, dy) মেথডটি আহ্বান করতে হবে।
<!DOCTYPE HTML> <html> <head> <script> function drawShape(){ // DOM ব্যবহার করে ক্যানভাস এলিমেন্ট পান var canvas = document.getElementById('mycanvas'); // নিশ্চিত করুন ক্যানভাস সাপোর্ট না থাকলে এক্সিকিউট না হয় if (canvas.getContext){ // getContext ব্যবহার করে ক্যানভাস ড্রয়িংয়ের জন্য var ctx = canvas.getContext('2d'); var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(200, 200); var c = 0; for (var i=0; i <= 12; i++) { c = Math.floor(255 / 12 * i); ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")"; ctx.fillRect(0, 0, 100, 100); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.setTransform(-1, 0, 0, 1, 200, 200); ctx.fillStyle = "rgba(100, 100, 255, 0.5)"; ctx.fillRect(50, 50, 100, 100); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body onload="drawShape();"> <canvas id = "mycanvas" width = "400" height = "400"></canvas> </body> </html> 