<!DOCTYPE html>
<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* 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:
* http://webcodingeasy.com/JS-classes/Calculate-transformation-matrix
**************************************************************/
-->
<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>
|
Download
