Javascript Canvas Игнорирование .beginPath () влияет на .fillStyle () - PullRequest
Новая
       17

Javascript Canvas Игнорирование .beginPath () влияет на .fillStyle ()

0 голосов
/ 31 марта 2019

Программа включает в себя прямоугольник с заданным цветом на основе кнопки, нажатой в 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>

1 Ответ

0 голосов
/ 31 марта 2019

MDN имеет это сказать .beginPath(), .save() и .restore():

Метод CanvasRenderingContext2D.beginPath () API Canvas 2D запускает новый путь, освобождая список подпутей. Вызывайте этот метод, если вы хотите создать новый путь.

Метод CanvasRenderingContext2D.save () API Canvas 2D сохраняет все состояние холста, помещая текущее состояние в стек.

Метод CanvasRenderingContext2D.restore () API Canvas 2D восстанавливает последнее сохраненное состояние холста, выдвигая верхнюю запись в стеке состояния чертежа. Если сохраненного состояния нет, этот метод ничего не делает.

Как вы можете видеть, .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;
...