我想将画布鼠标坐标传递给一个以鼠标坐标为中心交互式生成圆形的函数.因此,我正在使用以下函数进行规范化:
var mousePositionX = (2*ev.clientX/canvas.width) - 1;
var mousePositionY = (2*ev.clientY/(canvas.height*-1)) + 1;
但是,这仅适用于屏幕中心.当移动鼠标时,光标不再位于圆圈的中心: 请参见此处的图片
鼠标光标从屏幕中心移开的距离越远,它与圆圈中心的距离就越大.这是一些相关的代码:
HTML
body {
border: 0;
margin: 0;
}
/* make the canvas the size of the viewport */
canvas {
width: 100vw;
height: 100vh;
display: block;
}
...
<body onLoad="main()">
<canvas id="glContext"></canvas>
</body>
SHADER
<script id="vShaderCircle" type="notjs">
attribute vec4 a_position;
uniform mat4 u_viewMatrix;
void main(){
gl_Position = u_viewMatrix * a_position;
}
</script>
JS
function main(){
// PREPARING CANVAS AND WEBGL-CONTEXT
var canvas = document.getElementById("glContext"); …