文章目录
前言一、图形平移、缩放、旋转1.平移2.缩放3.旋转前言
图形平移、缩放、旋转是计算机图形学中常用的操作，用来改变图像的位置、大小和方向。
平移：平移是将图形在二维平面上沿着一个方向移动一段距离，通常用一个二维向量表示平移的距离。在计算机图形学中，可以通过修改坐标系来实现平移操作。
缩放：缩放是将图形按照一定比例进行放大或缩小，在计算机图形学中，通常使用缩放矩阵来进行缩放操作。缩放矩阵中，对角线上的元素表示沿着坐标轴的缩放比例，非对角线上的元素表示斜线方向的缩放比例。
旋转：旋转是将图形围绕某个点或轴旋转一定角度，通常使用旋转矩阵来实现。旋转矩阵是一个二维矩阵，其中cos和sin分别表示旋转角度的余弦和正弦值。通过对图形中每个点进行旋转矩阵变换，可以实现旋转操作。
这些操作常常用于计算机图形学、图像处理等领域中的图像变换。图形平移、缩放、旋转是计算机图形学中常用的操作，用来改变图像的位置、大小和方向。
一、图形平移、缩放、旋转
1.平移
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../lib/index.js"></script><style>* {margin: 0;padding: 0;}canvas{margin: 50px auto 0;display: block;background: yellow;}</style></head><body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas></body></html><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')// 创建着色器源码const VERTEX_SHADER_SOURCE = `attribute vec4 aPosition;attribute float aTranslate;void main() {gl_Position = vec4(aPosition.x + aTranslate, aPosition.y, aPosition.z, 1.0);gl_PointSize = 10.0;}`; // 顶点着色器const FRAGMENT_SHADER_SOURCE = `void main() {gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`; // 片元着色器const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)const aPosition = gl.getAttribLocation(program, 'aPosition');const aTranslate = gl.getAttribLocation(program, 'aTranslate');const points = new Float32Array([-0.5, -0.5,0.5, -0.5,0.0, 0.5,])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(aPosition)let x = -1;setInterval(() => {x += 0.01;if (x > 1) {x = -1;}gl.vertexAttrib1f(aTranslate, x);gl.drawArrays(gl.TRIANGLES, 0, 3);}, 60)</script>
2.缩放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../lib/index.js"></script><style>* {margin: 0;padding: 0;}canvas{margin: 50px auto 0;display: block;background: yellow;}</style></head><body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas></body></html><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')// 创建着色器源码const VERTEX_SHADER_SOURCE = `attribute vec4 aPosition;attribute float aScale;void main() {gl_Position = vec4(aPosition.x * aScale, aPosition.y * aScale, aPosition.z * aScale, 1.0);gl_PointSize = 10.0;}`; // 顶点着色器const FRAGMENT_SHADER_SOURCE = `void main() {gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`; // 片元着色器const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)const aPosition = gl.getAttribLocation(program, 'aPosition');const aScale = gl.getAttribLocation(program, 'aScale');const points = new Float32Array([-0.5, -0.5,0.5, -0.5,0.0, 0.5,])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(aPosition)let x = 1;setInterval(() => {x += 0.1;if (x > 2) {x = 1;}gl.vertexAttrib1f(aScale, x);gl.drawArrays(gl.TRIANGLES, 0, 3);}, 60)</script>
3.旋转
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../lib/index.js"></script><style>* {margin: 0;padding: 0;}canvas{margin: 50px auto 0;display: block;background: yellow;}</style></head><body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas></body></html><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')// 创建着色器源码const VERTEX_SHADER_SOURCE = `attribute vec4 aPosition;attribute float deg;void main() {gl_Position.x = aPosition.x * cos(deg) - aPosition.y * sin(deg);gl_Position.y = aPosition.x * sin(deg) + aPosition.y * cos(deg);gl_Position.z = aPosition.z;gl_Position.w = aPosition.w;}`; // 顶点着色器const FRAGMENT_SHADER_SOURCE = `void main() {gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`; // 片元着色器const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)const aPosition = gl.getAttribLocation(program, 'aPosition');const deg = gl.getAttribLocation(program, 'deg');const points = new Float32Array([-0.5, -0.5,0.5, -0.5,0.0, 0.5,])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(aPosition)let x = 1;function animation() {x += -0.01;gl.vertexAttrib1f(deg, x);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animation)}animation();</script>
![[2024年]未来汽车：颠覆性科技与可持续发展的1200字作文素材整理](https://1200zi.500zi.com/uploadfile/img/2024/05/24/643bbd881d910528bca7248cb10c7c5e.jpg)
