图形变形_变形

• ctx.transform(a, b, c, d, e, f)：接受变换矩阵的六个元素作为参数，完成缩放、平移和倾斜等变形。

  • a：x轴方向缩放
  • b：x轴方向倾斜
  • c：y轴方向倾斜
  • d：y轴方向缩放
  • e：x轴方向平移
  • f：y轴方向平移

• 默认状态：transform(1,0,0,1,0,0)

变换矩阵： a c e [ b d f ] 0 0 1

点（x,y）经过矩阵变换后得到(x',y')

1. x' = ax + cy + e;
2. y' = bx + dy + f;

• ctx.setTransform（a, b, c, d, e, f）：重置并创建新的变换矩阵
• ctx.resetTransform()：重置当前变形为单位矩阵，它和调用以下语句是一样的：ctx.setTransform(1, 0, 0, 1, 0, 0);

xxxxxxxxxx
        ctx.fillRect(0, 0, 100, 100);//绘制参考矩形

        ctx.fillStyle='green'
        // ctx1.transform(0.5, 0, 0, 0.5, 0, 0);//缩放
        // ctx1.transform(1, 0, 0, 1, 50, 50);//平移
        // ctx1.transform(1, 1, 0, 1, 0, 0);//倾斜
        ctx.transform(0.5, 1, 0, 0.5, 50, 50);//综合变形
        ctx.fillRect(0, 100, 100, 100);//绘制变形后的矩形

        ctx.setTransform(0.5, 0, 0, 0.5, 0, 0);//重置并创建新的变化矩阵
        ctx.fillRect(0, 400, 100, 100);//绘制重置并创建新变形后的矩形

实时效果反馈

1.下列描述错误的是：

A ctx.transform(a,b,c,d,e,f)，可以实现综合变形

Bctx.transform(0.5,0.5,0,1,0,0)实现了水平方向和垂直方向的缩放

答案

1=>B