我如何使fillstyle和stroke风格有效?

时间:2017-03-30 17:59:01

标签: javascript html5-canvas

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

白色矩形的颜色设置是使用下一个声明中的黑色,我该如何解决?

1 个答案:

答案 0 :(得分:0)

在绘制所有形状之前使用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();