web技术学习笔记和分享

位移变换

01.translate

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
// 绘制矩形 fillRect(x,y,width,height)
/* 
Canvas 2D API 的 CanvasRenderingContext2D.translate() 方法对当前网格添加平移变换的方法。
语法
void ctx.translate(x, y);
translate() 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行平移变换 */
ctx.translate(100, 100)
ctx.fillRect(0, 0, 50, 50)
ctx.translate(100, 100)
ctx.fillRect(0, 0, 50, 50)

<template>
  <canvas id="c1" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c1");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  // 绘制矩形 fillRect(x,y,width,height)
  /* 
        Canvas 2D API 的 CanvasRenderingContext2D.translate() 方法对当前网格添加平移变换的方法。
        语法
        void ctx.translate(x, y);
        translate() 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行平移变换 */
  ctx.translate(100, 100);
  ctx.fillRect(0, 0, 50, 50);
  ctx.translate(100, 100);
  ctx.fillRect(0, 0, 50, 50);
});
</script>

<style scoped>
canvas {
  border: 1px solid #ccc;
}
</style>

02.scale

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
// 绘制矩形 fillRect(x,y,width,height)
/* 
CanvasRenderingContext2D.scale() 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换的方法。

默认的，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。

语法
void ctx.scale(x, y);
参数
x
水平方向的缩放因子。A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.

y
垂直方向的缩放因子。A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling.

*/
ctx.scale(9, 3);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 8, 20);

// Reset current transformation matrix to the identity matrix
/* CanvasRenderingContext2D.setTransform() 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。
参见 transform() 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。 */
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Non-scaled rectangle
ctx.fillStyle = "gray";
ctx.fillRect(10, 10, 8, 20);

<template>
  <canvas id="c2" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c2");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  // 绘制矩形 fillRect(x,y,width,height)
  /* 
        CanvasRenderingContext2D.scale() 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换的方法。

        默认的，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。

        语法
        void ctx.scale(x, y);
        参数
        x
        水平方向的缩放因子。A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.

        y
        垂直方向的缩放因子。A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling.

 */
  ctx.scale(9, 3);
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 8, 20);

  // Reset current transformation matrix to the identity matrix
  /* CanvasRenderingContext2D.setTransform() 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。
        参见 transform() 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。 */
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  // Non-scaled rectangle
  ctx.fillStyle = "gray";
  ctx.fillRect(10, 10, 8, 20);
});
</script>

<style scoped>
canvas {
  border: 1px solid #ccc;
}
</style>

03.rotate

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
/* CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
语法
void ctx.rotate(angle);
参数
angle
顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 translate() 方法移动 canvas。 */
ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(0, 0, 50, 50)

<template>
  <canvas id="c3" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c3");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  /* CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
        语法
        void ctx.rotate(angle);
        参数
        angle
        顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
        旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 translate() 方法移动 canvas。 */
  ctx.rotate((45 * Math.PI) / 180);
  ctx.fillRect(0, 0, 50, 50);
});
</script>

<style scoped></style>

04.变换组合使用

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
/* CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
语法
void ctx.rotate(angle);
参数
angle
顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 translate() 方法移动 canvas。 */
ctx.translate(300, 200)
ctx.rotate(45 * Math.PI / 180)
ctx.scale(2, 1)
ctx.fillRect(-250, -25, 500, 50)

<template>
  <canvas id="c4" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c4");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  /* CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
        语法
        void ctx.rotate(angle);
        参数
        angle
        顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
        旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 translate() 方法移动 canvas。 */
  ctx.translate(300, 200);
  ctx.rotate((45 * Math.PI) / 180);
  ctx.scale(2, 1);
  ctx.fillRect(-250, -25, 500, 50);
});
</script>

<style scoped></style>

05.transform矩阵

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
/*CanvasRenderingContext2D.setTransform() 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。
参见 transform() 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。

语法
void ctx.setTransform(a, b, c, d, e, f);
变换矩阵的描述： 
            [
                a c e
                b d f
                0 0 1
            ]

参数
a (m11)
水平缩放。

b (m12)
垂直倾斜。

c (m21)
水平倾斜。

d (m22)
垂直缩放。

e (dx)
水平移动。

f (dy)
垂直移动。

较新的类型由单个参数矩阵组成，该参数表示要设置的 2D 转换矩阵（从技术上讲，是 DOMMatrixInit 对象；任何对象只要包含上述作为属性的组件，就可以执行操作）。 */

ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

ctx.setTransform(1, 0, 0, 1, 0, 0);  // 重置回初始值
ctx.fillRect(0, 200, 100, 100);

<template>
  <canvas id="c5" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c5");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  /*CanvasRenderingContext2D.setTransform() 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。
        参见 transform() 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。
        
        语法
        void ctx.setTransform(a, b, c, d, e, f);
        变换矩阵的描述： 
                    [
                        a c e
                        b d f
                        0 0 1
                    ]
        
        参数
        a (m11)
        水平缩放。
        
        b (m12)
        垂直倾斜。
        
        c (m21)
        水平倾斜。
        
        d (m22)
        垂直缩放。
        
        e (dx)
        水平移动。
        
        f (dy)
        垂直移动。
        
        较新的类型由单个参数矩阵组成，该参数表示要设置的 2D 转换矩阵（从技术上讲，是 DOMMatrixInit 对象；任何对象只要包含上述作为属性的组件，就可以执行操作）。 */

  ctx.transform(1, 0.2, 0.8, 1, 0, 0);
  ctx.fillRect(0, 0, 100, 100);

  ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置回初始值
  ctx.fillRect(0, 200, 100, 100);
});
</script>

<style scoped></style>

位移变换 ​

01.translate ​

02.scale ​

03.rotate ​

04.变换组合使用 ​

05.transform矩阵 ​

位移变换

01.translate

02.scale

03.rotate

04.变换组合使用

05.transform矩阵