Javascript 为什么我不能画两种不同的颜色？HTML5画布

我目前正在练习typescript，我决定制作一个HTML5画布着色应用程序。到目前为止，除了一件事之外，一切都在工作，那就是当我在画布上涂色并更改笔划颜色时，它会更改以前制作的所有笔划

所以我画一条黑线，然后把颜色改成红色，整个画布将把线的颜色从黑色改成红色，而不是把所有的新线都变成红色

这是我的密码

class DrawingApp {
    private canvas: HTMLCanvasElement;
    private context: CanvasRenderingContext2D;
    private paint: boolean;

    // BUTTONS
    private clear: HTMLButtonElement;
    
    private black: HTMLButtonElement;
    private red: HTMLButtonElement;
    private green: HTMLButtonElement;
    private blue: HTMLButtonElement;

    // TOGGLES
    private blackActive: boolean;
    private redActive: boolean;
    private greenActive: boolean;
    private blueActive: boolean;

    private clickX: number[] = [];
    private clickY: number[] = [];
    private clickDrag: boolean[] = [];

    constructor() {
        let canvas = document.getElementById('canvas') as HTMLCanvasElement;
        let context = canvas.getContext('2d') as CanvasRenderingContext2D;
        let clear = document.getElementById('clear') as HTMLButtonElement;
        
        let black = document.getElementById('black') as HTMLButtonElement;
        let red = document.getElementById('red') as HTMLButtonElement;
        let green = document.getElementById('green') as HTMLButtonElement;
        let blue = document.getElementById('blue') as HTMLButtonElement;

        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.strokeStyle = 'black';
        context.lineWidth = 1;

        this.canvas = canvas;
        this.context = context;
        this.clear = clear;
        this.black = black;
        this.red = red;
        this.green = green;
        this.blue = blue;

        // Set user not painting by default
        this.paint = false;
        // Default Color toggles
        this.blackActive = true;
        this.redActive = false;
        this.greenActive = false;
        this.blueActive = false;

        this.redraw();
        this.createUserEvents();
    }

    private createUserEvents() {
        let canvas = this.canvas;
        let clear = this.clear;
        let black = this.black;
        let red = this.red;
        let green = this.green;
        let blue = this.blue;

        canvas.addEventListener("mousedown", this.pressEventHandler);
        canvas.addEventListener("mousemove", this.dragEventHandler);
        canvas.addEventListener("mouseup", this.releaseEventHandler);
        canvas.addEventListener("mouseout", this.cancelEventHandler);

        canvas.addEventListener("touchstart", this.pressEventHandler);
        canvas.addEventListener("touchmove", this.dragEventHandler);
        canvas.addEventListener("touchend", this.releaseEventHandler);
        canvas.addEventListener("touchcancel", this.cancelEventHandler);

        clear.addEventListener("click", this.clearEventHandler);
        black.addEventListener("click", this.toggleBlack);
        red.addEventListener("click", this.toggleRed);
        green.addEventListener("click", this.toggleGreen);
        blue.addEventListener("click", this.toggleBlue);
    }

    private redraw() {
        let clickX = this.clickX;
        let context = this.context;
        let clickDrag = this.clickDrag;
        let clickY = this.clickY;
        
        if (this.blackActive) {
            for (let i = 0; i < clickX.length; ++i) {
                context.beginPath();
                if (clickDrag[i] && i) {
                    context.moveTo(clickX[i - 1] -1, clickY[i - 1]);
                } else {
                    context.moveTo(clickX[i] -1, clickY[i]);
                }
    
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.strokeStyle = "#000";
                context.stroke();
            }
        }
        if(this.redActive) {
            for (let i = 0; i < clickX.length; ++i) {
                context.beginPath();
                if (clickDrag[i] && i) {
                    context.moveTo(clickX[i - 1] -1, clickY[i - 1]);
                } else {
                    context.moveTo(clickX[i] -1, clickY[i]);
                }
    
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.strokeStyle = "#FF0000";
                context.stroke();
            }
        } 
        if(this.greenActive) {
            for (let i = 0; i < clickX.length; ++i) {
                context.beginPath();
                if (clickDrag[i] && i) {
                    context.moveTo(clickX[i - 1] -1, clickY[i - 1]);
                } else {
                    context.moveTo(clickX[i] -1, clickY[i]);
                }

                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.strokeStyle = "#00FF00";
                context.stroke();
            }
        } 
        if (this.blueActive) {
            for (let i = 0; i < clickX.length; ++i) {
                context.beginPath();
                if (clickDrag[i] && i) {
                    context.moveTo(clickX[i - 1] -1, clickY[i - 1]);
                } else {
                    context.moveTo(clickX[i] -1, clickY[i]);
                }
    
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.strokeStyle = "#0000FF";
                context.stroke();
            }
        }
    }

    private addClick(x: number, y: number, dragging: boolean) {
        this.clickX.push(x);
        this.clickY.push(y);
        this.clickDrag.push(dragging);
    }

