javascript - html5 Canvas 颜色切换和线宽

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

绘图效果很好，但我试图添加其他工具，例如更改线宽和线色（（我不知道如何使它们起作用）），最终我也希望能够放置框，大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保存了第一个位置，并且在绘图功能中为保存的第一个位置和鼠标当前位置绘制了新形状（以查看当前形状），并且onMouseUp添加了鼠标向下的第一个位置和鼠标向上的第二个位置并将其添加到数组绘制对象（例如您的示例中的ppts）。

更新-有关厚度的更多说明：
我将只讨论厚度，而我没有阅读完整的代码，因此请注意，但这相对于您在问题中所说的有效。请研究您教程中的谨慎代码，以了解它真正的含义。

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

var localLineThickness = 5;

现在，您应该在绘制之前设置lineWidth。您可以在mousedown侦听器中进行操作。

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

关于javascript - html5 Canvas 颜色切换和线宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26702290/