如何使填充样式和描边样式工作

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();