javascript - 我如何使填充样式和描边样式起作用？

Question

//clear screen
function CLS() {
    draw.fillStyle = "#ffffff";
    draw.strokeStyle = "#ffffff"; //to white
    draw.rect(0, 0, 300, 150); //position 
    draw.stroke();
    draw.fill(); //draw it
}
//screen update
function UpdateScreen() {
    //draw ground
    draw.fillStyle = "#000000";
    draw.strokeStyle = "#000000"; //to black
    draw.rect(0, 100, 300, 25); //position    
    draw.stroke();
    draw.fill(); //draw it
    //draw guy
    draw.fillStyle = "#c7c7c7";
    draw.strokeStyle = "#c7c7c7"; //to grey
    draw.beginPath();
    draw.arc(guyX, guyY, 15, 0, 2 * Math.PI); //position
    draw.fill();
    draw.stroke(); //draw it
}
CLS();
UpdateScreen();

白色矩形的颜色设置使用下一个声明中的黑色，我该如何解决这个问题？

Answer 1

使用beginPath()方法，在绘制所有形状之前。

//clear screen
function CLS() {
    draw.beginPath();
    draw.fillStyle = "#ffffff";
    draw.strokeStyle = "#ffffff"; //to white
    draw.rect(0, 0, 300, 150); //position 
    draw.stroke();
    draw.fill(); //draw it
}
//screen update
function UpdateScreen() {
    //draw ground
    draw.beginPath();
    draw.fillStyle = "#000000";
    draw.strokeStyle = "#000000"; //to black
    draw.rect(0, 100, 300, 25); //position    
    draw.stroke();
    draw.fill(); //draw it
    //draw guy
    draw.beginPath();
    draw.fillStyle = "#c7c7c7";
    draw.strokeStyle = "#c7c7c7"; //to grey
    draw.arc(guyX, guyY, 15, 0, 2 * Math.PI); //position
    draw.fill();
    draw.stroke(); //draw it
}
CLS();
UpdateScreen();