Friday, May 27, 2011

Translate + Rotate canvas

example:
Translate + Rotate canvas

<script type="text/javascript">

var mycontext;
var myImage;

function canvasloader(){
var mycanvas = document.getElementById("canvas");
mycontext = mycanvas.getContext("2d");

myImage = new Image();
myImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVG99cSIdxIuEdKyGvPEsrsuJsWhHLyEO4OHCAhgbSAR97ijeK1R4XZ41dnvMg_YV2M_TM4xHGAtMSw2GX57bndi-Xva5TEX86PSLnbwN9XsHDReKxxjBR47n6yi-snhDJtGfNYeBxI4/s200/editor.png";
myImage.addEventListener("load", myImageLoaded , false);
}

function myImageLoaded(){
doTransform(mycontext);
mycontext.drawImage(myImage, 0, 0);
}

function doTransform(context){
context.setTransform(1,0,0,1,0,0); //identity matrix
context.translate(100, 100);
var rotateAngle = 45 * Math.PI/180; //clockwise rotation angle expressed in radians
context.rotate(rotateAngle);
}

</script>

No comments:

Post a Comment