html5 canvas 旋转扩大

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function ()

{

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    var num = 0;

    var inum2 = 0;

    var value = 1;

    setInterval(function ()

    {

        num++;

        oGC.save();

        if(inum2 == 100)

        {

            value = -1;

        }

        else if(inum2 == 0)

        {

            value = 1;

        }

        inum2 += value;

        oGC.clearRect(0,0,oC.width,oC.height);

        oGC.translate(100,100);

        oGC.rotate(num*Math.PI/180);

        oGC.scale(inum2*1/50,inum2*1/50);

        oGC.translate(-50,-50);

        oGC.fillRect(0,0,100,100);

        oGC.restore();

    },30)

}

</script>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }

</style>

</head>

<body>

    <canvas id="c1" width="400" height="400"></canvas>

</body>

</html>
OGC

html5 canvas 旋转扩大
