Canvas How to - Do Transform in animation

Question

We would like to know how to do Transform in animation.

Answer


<!--  w ww  .ja  va2s.c o  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var context2D= document.getElementById("canvas").getContext("2d"),
    x=1;
context2D.fillStyle = "#000";
function clear(){
    context2D.clearRect(0, 0, canvas.width, canvas.height);
}
function drawAnimation(){
    clear();
    context2D.save();
    context2D.setTransform(1, 1, x*.8, 1, x*.8, x*.8);
    context2D.fillRect(x+10,x-10,x+40,x+40);
    context2D.restore();
    x+=0.1;
    setTimeout(function(){drawAnimation()},100);
}
drawAnimation();
}//]]>  
</script>
</head>
<body>
  <canvas id="canvas" style="width:200px;height:200px;"></canvas>
</body>
</html>

The code above is rendered as follows: