canvas笔记--关于变形等一系列

最新推荐文章于 2024-09-07 19:05:57 发布

努力的豌豆芽

最新推荐文章于 2024-09-07 19:05:57 发布

阅读量185

点赞数

文章标签： canvas css javascript html5

本文链接：https://blog.csdn.net/qq_44758643/article/details/108753168

版权

变形移动旋转和缩放

移动Translating

它用来移动 cnvas 和它的原点到一个不同的位置。

translate(x, y)

translate方法接受两个参数。x 是左右偏移量，y 是上下偏移量，

在做变形之前先保存状态

translate的例子

<!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');

        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 3; j++) {
                ctx.save();//保存当前的状态到盏中
                ctx.fillStyle='rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';//设置颜色
                ctx.translate(10+j*50,10+i*50);//设置平移的点
                ctx.fillRect(0,0,25,25);//绘制正方形
                ctx.restore();//从盏中拿出之前保存的状态

            }
        }
    }
</script>

</html>

在这里插入图片描述

旋转Rotating

rotate方法，它用于以原点为中心旋转 canvas。

rotate(angle)

只接受一个参数：旋转的角度（angle）顺时针方向的，以弧度为单位的值

旋转的中心点始终是canvas的原点，要改变需要用translate方法

rotate的例子

两层循环。第一层循环决定环的数量，第二层循环决定每环有多少个点。每环开始之前，我都保存一下 canvas 的状态，这样恢复起来方便。每次画圆点，我都以一定夹角来旋转 canvas，而这个夹角则是由环上的圆点数目的决定的。最里层的环有 6 个圆点，这样，每次旋转的夹角就是 360/6 = 60 度。往外每一环的圆点数目是里面一环的 2 倍，那么每次旋转的夹角随之减半。

<!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>

在这里插入图片描述

缩放

scale（x,y）

scale 方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比1小，会比缩放图形，如果比1大会放大图形。默认值为1，为实际大小。

缩放因子以像素为单位正常为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>

在这里插入图片描述

变形

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>

在这里插入图片描述

努力的豌豆芽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas笔记--关于变形等一系列

变形移动旋转和缩放移动Translating它用来移动 cnvas 和它的原点到一个不同的位置。translate(x, y)translate方法接受两个参数。x 是左右偏移量，y 是上下偏移量，在做变形之前先保存状态translate的例子<!DOCTYPE html><html><head> <meta charset="utf-8" /></head><body onload="draw()
复制链接

扫一扫