Canvas位移、旋轉-17

位移

    window.onload = function (params) {
            var c = document.getElementById('canvas');
            var ctx = c.getContext('2d');
            ctx.fillRect(10, 10, 100, 50);
            // 改變繪製基點位置
            ctx.translate(200, 70);
            ctx.fillRect(10, 10, 100, 50);
        }

旋轉

window.onload = function (params) {
            var c = document.getElementById('canvas');
            var ctx = c.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(20,20);
            ctx.lineWidth=3;
            ctx.stroke();
            ctx.fillStyle= "blue"
            ctx.fillRect(100, 0, 100, 50);
            // 旋轉角度
            ctx.rotate(Math.PI /4);
            ctx.fillRect(100, 0, 100, 50);
        }