Javascript Canvas 更改绘图颜色

Question

我正在使用 HTML 和 JavaScript 制作一个简单的绘图板(Node 作为服务器端)，但我不知道如何制作一个颜色选择器来更改颜料的颜色。我知道如何对其进行硬编码，但这不是我想要的。

我想要类似按钮的东西，如果你点击一个按钮，它会变成一种特定的颜色。类似 4 个按钮的东西。

这是我的方法:

 //Function for when the mouse button is clicked.
canvas.onmousedown = function (e) {
    //The mouse button is clicked (true).
    mouse.click = true;
    context.strokeStyle = "red";
};

如您所见，我已将颜色硬编码为红色。

这是我的完整 JavaScript 代码。 HTML 文档只包含一个元素“canvas”。

//"DOMContetLoaded tells the browser then the HTML page has finished loading.
document.addEventListener("DOMContentLoaded", function () {
    //Add standard mouse functions.
    var mouse = {
        click: false,
        move: false,
        pos: { x: 0, y: 0 },
        pos_prev: false
    };

    //Get the CanvasWhiteboard elements by it's ID from the HTML page. We need this to be able to draw.
    var canvas = document.getElementById('whiteboard');
    //The whiteboard is in 2D with the width and height being the dimensions of the window.
    var context = canvas.getContext('2d');
    var width = window.innerWidth;
    var height = window.innerHeight;

    //The client connects to the server.
    var socket = io.connect();

    //The width and height of the whiteboard equals the window width and height.
    canvas.width = width;
    canvas.height = height;

    // Function for when the mouse button is pushed down.
    canvas.onmousedown = function (e) {
        // Set mouse click to true.
        mouse.click = true;
        context.strokeStyle = "red";
    };

    // Function for when the mouse button is lifted.
    canvas.onmouseup = function (e) {
        // Set mouse click to false.
        mouse.click = false;
    };

    // Function to check if the mouse is moved.
    canvas.onmousemove = function (e) {
        //The movement of the mouse at X and Y position is updated everytime the mouse moves.
        //The coordinates equals the coordinates relative to the window height and width.
        mouse.pos.x = e.clientX / width;
        mouse.pos.y = e.clientY / height;

        //The mouse is moving (true).
        mouse.move = true;
    };

    //Listen for draws from other clients.
    socket.on('draw_data', function (data) {
        //The line being drawn equals the data.
        var line = data.line;

        //Begin from the start of the drawn data.
        context.beginPath();

        //The thickness of the line.
        context.lineWidth = 2;

        //Next point to move to from the beginPath.
        context.moveTo(line[0].x * width, line[0].y * height);

        //End point to move to from the beginPath.
        context.lineTo(line[1].x * width, line[1].y * height);

        //The data is then drawn on the whiteboard.
        context.stroke();
    });

    //This loop is where our own drawings are sent to the server for the other clients to see.
    //It checks every 25ms if the mouse is being clicked and moved.
    function mainLoop() {
        if (mouse.click && mouse.move && mouse.pos_prev) {
            //Send our drawing to the server.
            socket.emit('draw_data', { line: [mouse.pos, mouse.pos_prev] });
            //The mouse movement is set to false (reset).
            mouse.move = false;
        }

        //The previous position now equals the position we just were at.
        mouse.pos_prev = { x: mouse.pos.x, y: mouse.pos.y };

        //This is where the 25ms is definend.
        setTimeout(mainLoop, 25);
    }

    //Being called recursively.
    mainLoop();
});

Answer 1

您也可以使用 CSS 来实现，单击按钮时将 Canvas 更改为红色

 canvas{
      background-color:red; 
 }

或者试试这个代码:

     //Function for when the mouse button is clicked.
canvas.onmousedown = function (e) {
    //The mouse button is clicked (true).
    mouse.click = true;
    ctx.fillStyle = 'red';
};