弯道超车：
盒子模型：
又称CSS 盒模型，包含
content、padding、border和margin四个部分。
clientWidth、scrollWidth、offsetWidth之间的区别：
offsetWidth：包含内容、padding、border和滚动条的宽度（如果有滚动条），但不包含margin。
clientWidth：元素的可见内容区域和padding的宽度，但不会包括边框和滚动条。
scrollWidth：包含内容的完整宽度（包括溢出部分,即滚动条），但不含border,margin。
webGL坐标系：
WebGL 采用的标准坐标系范围为 [−1,1]
X 轴：水平轴，从左到右，范围为 -1 到 1。
Y 轴：垂直轴，从下到上，范围为 -1 到 1。
Z 轴：深度轴，从屏幕前到后，靠近观察者的为 -1，远离观察者的为 1。
html和脚本js:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><script src="./lib/webgl-utils.js"></script><script src="./lib/webgl-debug.js"></script><script src="./lib/cuon-utils.js"></script><script src="./js/clickPoint.js"></script>
</head><body onload="main()"><canvas id="canvas" width="400" height="400"></canvas>
</body></html>
// clickPoint.js
var vshader_source = `
attribute vec4 a_Position;
void main(){gl_Position = a_Position;gl_PointSize = 10.0;
}
`
var fshader_source = `
void main(){gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`
function main () {var canvas = document.getElementById('canvas')var gl = getWebGLContext(canvas)if (!gl) {console.log('获取webGl绘图上下文失败')return}if (!initShaders(gl, vshader_source, fshader_source)) {console.log('初始化着色器失败')return}var a_Position = gl.getAttribLocation(gl.program, 'a_Position')if (a_Position < 0) {console.log('获取attribute变量a_Position失败')return}// 注册鼠标点击事件// function (ev) { ... } 是一个匿名函数，作为参数传递给click函数,匿名函数可以访问main函数中的变量canvas.onmousedown = function (ev) {click(ev, gl, canvas, a_Position)};gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);gl.clearColor(0.0, 0.0, 0.0, 1.0)gl.clear(gl.COLOR_BUFFER_BIT)gl.drawArrays(gl.POINTS, 0, 1)
}
var g_ponints = []; // 存储点击位置的数组
// 获取鼠标点击位置并存储在一个数组中
function click (ev, gl, canvas, a_Position) {// 鼠标点击浏览器的坐标var x = ev.clientX; // 鼠标点击位置的x坐标var y = ev.clientY; // 鼠标点击位置的y坐标var rect = ev.target.getBoundingClientRect()// 画布的原点rect.left 和 rect.top// canvas.width/2 和 canvas.height/2 是canvas的中心点 即WedGL坐标系的中心点x = ((x - rect.left) - canvas.height / 2) / (canvas.height / 2)y = (canvas.width / 2 - (y - rect.top)) / (canvas.width / 2)// 将坐标存储在数组中// g_ponints.push(x);// g_ponints.push(y);g_ponints.push([x, y])// 清空canvasgl.clear(gl.COLOR_BUFFER_BIT)// 根据数组中的点绘制图形for (var i = 0; i < g_ponints.length; i += 2) {// 将点的位置传输到a_Position变量中// gl.vertexAttrib3f(a_Position, g_ponints[i], g_ponints[i + 1], 0.0);var xy = g_ponints[i]gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0);// 绘制点gl.drawArrays(gl.POINTS, 0, 1)}
}最终效果：
