<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="../lib/index.js"></script> <style> * { margin: 0; padding: 0; } #canvas { display: block; background-color: gray; } body::after { content: ''; display: block; width: 1px; height: 400px; background-color: red; position: absolute; top: 0; left: 200px; } body::before { content: ''; display: block; width: 400px; height: 1px; background-color: #000; position: absolute; top: 200px; left: 0; } </style> <body> <canvas id="canvas" width="400" height="400"></canvas> </body> <script> /** @type {HTMLCanvasElement} */ const ctx = document.getElementById('canvas'); const gl = ctx.getContext("webgl") const VERTEX_SHADER_SOURCE = ` attribute vec4 aPosition; void main(){ gl_Position=aPosition; gl_PointSize=50.0; } `; const FGRAGMENT_SHARDER_SOURCE = ` void main(){ gl_FragColor=vec4(1.0,0.0,0.0,1.0); } `; const program = initShader(gl, VERTEX_SHADER_SOURCE, FGRAGMENT_SHARDER_SOURCE); //获取aPosition变量的内存地址 const aPosition = gl.getAttribLocation(program, 'aPosition'); ctx.onclick = (e) => { //获取当前点击位置 const { clientX, clientY } = e; //获取元素距离浏览器的边距 const domRect = e.target.getBoundingClientRect(); const { left, top } = domRect; //获取点击的位置距离画布的左边和顶部 const domx = clientX - left; const domy = clientY - top; //获取画布的中心点 const [centerX, centerY] = [ctx.width / 2, ctx.height / 2]; //转为webgl坐标系 const clickX = (domx - centerX) / centerX; const clickY = (centerY - domy) / centerY; gl.vertexAttrib2f(aPosition, clickX, clickY); gl.drawArrays(gl.POINTS, 0, 1) } </script> </html>
正文
鼠标点击位置转webgl坐标系
文章版权声明:除非注明,否则均为
譬如朝露_策温技术开发工作室博客原创文章,转载或复制请以超链接形式并注明出处。
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站,联系方式11523518。
热评文章
标签列表
热门文章
友情链接