该程序包括一个具有给定颜色的矩形，该矩形基于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>
MDN对.beginPath()，.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;