Canvas变形 Transformations

最新推荐文章于 2024-09-21 00:43:12 发布

华惜

最新推荐文章于 2024-09-21 00:43:12 发布

阅读量267

点赞数

文章标签： canvas css js

本文链接：https://blog.csdn.net/weixin_44966759/article/details/108736357

版权

变形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>