canvas-变换实例

<script type="text/javascript">
    window.onload = function () {
        var flag = 0;
        var scale = 0;
        var flagScale = 0;
        //1.获取画布
        var canvas = document.querySelector('#test');
        if (canvas.getContext) {
            //2.获取画笔
            var ctx = canvas.getContext('2d');

            ctx.save();
            ctx.translate(250, 250);
            ctx.beginPath();
            ctx.fillRect(-100, -100, 200, 200);
            ctx.restore();

            setInterval(function(){
                flag--;
                ctx.clearRect(0,0,canvas.width,canvas.height)
                ctx.save();
                ctx.translate(250,250);
                ctx.rotate(flag*Math.PI/180);
                
                if(scale==100){
                    flagScale=-1;
                }else if(scale==0){
                    flagScale=1;
                }
                scale+=flagScale;
                ctx.scale(scale/50,scale/50)

                ctx.beginPath();
                ctx.fillRect(-100, -100, 200, 200);
                ctx.restore();
            },1000/60)

        }
    }
</script>