Icontem

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: 8 years ago
Size: 2,124 bytes
 

Contents

Class file image Download
<!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>