File: canvas_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Tmatrix   canvas_example.html   Download  
File: canvas_example.html
Role: Example script
Content type: text/plain
Description: Canvas transformation example
Class: Tmatrix
Manipulate matrices to transform Web page elements
Author: By
Last change:
Date: 12 years ago
Size: 2,124 bytes


Class file image Download
<!DOCTYPE html> <!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * Feel free to distribute and modify code, but keep reference to its creator * * Tmatrix class generates transformation matrix from provided transformations. * It can return matrix object, apply absolute or relative transformation to canvas context * or return CSS matrix filter string for IE browsers. * * For more information, examples and online documentation visit: * **************************************************************/ --> <html> <head> </head> <body> <canvas id='mycanvas' width='400' height='400'></canvas> <p><input type='button' value='Relative Transform' onclick='reltransform()'/> each time rotates canvas for 20deg</p> <p><input type='button' value='Absolute Transform' onclick='abstransform()'/> returns to initial transformation</p> <p><input type='button' value='Reset Transform' onclick='reset()'/> resets canvas as no transformation was applied</p> <script type="text/javascript" src="./tmatrix.packed.js" ></script> <script type="text/javascript"> //get canvas var c = document.getElementById("mycanvas"); //get drawing context var ctx = c.getContext("2d"); //create instance var t = new tmatrix(); //some initial transformation t.translate(150,150); t.skew(-25,-25); t.transformCanvas(ctx); //and drawing ctx.strokeRect(-50,-50,100,100); //relative transform function reltransform(){ ctx.clearRect(0,0,400,400); t.reset(); t.rotate(20); t.transformCanvas(ctx); ctx.strokeRect(-50,-50,100,100); } //absolute transform function abstransform(){ ctx.clearRect(0,0,400,400); t.reset(); t.translate(150,150); t.skew(-25,-25); t.setTransformCanvas(ctx); ctx.strokeRect(-50,-50,100,100); } //reset canvas transformation function reset(){ ctx.clearRect(0,0,400,400); t.reset(); t.setTransformCanvas(ctx); ctx.strokeRect(100,100,100,100); } </script> </body> </html>