Javascript Html画布在抚摸线条时闪烁身体{ 保证金：0； } img{ 显示：无； } var-worker=new-worker（“WebWorker.js”）； var W=窗内宽度； var H=窗内高度； var map=document.getEle_Javascript_Html_Html5 Canvas

Javascript Html画布在抚摸线条时闪烁身体{ 保证金：0； } img{ 显示：无； } var-worker=new-worker（“WebWorker.js”）； var W=窗内宽度； var H=窗内高度； var map=document.getEle

javascript html html5-canvas

Javascript Html画布在抚摸线条时闪烁身体{ 保证金：0； } img{ 显示：无； } var-worker=new-worker（“WebWorker.js”）； var W=窗内宽度； var H=窗内高度； var map=document.getEle,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,Html画布在抚摸线条时闪烁身体{ 保证金：0； } img{ 显示：无； } var-worker=new-worker（“WebWorker.js”）； var W=窗内宽度； var H=窗内高度； var map=document.getElementById（“mapImg”）； var cvs=document.getElementById（“画布”）； cvs.width=W； cvs.height=H； var ctx=cvs.getContext（“2d”）； var of

Html画布在抚摸线条时闪烁


身体{
保证金：0；
}
img{
显示：无；
}
var-worker=new-worker（“WebWorker.js”）；
var W=窗内宽度；
var H=窗内高度；
var map=document.getElementById（“mapImg”）；
var cvs=document.getElementById（“画布”）；
cvs.width=W；
cvs.height=H；
var ctx=cvs.getContext（“2d”）；
var offscreenCvs=document.createElement（“画布”）；
offscreenCvs.width=W；
offscreenCvs.高度=H；
var offscreenCtx=offscreenCvs.getContext（“2d”）；
var mapCvs=document.createElement（“画布”）；
var-mapCtx，mapData；
var-px=25；
var-py=0；
var pz=27；
var偏航=0；
变桨距=0；
var缓冲区=[]；
函数Start（）{
mapCvs.width=map.width；
mapCvs.height=map.height；
mapCtx=mapCvs.getContext（“2d”）；
drawImage（map，0,0）；
mapData=mapCtx.getImageData（0,0，map.width，map.height）；
worker.postMessage（[px，py，pz，偏航，俯仰，mapData]）；
}
var-delta=0；
var-dt=0；
var=false；
worker.onmessage=函数（e）{
dt=（performance.now（）-delta）/1000；
缓冲区=e.数据；
偏航+=dt*90；
如果（！已更新）{
requestAnimationFrame（更新）；
更新=真；
}
delta=性能。现在（）；
worker.postMessage（[px，py，pz，偏航，俯仰，mapData]）；
}
函数更新（）{
offscreenCtx.lineWidth=W/80；
var currentBuffer=缓冲区；
对于（var-dists=0；dists@Kaiido我说不通。@kaido我使用缓冲区变量，因为我听到rAF与同步更新gpu@Kaiido我没有看到“what update flag从不设为false”。@kaido但update（）函数中有requestAnimationFrame。itI的底部已经可以看到了（这次阅读后）每次工作人员一完成就复制整个地图的图像数据，而您只能传递它一次，这会消耗内存，而且一旦绘制缓冲区，就清除它会使缓冲区完全无用：只要地图数据没有更新，您就应该保留其上的最后一个图形，并使您的恢复日期函数a二叉一：要么重新绘制路径，要么直接绘制图像到最后一个状态。但这些都不是对您所描述内容的清晰解释，因此可能还有更多。
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <style>
    body{
    margin:0;
    }
    img{
    display:none;
    }
    </style>
</head>
<body onload="Start()">
<canvas id="canvas"></canvas>
<img id="mapImg" src="Img/map.png"/>
<script>
var worker = new Worker("WebWorker.js");

var W = window.innerWidth;
var H = window.innerHeight;

var map = document.getElementById("mapImg");

var cvs = document.getElementById("canvas");
cvs.width = W;
cvs.height = H;
var ctx = cvs.getContext("2d");

var offscreenCvs = document.createElement("canvas");
offscreenCvs.width = W;
offscreenCvs.height = H;
var offscreenCtx = offscreenCvs.getContext("2d");

var mapCvs = document.createElement("canvas");
var mapCtx,mapData;

var px=25;
var py=0;
var pz=27;
var yaw=0;
var pitch=0;

var buffer=[];

function Start(){
mapCvs.width = map.width;
mapCvs.height = map.height;
mapCtx = mapCvs.getContext("2d");
mapCtx.drawImage(map,0,0);
mapData = mapCtx.getImageData(0,0,map.width,map.height);
worker.postMessage([px,py,pz,yaw,pitch,mapData]);
}
var delta = 0;
var dt = 0;
var Updated=false;
worker.onmessage = function(e){
dt = (performance.now()-delta)/1000;
buffer = e.data;
yaw+= dt*90;
if(!Updated){
requestAnimationFrame(Update);
Updated = true;
}
delta = performance.now();
worker.postMessage([px,py,pz,yaw,pitch,mapData]);
}


function Update(){
offscreenCtx.lineWidth = W/80;
var currentBuffer = buffer;
for(var dists=0; dists<80; dists++){
offscreenCtx.strokeStyle = currentBuffer[dists][0];
offscreenCtx.beginPath();
offscreenCtx.moveTo(W/80*dists,H/2-200/currentBuffer[dists][1]*H);
offscreenCtx.lineTo(W/80*dists,H/2+200/currentBuffer[dists][1]*H);
offscreenCtx.closePath();
offscreenCtx.stroke();
}
//alert(currentBuffer[60][0]);
/*offscreenCtx.strokeStyle = "rgb(255,0,0)";
offscreenCtx.beginPath();
offscreenCtx.moveTo(0,0);
offscreenCtx.lineTo(100,100);
offscreenCtx.stroke();*/
ctx.clearRect(0,0,W,H);
ctx.drawImage(offscreenCvs,0,0);
offscreenCtx.clearRect(0,0,W,H);
requestAnimationFrame(Update);
}



</script>
</body>
</html>

onmessage=function(e){
    var pkg = e.data;
    postMessage(Raycast(pkg[0],pkg[1],pkg[2],pkg[3],pkg[4],pkg[5]));
    }

    var far = 100;

    function Raycast(x,y,z,yaw,pitch,mapData){
    var distances=[];
    var map = mapData.data;
    for(var rayYaw = yaw-40;rayYaw<yaw+40;rayYaw++){
    for(var l = 0;l<far;l+=1){
    fx = x+Math.round(Math.sin(rayYaw/180*Math.PI)*l);
    fz = z+Math.round(Math.cos(rayYaw/180*Math.PI)*l);
    if(fx<0||fx>mapData.width||fz<0||fz>mapData.height){
    let color = "rgb(255,255,255)";
    distances.unshift([color,Math.min(Math.hypot(fx-x,fz-z),far)*100*Math.cos((rayYaw-yaw)/180*Math.PI)]);
    break;
    }else if(map[Math.round(fx+fz*mapData.width)*4]!=255&&map[Math.round(fx+fz*mapData.width)*4+2]!=255&&map[Math.round(fx+fz*mapData.width)*4+2]!=255){
    let color = "rgb("+map[Math.round(fx+fz*mapData.width)*4]+","+map[Math.round(fx+fz*mapData.width)*4+1]+","+map[Math.round(fx+fz*mapData.width)*4+2]+")";
    distances.unshift([color,Math.min(Math.hypot(fx-x,fz-z),far)*100*Math.cos((rayYaw-yaw)/180*Math.PI)]);
    break;
    }
    }
    }
    return distances;
    }