html5 雷达,最强大脑雷达探点HTML5版本(示例代码)

雷达探点 by 知鱼之乐

body{background:#000;color:#f0f0f0;}canvas{background:#000;cursor:default;}div{margin:auto;width:1100px;}select{margin-right:20px;}button{margin:10px 10px 10px 0;padding:3px 5px;color:#000;cursor:pointer;}button[disabled=disabled]{color:#999;cursor:default;}

雷达探点

点数量：

1000

2000

3000

可视角：

15

25

35

速度：

慢

中

快

彩色点：

生成点

开始找

找到了

(x,y)

varcanvas, ctx;varlineData, pointData1, pointData2;varpoint=[];varpointSize= 3;varpointNum= 10;varhide= 0;varpointColor= 1, color=[‘white‘,‘green‘,‘blue‘,‘red‘,‘purple‘];varspeed= 1, angle= 35, ang= 0;varbtInit, btFind, btMarker;varraf, find= false;varts, te;

window.οnlοad= function(){

canvas=document.querySelector(‘#canvas‘);

ctx=canvas.getContext(‘2d‘);

btInit=document.querySelector(‘#btInit‘);

btFind=document.querySelector(‘#btFind‘);

btMarker=document.querySelector(‘#btMarker‘);

btInit.addEventListener(‘click‘,function(){

btInit.setAttribute(‘disabled‘,‘disabled‘);

canvas.style.cursor= ‘default‘;

init();

});

btFind.addEventListener(‘click‘,function(){

btInit.setAttribute(‘disabled‘,‘disabled‘);

btFind.setAttribute(‘disabled‘,‘disabled‘);

btMarker.removeAttribute(‘disabled‘);

canvas.style.cursor= ‘default‘;

cancelAnimationFrame(raf);

angle=document.querySelector(‘#angle‘).value* 1;

speed=document.querySelector(‘#speed‘).value* 1;

ts= newDate().getTime();

raids();

});

btMarker.addEventListener(‘click‘,function(){

btFind.removeAttribute(‘disabled‘);

canvas.style.cursor= ‘crosshair‘;

cancelAnimationFrame(raf);

te= newDate().getTime();

marker();

});

canvas.addEventListener(‘mousemove‘,function(event){varx=Math.floor(event.clientX- this.getBoundingClientRect().left)- 260;vary=Math.floor(event.clientY- this.getBoundingClientRect().top)- 260;

x=x>260 ?x-520: x;

document.querySelector(‘p‘).textContent= ‘(‘ +x+ ‘,‘ + -y+ ‘)‘;

})

canvas.addEventListener(‘click‘,function(event){if(!find)return;

btInit.removeAttribute(‘disabled‘);

btFind.setAttribute(‘disabled‘,‘disabled‘);

btMarker.setAttribute(‘disabled‘,‘disabled‘);varx=Math.floor(event.clientX- this.getBoundingClientRect().left);vary=Math.floor(event.clientY- this.getBoundingClientRect().top);

point.push([x,y,0]);

console.log(x+ ‘,‘ +y)

ctx.lineWidth= 3;

ctx.strokeStyle= ‘orange‘;

ctx.strokeRect(x-10,y-10,20,20);

find= false;

check();

});

}functioninit(){

pointNum=document.querySelector(‘#pointNum‘).value* 1;if(document.querySelector(‘#pointColor‘).checked) pointColor=color.length;elsepointColor= 1;

ctx.clearRect(0,0,1050,520);

ctx.lineWidth= 1;

ctx.strokeStyle=‘#ccc‘;

lineData=ctx.createImageData(520,520);

pointData1=ctx.createImageData(520,520);

pointData2=ctx.createImageData(520,520);varp= 250, k= 0;

point=[];

hide=Math.floor(Math.random()*pointNum);vardraw=setInterval(function(){varx,y;for(vari= 0; i< 30; i++) {do{

x=Math.floor(Math.random()* 500 - 250);

y=Math.floor(Math.random()* 500 - 250);

}while(x*x+y*y>p*p)varc=Math.floor(Math.random()*pointColor);if(drawPoint(x,y,c)){

k++;

point.push([x,y,c])

}if(k>=pointNum) {

clearInterval(draw);

pointData1=ctx.getImageData(0,0,520,520);

pointData2=ctx.getImageData(520,0,520,520);

btInit.removeAttribute(‘disabled‘);

btFind.removeAttribute(‘disabled‘);//drawLine();

break;

}

};

},30);

}functiondrawLine(){

ctx.lineWidth= 1;

ctx.save();

ctx.translate(260,260);for(vari= 0; i< 6; i++) {

ctx.rotate(Math.PI*30/180);

ctx.moveTo(-260,0);

ctx.lineTo(260,0);

ctx.stroke();

};

ctx.restore();

ctx.save();

ctx.translate(260+520,260);for(vari= 0; i< 3; i++) {

ctx.beginPath();

ctx.arc(0,0,60+i*100,0,2*Math.PI);

ctx.stroke();

};for(vari= 0; i< 6; i++) {

ctx.rotate(Math.PI*30/180);

ctx.moveTo(-260,0);

ctx.lineTo(260,0);

ctx.stroke();

};

ctx.restore();

}functiondrawPoint(x,y,c){varp=ctx.getImageData(260+x,260+y, pointSize,pointSize);varpc=p.data;for(vari= 0; i

}

};

ctx.fillStyle=color[c];

ctx.fillRect(260+x,260+y, pointSize,pointSize);if(hide!=point.length)

ctx.fillRect(260+x+520,260+y, pointSize,pointSize);return true;

}functionraids(){

ctx.clearRect(0,0,1050,520);

ctx.putImageData(pointData1,0,0);

ctx.fillStyle= ‘#000‘;

ctx.beginPath();

ctx.moveTo(260,260);

ctx.arc(260,260,255, Math.PI*ang/180, Math.PI * (360-angle + ang)/180);

ctx.fill();

ctx.putImageData(pointData2,520,0);

ctx.fillStyle= ‘#000‘;

ctx.beginPath();

ctx.moveTo(260+520,260);

ctx.arc(260+520,260,255, Math.PI*ang/180, Math.PI * (360-angle + ang)/180);

ctx.fill();

ang+=speed;

raf=window.requestAnimationFrame(raids);

}functionmarker(){

ctx.clearRect(0,0,1050,520);

ctx.putImageData(pointData1,0,0);

find= true;

}functioncheck(){

ctx.putImageData(pointData2,520,0);

ctx.strokeStyle= ‘red‘;

ctx.lineWidth= 3;

ctx.strokeRect(point[hide][0]-10+260,point[hide][1]-10+260,20,20);

ctx.strokeRect(point[hide][0]-10+260+520,point[hide][1]-10+260,20,20);if( Math.abs(point[hide][0]-point[pointNum][0])<10 &&Math.abs(point[hide][1]-point[pointNum][1])<10) {

alert(‘找到了！\n‘ + ‘用时：‘ +(te-ts)+ ‘毫秒‘);

}else{

alert(‘错误！\n‘ + ‘用时：‘ +(te-ts)+ ‘毫秒‘);

}

}