画布清除未编程的矩形

Question

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

所以，我正在编写一个2d train simulator，在尝试实施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);
}

我无法理解的是为什么我要在其中一列火车上获得这个空白区域

请帮忙！

Answer 1

你在改造中做错了什么。我在drawRadar()中尝试了此代码，它删除了“白色”空格：

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

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

此外，这会删除空白区域，但这不是一个实际的解决方案。你必须修改你在转换时做错的事情。