WebGL 鼠标响应 如何画爱心

利用WebGL实现了鼠标点击网页内任意位置绘制爱心

下面展示 function addheart(x,y)。

function addheart(x,y){
 var rect=canvas.getBoundingClientRect();
 x=x-rect.left;
 y=canvas.height-(y-rect.top);
 
 var vertices=[];
 var color=[];
 
 //心的大小
 var Size = 2;
 
 
 for(var i = 0; i < 36; i++)
 {
  var Angle = 2*i*Math.PI/36;
  //点的坐标
  var x1 = Size * 16 * Math.pow(Math.sin(Angle),3);
  
  var y1 = Size * (13 * Math.cos(Angle) - 5 * Math.cos(2 * Angle) - 2 * Math.cos(3 * Angle) - Math.cos(4 * Angle));
  
  vertices[i]=vec3(x1,y1,0);
 }
 var data=[];
 
 for(var i=0;i<36;i++){
  data.push(add(vec3(x,y,0),vertices[i]));
  data.push(vec3(1.0, Math.random(), Math.random()));
  //data.push(vec3(x,y,0));
  //data.push(vec3(1.0,0.0,0.0));
 
 }
 
 gl.bufferSubData(gl.ARRAY_BUFFER,
 count*2*3*3*Float32Array.BYTES_PER_ELEMENT,
 flatten(data));
 vertices.length=0;
 color.length=0;
 count+=18;
 requestAnimFrame(render);
}

x1,y1构成了❤的路径

for(var i = 0; i < 36; i++)
 {
  var Angle = 2*i*Math.PI/36;
  //点的坐标
  var x1 = Size * 16 * Math.pow(Math.sin(Angle),3);
  
  var y1 = Size * (13 * Math.cos(Angle) - 5 * Math.cos(2 * Angle) - 2 * Math.cos(3 * Angle) - Math.cos(4 * Angle));
  
  vertices[i]=vec3(x1,y1,0);
 }

下面展示鼠标点击响应事件。

canvas.onclick=function(){
  addheart(event.clientX,event.clientY);
};

具体的效果实现

本程序的源代码包在：
程序代码下载地址