canvas中的变换

注意：canvas中变换的都是坐标系；

translate()平移坐标系：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.translate(50,50);
    ctx.translate(50,50);
    ctx.strokeRect(0,0,300,200);

    ctx.beginPath();
    ctx.translate(-100,-100);
    ctx.strokeRect(0,0,300,200);
</script>

rotate旋转坐标系

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.rotate(Math.PI/4);
    ctx.rotate(-Math.PI/4);
    ctx.strokeRect(0,0,300,200);
</script>

旋转示例：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle="pink";

    //1、平移坐标系到矩形的中心点
    ctx.translate(150,100);
    var timer=setInterval(function(){
        ctx.rotate(0.01*Math.PI);
        //2、绘制矩形
        ctx.strokeRect(-150,-100,300,200);
    },10);

</script>

scale伸缩变换

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //变成一个竖起来的椭圆
    ctx.scale(0.5,1);
    ctx.arc(150,300,150,0,2*Math.PI);
    ctx.stroke();
</script>

伸缩变换示例demo2

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.scale(0.5,0.5);

    ctx.strokeStyle="red";
    ctx.strokeRect(0,0,1600,1200);

    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.strokeRect(0,0,800,600);

</script>