Question

<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>

我正在尝试制作一个有颜色的raycaster。但是，当我尝试划线时，有些线条闪烁或不可见。（红色闪烁，黄色是不可见的）

（offscreenCtx.beginPath（）和 offscreenCtx.stroke（）在for循环中以改变颜色。）

这是我的网络工作者代码

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;
    }

map.png

有没有人可以告诉我什么是错的？

抚摸行

0 个答案: