当我点击粗刷按钮时，如何用javascript删除html中画布的线宽

Question

我想在我点击粗刷按钮时删除线宽，但它不起作用在这个绘制条件中有不同的条件基于你点击的按钮，我正在删除erasecanvas中的模糊和shadowcolor但它不起作用。 我正在改变基于按钮的绘图设计。 我正在改变基于按钮的绘图设计

        var spray = false;
        var glowwrite = false;
        var eraseCnavas = false;
        var newLineWidth;
        var newColor = 'black';

        thickbrush.addEventListener('click', function () {
            spray = true;
            eraseCnavas = false;
            glowwrite = false;
        });
        glow.addEventListener('click', function () {
            spray = false;
            eraseCnavas = false;
            glowwrite = true;

            erase.classList.remove('glowbrush');
        })
        erase.addEventListener('click', function () {
            eraseCnavas = true;
            spray = false;
            eraseCnavas = false;
            brushname.innerHTML = 'Eraser';
        })
        var clientX, clientY, timeout;


        function draw(e) {

            if (painting) {

                previous = {
                    x: mouse.x,
                    y: mouse.y
                };
                mouse = oMousePos(canvas, e);
                // saving the points in the points array
                points.push({
                    x: mouse.x,
                    y: mouse.y,
                    color: newColor,
                    lineWidth: newLineWidth
                })
                console.log('pushing to pints length = ' + points.length);
                if (eraseCnavas) {
                    c.strokeStyle = '#ffffff';
                    c.shadowBlur = 0;
                    c.shadowColor = none;
                }
                if (glowwrite) {
                    c.shadowBlur = 10;
                    c.shadowColor = 'rgb(0, 0, 0)';
                }
                if (spray) {
                    c.lineCap = 'round';
                    newColor = 'none';
                    newLineWidth= 0;
                    timeout = setTimeout(spraying, 50);
                }
                // drawing a line from the previous point to the current point.
                c.beginPath();
                c.moveTo(previous.x, previous.y);
                c.strokeStyle = newColor;
                c.lineWidth = newLineWidth; 
                c.lineTo(mouse.x, mouse.y);
                c.stroke();
            }

        }

        function spraying() {
            console.log('timeout called');

            var density = 30;

            clientX = mouse.x;
            clientY = mouse.y;
            for (var i = density; i--;) {
                var angle = getRandomFloat(0, Math.PI * 2);
                var radius = getRandomFloat(0, 20);
                c.fillRect(
                    clientX + radius * Math.cos(angle),
                    clientY + radius * Math.sin(angle),
                    1, 1);
            }
            if (!timeout) return;
            timeout = setTimeout(sparying, 5000);
        }

我想当你点击喷雾按钮时应该被移除，只有喷雾会显示，当你点击擦除它应该删除阴影颜色和阴影模糊从线本身我正在删除但它不工作

Answer 1

您尝试将样式组合成终端效果（ spray ， glow ， erase等）会导致您遇到的问题。

你的伪代码说：

1. 如果 eraseCnavas是true 那么
   • 改变风格

和

2. 如果 glowwrite为true ， 那么
   • 改变样式（ 可能会删除擦除任何东西的能力 ）

和

3. 如果 spray是true 那么

   • 改变样式（ 去除擦除能力，但永远不会去除glow ）
   • 绘制喷雾图案

4. 最后， 在所有情况下

   • 用这些样式绘制线条（ 为什么线条不管工具如何绘制 ）

通常，选择工具会导致switch语句或if/else if/else结构，以确保使用正确的工具。

我建议你重构你的draw()函数，以便它：

无论是画一条线或绘制发光的线或喷雾剂线

而不是试图将效果结合起来以获得正确的结果。