canvas-变换-translate(移动)

<script type="text/javascript">

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

        /* 移动 translate(x,y)
        我们先介绍translate方法来移动canvas的原点到一个不同的位置
        translate方法接受两个参数 x-左偏移量 y-右偏移量
          */
            ctx.translate(50,50);  //canvas中的是累加的
            ctx.translate(50,50);  //相当于写一条ctx.translate(100,100);
            ctx.beginPath();
            ctx.fillRect(0,0,100,100)
        }
    }
</script>