Canvas变形 Transformations

变形Transformations

变形可以将原点移动到另一点、对网格进行旋转和缩放。

状态的保存和恢复Saving and restoring state
  • save()
    • 保存画布(canvas)的所有状态
  • restore()
    • save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

可以调用任意多次save()方法。每一次调用restore()方法,上一个保存的状态就从栈中弹出,所有设定都恢复。

save和restore的应用例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillRect(0,0,150,150);   // 使用默认设置绘制一个矩形
  ctx.save();                  // 保存默认状态

  ctx.fillStyle = '#09F'       // 在原有配置基础上对颜色做改变
  ctx.fillRect(15,15,120,120); // 使用新的设置绘制一个矩形

  ctx.save();                  // 保存当前状态
  ctx.fillStyle = '#FFF'       // 再次改变颜色配置
  ctx.globalAlpha = 0.5;    
  ctx.fillRect(30,30,90,90);   // 使用新的配置绘制一个矩形

  ctx.restore();               // 重新加载之前的颜色状态
  ctx.fillRect(45,45,60,60);   // 使用上一次的配置绘制一个矩形

  ctx.restore();               // 加载默认颜色配置
  ctx.fillRect(60,60,30,30);   // 使用加载的配置绘制一个矩形
}
    </script>
</html>

在这里插入图片描述

旋转Rptating

  • rotate()方法 用于以原点为中心旋转canvas
  • rotate(angle) 方法只接受一个参数:旋转角度,是以顺时针方向的,以弧度为单位的值
  • translate()方法 改变canvas始终是原点的。

代码示例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

</head>

<body onload="draw();">
    <canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script type="application/javascript">
    function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.translate(75,75)//改变原点的位置
        //设置环数
        for(var i=1;i<6;i++){
            //保存状态到盏中
            ctx.save();
            //设置颜色
            ctx.fillStyle= 'rgb('+(51*i)+','+(255-51*i)+',255)';
            //每环有多少个点
            for(var j=0;j<i*6;j++){
                //旋转角度
                ctx.rotate(Math.PI*2/(i*6));
                //开始一条路径
                ctx.beginPath();
                //绘制圆形
                ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
                //填充颜色
                ctx.fill();
            }
            ctx.restore();
        }
       
    }
</script>

</html>

在这里插入图片描述

缩放Scaling

用来增减图形在canvas中的像素数目,对形状、位图进行缩小或者放大。

  • scale(x,y)

    • scale方法可以缩放画布的水平和垂直的单位。两个参数都是实数,可以为负数,x为水平缩放,y为垂直缩放,比1小是缩放,比1大是放大。默认值是1,为实际大小。

    scale代码示例:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
    
    </head>
    
    <body onload="draw();">
        <canvas id="canvas" width="1000" height="1000"></canvas>
    </body>
    <script type="application/javascript">
       function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
    
      // 画一个简单的矩形,但要缩放它
      //保存到盏里边
      ctx.save();
    //   左右放大10倍上下放大3倍
      ctx.scale(10, 3);
      //绘制一个长方形
      ctx.fillRect(1, 10, 10, 10);
    //   从盏中拿出当前状态
      ctx.restore();
    
      // 水平镜像
      ctx.scale(-1, 1);
      //设置文本大小样式
      ctx.font = '48px serif';
      //绘制文本
      ctx.fillText('MDN', -135, 120);
    }
    </script>
    
    </html>
    

    在这里插入图片描述

变形Transforms

这个方法允许对变形矩阵直接修改

  • transform(a,b,c,d,e,f) 任意一个参数是Infinity,变形矩阵也必然被标记为无限大,否则会抛出异常。

参数表示如下:

a (m11)

水平方向的缩放

b(m12)

水平方向的倾斜偏移

c(m21)

竖直方向的倾斜偏移

d(m22)

竖直方向的缩放

e(dx)

水平方向的移动

f(dy)

竖直方向的移动

setTransform(a,b,c,d,e,f)

  • 把现在的变形矩阵变回单位矩阵,简单来说 就是把现在的变形给取消了,然后把要改的形状一步设置到位

resetTransform()

  • 把现在的变形变化回单位矩阵,和调用的以下语句是一样:ctx.setTransform(1,0,0,1,0,0);

transform/setTransform的例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

</head>

<body onload="draw();">
    <canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script type="application/javascript">
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  //绘制一个矩形
  ctx.translate(100, 100);

  var c = 0;
  for (var i=0; i <= 12; i++) {
    c = Math.floor(255 / 12 * i);
    //设置颜色
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
    //填充绘制矩形
    ctx.fillRect(0, 0, 100, 10);
    // 设置变形
    ctx.transform(cos, sin, -sin, cos, 0, 0);
  }
  //恢复成不变形时的状态重新变形
  ctx.setTransform(-1, 0, 0, 1, 100, 100);
//   设置颜色
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
//   绘制矩形
  ctx.fillRect(0, 50, 100, 100);
}
</script>

</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值