JS中canvas画布绘制中如何实现缩放，位移，旋转

1.缩放

cxt.scale(2,2);
缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");

    cxt.rect(0,0,100,100);
    cxt.fillStyle = "red";
    //缩放
    cxt.scale(2,2);
    //放大一倍,不仅仅是宽度和高度,其x,y也会跟着放大
    cxt.fillStyle = "blue";
    cxt.rect(100,100,100,100);

    //还原 缩小原来的一倍
    cxt.scale(0.5,0.5);

    cxt.fill();

</script>

image

2.位移

ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
x： 添加到水平坐标（x）上的值
y： 添加到垂直坐标（y）上的值
发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
位移画布一般配合缩放和旋转等。

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");

    cxt.fillStyle = "red";
    cxt.fillRect(0,0,200,100);

    //位移  对之前的操作 没有影响
    cxt.translate(100,100);
    cxt.fillStyle = "blue";
    cxt.fillRect(100,100,200,100);

</script>

image

3.旋转

context.rotate(angle); 方法旋转当前的绘图
注意参数是弧度（PI）
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

<script type="text/javascript">
    var canvas = document.getElementById("con");
    //获取上下文
    var cxt = canvas.getContext("2d");

  cxt.fillStyle = "red";
   cxt.fillRect(100,100,200,100);

   cxt.rotate(20 * Math.PI/180);
   cxt.fillStyle = "blue";
   cxt.fillRect(100,100,200,100);

</script>

image