    private clearCanvas() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.clickX = [];
        this.clickY = [];
        this.clickDrag = [];
    }

    private clearEventHandler = () => {
        this.clearCanvas();
    }

    private releaseEventHandler = () => {
        this.paint = false;
        this.redraw();
    }

    private cancelEventHandler = () => {
        this.paint = false;
    }

    private pressEventHandler = (e: MouseEvent | TouchEvent) => {
        let mouseX = (e as TouchEvent).changedTouches ? (e as TouchEvent).changedTouches[0].pageX : (e as MouseEvent).pageX;
        let mouseY = (e as TouchEvent).changedTouches ? (e as TouchEvent).changedTouches[0].pageY : (e as MouseEvent).pageY;

        mouseX -= this.canvas.offsetLeft;
        mouseY -= this.canvas.offsetTop;

        this.paint = true;
        this.addClick(mouseX, mouseY, false);
        this.redraw();
    }

    private dragEventHandler = (e: MouseEvent | TouchEvent) => {
        let mouseX = (e as TouchEvent).changedTouches ? (e as TouchEvent).changedTouches[0].pageX : (e as MouseEvent).pageX;
        let mouseY = (e as TouchEvent).changedTouches ? (e as TouchEvent).changedTouches[0].pageY : (e as MouseEvent).pageY;

        mouseX -= this.canvas.offsetLeft;
        mouseY -= this.canvas.offsetTop;

        if (this.paint) {
            this.addClick(mouseX, mouseY, true);
            this.redraw();
        }

        e.preventDefault();
    }

    private toggleBlack = () => {
        if (this.blackActive === false) {
            this.blackActive = true;
            this.redActive = false;
            this.greenActive = false;
            this.blueActive = false;
            this.redraw();
        }
    }

    private toggleRed = () => {
        if (this.redActive === false) {
            this.blackActive = false;
            this.redActive = true;
            this.greenActive = false;
            this.blueActive = false;
            this.redraw();
        }
    }

    private toggleGreen = () => {
        if (this.greenActive === false) {
            this.blackActive = false;
            this.redActive = false;
            this.greenActive = true;
            this.blueActive = false;
            this.redraw();
        } 
    }
    
    private toggleBlue = () => {
        if (this.blueActive === false) {
            this.blackActive = false;
            this.redActive = false;
            this.greenActive = false;
            this.blueActive = true;
            this.redraw();
        }
    }
}

new DrawingApp();

class-DrawingApp{
私有画布：HTMLCanvasElement；
私有上下文：CanvasRenderingContext2D；
私人绘画：布尔；
//钮扣
私有清除：HTMLButtonElement；
私有黑色：HTMLButtoneElement；
私有红色：HTMLButtoneElement；
私有绿色：HTMLButtoneElement；
私有蓝色：HTMLButtoneElement；
//切换
私有blackActive：布尔值；
私有redActive：布尔值；
private-greenActive：布尔值；
私有blueActive：布尔值；
private clickX:number[]=[]；
私有clickY:number[]=[]；
私有单击拖动：布尔值[]=[]；
构造函数（）{
让canvas=document.getElementById（'canvas'）作为HTMLCanvasElement；
让context=canvas.getContext（'2d'）作为CanvasRenderingContext2D；
let clear=document.getElementById（'clear'），作为HTMLButtoneElement；
让black=document.getElementById（'black'）作为HTMLButtoneElement；
让red=document.getElementById（'red'）作为HTMLButtoneElement；
让green=document.getElementById（'green'）作为HTMLButtoneElement；
让blue=document.getElementById（'blue'）作为HTMLButtoneElement；
context.lineCap='round'；
context.lineJoin='round'；
context.strokeStyle='black'；
context.lineWidth=1；
this.canvas=画布；
this.context=上下文；
this.clear=clear；
黑=黑；
这个红色=红色；
这个.绿色=绿色；
蓝色=蓝色；
//默认情况下设置用户不绘制
这个.paint=false；
//默认颜色切换
this.blackActive=true；
this.redActive=false；
this.greenActive=false；
this.blueActive=false；
这个；
这是createUserEvents（）；
}
私有createUserEvents（）{
让canvas=this.canvas；
让我明白；
让黑色=这个；
让red=this.red；
让绿色=这个；
让blue=this.blue；
canvas.addEventListener（“mousedown”，this.pressEventHandler）；
canvas.addEventListener（“mousemove”，this.dragEventHandler）；
canvas.addEventListener（“mouseup”，this.releaseEventHandler）；
canvas.addEventListener（“mouseout”，this.cancelEventHandler）；
canvas.addEventListener（“touchstart”，this.pressEventHandler）；
canvas.addEventListener（“touchmove”，this.dragEventHandler）；
canvas.addEventListener（“touchend”，this.releaseEventHandler）；
canvas.addEventListener（“touchcancel”，this.cancelEventHandler）；
clear.addEventListener（“单击”，this.clearEventHandler）；
black.addEventListener（“单击”，this.toggleBlack）；
红色。addEventListener（“单击”，this.toggleRed）；
green.addEventListener（“单击”，this.toggleGreen）；
blue.addEventListener（“单击”，this.toggleBlue）；
}
私人重画（）{
让clickX=this.clickX；
让context=this.context；
让clickDrag=this.clickDrag；
让clickY=this.clickY；
如果（此.blackActive）{
for（设i=0；i