时间戳

首页 > 解决方案 > Javascript Canvas 忽略 .beginPath() 影响 .fillStyle()

javascript - Javascript Canvas 忽略 .beginPath() 影响 .fillStyle()

问题描述

该程序包括一个具有给定颜色的矩形，该颜色基于在 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>

标签： javascripthtml5-canvasfill

解决方案

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

Canvas 2D API的CanvasRenderingContext2D.beginPath()方法通过清空子路径列表来启动新路径。当您要创建新路径时调用此方法。

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

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

如您所见，.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;

推荐阅读