html5画布颜色切换和线宽

Question

基本上我有这个：http://jsfiddle.net/Alquh/pss3a6jd/

绘图效果很好，但我正在尝试添加不同的工具，例如更改线条粗细和线条颜色，（我无法弄清楚如何让这些工作）最终我希望能够放置框、大 X 和直线也。

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

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

Answer 1

如果厚度和颜色不起作用，请尝试将其中一些变量更改为更准确的值：

/* 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 保存第一个位置并在绘图函数中为保存的第一个位置和鼠标当前绘制新形状（查看当前形状如何）并且 onMouseUp 从鼠标向下添加第一个位置，从鼠标向上添加第二个位置并将其添加到数组绘图对象（例如您的示例中的 ppts）。

更新 - 关于厚度的更多解释： 我将只讨论厚度并且我没有阅读整个代码，所以请注意这一点，但它与您在问题中所说的内容相关。请仔细研究您教程中的代码，以了解其背后的真正含义。

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

var localLineThickness = 5;

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

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