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()和.restore()上有这样的说法：

Canvas 2D API的 CanvasRenderingContext2D.beginPath（）方法通过清空子路径列表来启动新路径。要创建新路径时，请调用此方法。

Canvas 2D API的 CanvasRenderingContext2D.save（）方法通过将当前状态压入堆栈来保存画布的整个状态。

Canvas 2D API的 CanvasRenderingContext2D.restore（）方法通过弹出绘图状态堆栈中的顶部条目来恢复最近保存的画布状态。如果没有保存状态，则此方法不执行任何操作。

如您所见，.beginPath()与绘制上下文无关，除了设置新路径外。相反，您可以使用.save()为当前上下文创建一种保存点（包括所有当前图形参数，例如颜色，图案和变换），对上下文进行更改并使用，然后使用{ {1}}通过恢复到先前的保存点来从这些更改中恢复。

基于此以及您的目标，您的代码应类似于：

.restore()

Javascript Canvas忽略.beginPath（）影响.fillStyle（）

1 个答案: