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监听器中执行此操作。

就我所说的代码而言，我假设它最终应该由不同的远程用户控制，所以我的解决方案不再重要。