Javascript Canvas 忽略影响 .fillStyle() 的 .beginPath()

Question

该程序包含一个具有给定颜色的矩形，该矩形基于在 HTML 中单击的按钮，将颜色传递给该方法。还有另一个文本字段和按钮可将文本添加到此矩形，但文本的颜色并不独立于矩形颜色。这意味着矩形总是被设置为文本的任何颜色。我想要做的是选择包的颜色，然后选择包上的文字，同时保持包的颜色相同。我认为 context.beginPath() 应该允许它们分开，但它似乎并没有这样做。对我应该做什么有帮助吗？

JavaScript 文件

function drawCanvas(color) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var logoText = document.getElementById("logoText").value;


    //Draws the bag and sets the color
    context.beginPath()
    context.fillStyle = color;
    context.fillRect(10,30,200,200);

    //Draws the border outline of the bag
    context.beginPath();
    context.lineWidth = "2";
    context.rect(10,30,200,200);
    context.stroke()

    //Draws the handle
    context.beginPath();
    context.lineWidth = "2";
    context.rect(85,5,50,25);
    context.stroke();

    context.save();
    context.restore();

    context.beginPath();
    context.font = "24px Times";
    context.fillStyle = "black";
    context.textAlign = "center";
    context.fillText(logoText, canvas.width/2, canvas.width/2);

}
window.onload = drawCanvas;

HTML 文件

<!DOCTYPE html>

<html lang = "en">

    <head>

        <title>mas00266 - Plastic Bag Inc. - Order Page</title>
        <link rel = "stylesheet" href = "stylesheet.css" />
        <script type = "text/javascript" src = "script.js"></script>
        <meta charset = "UTF-8">    

    </head>

    <body>

        <div class = "flex-container">
            <div class = "box">
                <h1 id = "left"> The Bag Company </h1>
            </div>
            <div class = "box">
                <h3 style = "text-align: right; padding: 15px"> Welcome to our orders page! </h3>
            </div>
        </div>

        <nav>

            <ul class = "navStyle">
                <li><a href = "Homepage.html">Home</a></li>
                <li  class = "active"><a href = "#">Order</a></li>
                <li><a href = "#">Contact</a></li>
                <li><a href = "#">Login</a></li>
            </ul>

        </nav>

            <br>
            <br>
            <canvas id = "myCanvas" width = "220" height = "240"></canvas>
            <br>
            <br>
            <h4>Choose your bag color:</h4>
            <button type = "button" onclick = "drawCanvas('black')">Black</button>
            <button type = "button" onclick = "drawCanvas('white')">White</button>
            <button type = "button" onclick = "drawCanvas('red')">Red</button>
            <button type = "button" onclick = "drawCanvas('blue')">Blue</button>
            <button type = "button" onclick = "drawCanvas('green')">Green</button>
            <br>
            <h4>Enter text on the bag:</h4>
            <input id = "logoText" type = "text" name = "textInputField" size = "12">
            <button type = "button" onclick = "drawCanvas()">Add Text</button>



    </body>

</html>

Answer 1

MDN 在 .beginPath(), .save(), and .restore() 上有这样的说法：

The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.

The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the canvas by pushing the current state onto a stack.

The CanvasRenderingContext2D.restore() method of the Canvas 2D API restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.

如您所见，.beginPath() 除了设置新路径外，与绘图上下文没有任何关系。相反，您将使用 .save() 为当前上下文创建一种保存点（其中包括所有当前绘图参数，例如颜色、图案和变换），对该上下文进行更改并使用，然后使用 .restore() 通过恢复到之前的保存点从这些更改中恢复。

基于此以及您的目标，您的代码应如下所示：

function drawCanvas(color) {
    // onload doesn't call this with an argument so make sure we have a default
    color = color || "blue";

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var logoText = document.getElementById("logoText").value;

    //Set various base styles in our drawing context
    context.fillStyle = "black";
    context.font = "24px Times";
    context.textAlign = "center";
    context.lineWidth = "2";

    //Draws the bag and sets the color
    context.save(); // save current drawing context state to the stack
    context.fillStyle = color;
    context.fillRect(10,30,200,200);
    content.restore(); // recover to previous saved state and remove it from the stack

    //Draws the border outline of the bag
    context.rect(10,30,200,200);
    context.stroke()

    //Draws the handle
    context.rect(85,5,50,25);
    context.stroke();

    context.fillText(logoText, canvas.width/2, canvas.width/2);
}
window.onload = drawCanvas;

Javascript Canvas 忽略影响 .fillStyle() 的 .beginPath()

Javascript Canvas Ignoring .beginPath() affecting .fillStyle()

javascript

fill

html5-canvas