Javascript html5画布颜色切换和线宽

基本上我有：

绘图效果很好，但我正在尝试添加不同的工具，如更改线宽和线颜色（我不知道如何使这些工作），最终我希望能够放置方框、大X和直线

编辑：当我选择不同的颜色或线宽时，它不会改变，需要帮助

var DrawingCommands = {LINE_TO:       "lineTo",
                   MOVE_TO:       "moveTo",
                   SET_THICKNESS: "setThickness",
                   SET_COLOR:     "setColor"};

---

对于不工作的厚度和颜色，尝试将其中一些变量更改为更精确的值：

/* Drawing on Paint App */
tmp_ctx.lineWidth = 5;
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
tmp_ctx.strokeStyle = '#0052CC';
tmp_ctx.fillStyle = '#0052CC';

关于不同的形状，我建议： 对于每个形状，添加带有键值的数组，如X形状的开始和结束位置。 如果用户onMouseDown保存第一个位置，并在绘图功能中为保存的第一个位置和鼠标当前位置绘制新形状（以查看当前形状的外观），onmousedup从鼠标向下添加第一个位置，从鼠标向上添加第二个位置，并将其添加到绘图对象数组中（如示例中的PPT）

更新-更多关于thcickness的解释： 我将只讨论厚度，我没有阅读全部代码，所以请注意，但它与您在问题中所说的相对有效。请仔细学习您的教程中的代码，了解它在引擎盖下到底是什么样子的

首先，在页面底部可以找到名为registerInputListeners的函数，但它没有在任何地方调用。更改厚度选择将触发thicknessSelectListener，它将更改localLineThickness，这可能是您可以依赖的变量。在代码的顶部初始化它

var localLineThickness = 5;

现在应该在绘制之前设置线宽。您可以在mousedown侦听器中执行此操作

---

就我阅读您的代码而言，我认为最终它应该由不同的远程用户控制，因此我的解决方案不再相关。

您能澄清一下吗？目前还不清楚您的实际问题是什么。最好将相关代码直接包含在问题中以及JSFIDDLE中。我想这就是我遇到的问题所在，我不知道它是哪种代码。我从一个教程中得到了这段代码，但我想不出来。你需要通读JavaScript，然后试着理解它在做什么。你对JS有多陌生？换一种说法：我很难理解，而且我有7年的经验。我不知道这些变量应该是什么，我从中得到的教程是有效的，但我的代码不是。。。