Computer Graphics Lab4

Lab4

1.taska.html+a.js

任务a. 参照教材上的例题代码，输入初始位置，在该指定位置绘制正方形

<!--taska.html-->
<body onload="initRotSquare()">
	<h2>Rotating Square</h2>

	<!-- 输入框，用于指定画布的平移位置 -->
	<label for="xPos">X Position: </label>
	<input type="number" id="xPos" value="0" step="10"><br><br>
	<label for="yPos">Y Position: </label>
	<input type="number" id="yPos" value="0" step="10"><br><br>
	<button onclick="moveCanvas()">Move</button>

	<canvas id="rot-canvas" width="312" height="312">你的浏览器不支持HTML5 canvas元素</canvas>
</body>

// a.js
function initRotSquare() {
	var canvas = document.getElementById("rot-canvas");
	var gl = canvas.getContext("webgl2");

	if (!gl) {
		alert("WebGL isn't available");
	}

	gl.viewport(0, 0, canvas.width, canvas.height);
	gl.clearColor(1.0, 1.0, 1.0, 1.0);

	var program = initShaders(gl, "rot-v-shader", "rot-f-shader");
	gl.useProgram(program);

	var vertices = new Float32Array([
		0, 1, 0,
		-1, 0, 0,
		1, 0, 0,
		0, -1, 0
	]);

	var bufferId = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

	var vPosition = gl.getAttribLocation(program, "vPosition");
	gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(vPosition);

	var thetaLoc = gl.getUniformLocation(program, "theta");

	function renderSquare() {
		gl.clear(gl.COLOR_BUFFER_BIT);

		var theta = performance.now() / 1000;
		gl.uniform1f(thetaLoc, theta);

		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

		requestAnimationFrame(renderSquare);
	}

	renderSquare();
}

function moveCanvas() {
	// 获取用户输入的 X 和 Y 坐标
	var xPos = parseFloat(document.getElementById("xPos").value);
	var yPos = parseFloat(document.getElementById("yPos").value);

	// 将 Canvas 平移到用户指定的位置
	var canvas = document.getElementById("rot-canvas");
	canvas.style.position = "absolute"; // 确保 canvas 能够绝对定位
	canvas.style.transform = `translate(${xPos}px, ${yPos}px)`; // 使用 CSS transform 实现平移
}