javascript - html5 Canvas 颜色切换和线宽

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 添加鼠标向下的第一个位置和鼠标向上的第二个位置，并将其添加到数组中绘制对象(如示例中的 ppt)。

更新 - 有关厚度的更多说明:我将仅讨论厚度，并且我没有阅读整个代码，因此请注意这一点，但它相对于您在问题中所说的内容有效。请仔细研究教程中的代码，了解其幕后真正发生的事情。

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

var localLineThickness = 5;

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

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