canvas-变换-rotate(旋转)

<script type="text/javascript">

    window.onload = function () {
        /** @type {HTMLCanvasElement} */
        //1.获取画布
        var canvas = document.querySelector('#test');
        if (canvas.getContext) {
            //2.获取画笔
            var ctx = canvas.getContext('2d');

        /* 旋转 rotate(angle)
        这个方法只接受一个参数：旋转的角度(angle),它是顺时针方向的,以弧度为单位的值
        旋转的中心始终是canvas的原点,如果要改变它,则需要用到translate()方法
          */
            ctx.translate(300,100);
            ctx.rotate(50*Math.PI/180);  //canvas中的rotate是累加的
            //ctx.rotate(50*Math.PI/180);  相当于写一条ctx.translate(100,100);

            ctx.beginPath();
            ctx.fillRect(0,0,100,100)
        }
    }
</script>