<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>webgl中获取鼠标点击处的颜色</title>
<style>
#webgl {
border: 1px solid cornflowerblue;
}
</style>
<script src="./lib/util.js"></script>
</head>
<body>
<canvas
id="webgl"
width="400"
height="400"
style="
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
border: 1px solid black;
"
>
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<script>
let comments = ``;
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec4 a_Position;
void main()
{
gl_Position=vec4(a_Position.xy,0.0,1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
void main(){
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
</script>
<script>
/** @type {WebGLRenderingContext} */
let gl = util.getwebgl("webgl");
let v_shader = document.getElementById("shader-vs").innerText;
let f_shader = document.getElementById("shader-fs").innerText;
let canvas = document.getElementById("webgl");
let isOk = util.initShaders(gl, v_shader, f_shader);
let n = initVertexBuffers(gl);
if (isOk) {
gl.clearColor(0.0, 1.0, 0.0, 1.0); //设置背景色为“绿色”
gl.enable(gl.DEPTH_TEST); //开启深度检测
initEvent(n);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
} else {
console.error("初始化失败");
}
function initVertexBuffers(gl) {
// 顶点坐标
let vertices = new Float32Array([
// Vertex coordinates
-0.2, 0.2, -0.2, -0.2, 0.2, -0.2, 0.2, 0.2,
]);
// 顶点索引
let indices = new Uint8Array([
// Indices of the vertices
0, 1, 2, 0, 2, 3,
]);
if (!util.initArrayBuffer(gl, vertices, 2, gl.FLOAT, "a_Position")) {
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, null);
let indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
return indices.length;
}
//绑定鼠标点击事件
function initEvent(n) {
canvas.onmousedown = function (ev) {
var x = ev.clientX;
var y = ev.clientY;
var rect = ev.target.getBoundingClientRect();
if (
rect.left <= x &&
x < rect.right &&
rect.top <= y &&
y < rect.bottom
) {
var x_in_canvas = x - rect.left;
var y_in_canvas = rect.bottom - y;
var pixels = new Uint8Array(4);
draw();
//根据点击值，获取对应点击位置的颜色值
gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
let red = pixels[0];
let green = pixels[1];
let blue = pixels[2];
let alpha = pixels[3];
console.log(pixels);
}
};
}
function draw() {
//没有下述2句，图像存在，但是gl.readPixels()拿到的值都是0
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //没有这1句，背景会消失
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); //没有这1句，则矩形消失
}
</script>
</body>
</html>
