1

我刚刚开始学习javascript和canvas，所以如果这是一些简单的错误我很抱歉，但现在我不知道它会是什么。

因此，我正在编写一个2d 火车模拟器，并在尝试实现 SAT 时制作了一个雷达，它显示了刚刚看到的位置train_1和train_2相对于的位置train_0，将 train_n 框的角投影到另一列火车 SoA 的工作原理。

该函数绘制雷达背景：

function drawRadar() {
    rContext.rect(-rWidth/2*c,-rWidth/2*c,rWidth*c,rWidth*c);
    rContext.fill();

    rContext.beginPath();
    rContext.moveTo(-rWidth/2*c,0);
    rContext.lineTo(rWidth*c,0);
    rContext.moveTo(0,-rWidth/2*c);
    rContext.lineTo(0,rWidth*c);
    rContext.stroke();
}

这会绘制火车箱并对所有东西进行动画处理：

function animateRadar(){

    rContext.clearRect(-rWidth/2*c,-rWidth/2*c,rWidth*c,rWidth*c);
    drawRadar();

    if (trainCount!=null){

        if (poehavshiy) rContext.rotate(window["train_"+N].angle * toRad);

        for (var i=0;i<trainCount;i++){
            var box = window["train_"+i].box();

            var p1,p2,p3,p4;

            p1=XYtoBoxCoordinates(window["train_"+N],box[0][0],box[0][1]);
            p2=XYtoBoxCoordinates(window["train_"+N],box[1][0],box[1][1]);
            p3=XYtoBoxCoordinates(window["train_"+N],box[2][0],box[2][1]);
            p4=XYtoBoxCoordinates(window["train_"+N],box[3][0],box[3][1]);


            rContext.beginPath();
            rContext.moveTo(p1[0],p1[1]);
            rContext.lineTo(p2[0],p2[1]);
            rContext.lineTo(p3[0],p3[1]);
            rContext.lineTo(p4[0],p4[1]);
            rContext.lineTo(p1[0],p1[1]);
            rContext.stroke();
        }
    }

    requestAnimationFrame(animateRadar);
}

我无法理解的是为什么我在其中一列火车上得到了这个空白

请帮忙！

4

1 回答 1

0

您在转换方面做错了。我在里面尝试了这段代码drawRadar()，它删除了“空白”空间：

rContext.save();
rContext.setTransform(1, 0, 0, 1, 0, 0);
rContext.fillRect(0, 0, radar.width, radar.height);
rContext.restore();

这会将转换重置为身份并用黑色填充整个画布。请注意，您获得的空白实际上是网站的背景，因为您使用的是clearRect，它清除为透明颜色。

此外，这会删除空白，但这不是实际的解决方案。您必须修复您在转换中做错的任何事情。

于 2013-06-20T12:57:42.577 回答