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）。

更新 - 有关thcickness的更多解释 我将只讨论厚度而我没有阅读整个代码，所以要注意这一点，但它的工作方式与您在问题中所说的相对。请从你的教程中学习一些密切的代码，以了解它真正受到什么影响。

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

var localLineThickness = 5;

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

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

html5画布颜色切换和线宽

1 个答案: