HTML5 ক্যানভাস ট্রান্সফরমেশন ম্যাট্রিক্সকে সরাসরি সংশোধন করার মেথডগুলো প্রদান করে। ট্রান্সফরমেশন ম্যাট্রিক্স প্রাথমিকভাবে আইডেন্টিটি ট্রান্সফরম হতে হবে। তারপর ট্রান্সফরমেশন মেথডগুলো ব্যবহার করে এটিকে সামঞ্জস্য করা যায়।
উদাহরণ
ক্যানভাস ট্রান্সফরমেশনের একটি উদাহরণ দেখি −
<!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> 