javascript - 在 元素上实现流畅的素描和绘图

Question

我正在尝试用 Canvas 创建一个绘图区。在绘制曲线时，我无法使线条看起来平滑，而且我的算法中的线条粗细也发生了变化，这看起来也很糟糕，因为尺寸也会跳得很大，您可以看到尺寸发生变化的位置。我确实找到了这个 link on stackoverflow但这是针对原生 iPhone 应用程序的，我无法弄清楚。

这是我当前的 JS 代码。这是它正在运行 on jsFiddle

var xStart,
xEnd,
yStart,
yEnd,
paint,
ctx;
$(document).ready(function (){

   ctx = $('canvas')[0].getContext("2d");
   ctx.strokeStyle = '#000';
   ctx.lineJoin="round";
   ctx.lineCap="round";
   ctx.lineWidth = 1;


   $('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){
        var orig = e.originalEvent;

        if(e.type == 'mousedown'){
            e.preventDefault(); e.stopPropagation();

            xStart = e.clientX - $(this).offset().left;
            yStart = e.clientY - $(this).offset().top;
            xEnd = xStart;
            yEnd = yStart;

            paint = true;
            draw(e.type);

        }else if(e.type == 'mousemove'){
            if(paint==true){
                xEnd = e.clientX - $(this).offset().left;
                yEnd = e.clientY - $(this).offset().top;


               lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/5;

               if(lineThickness > 10){
                    lineThickness = 10;   
               }

                ctx.lineWidth = lineThickness;
                draw(e.type);
            }
        }else if(e.type == 'mouseup'){
            paint = false;
        }else if(e.type == 'mouseleave'){
            paint = false;
        }else if(e.type == 'touchstart'){
            if(orig.touches.length == 1){
                e.preventDefault(); e.stopPropagation();

                xStart = orig.changedTouches[0].pageX - $(this).offset().left;
                yStart = orig.changedTouches[0].pageY - $(this).offset().top;
                xEnd = xStart;
                yEnd = yStart; 

                paint = true;
                draw(e.type);
            }
        }else if(e.type == 'touchmove'){
            if(orig.touches.length == 1){
                if(paint==true){
                    xEnd = orig.changedTouches[0].pageX - $(this).offset().left;
                    yEnd = orig.changedTouches[0].pageY - $(this).offset().top;


                            lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/6;
                       if(lineThickness > 10){
                          lineThickness = 10;   
                       }


                      ctx.lineWidth = lineThickness;


                    draw(e.type);
                }
            }
        }else if(e.type == 'touchend'){
            paint = false;
        }

      });
    });


    function draw(event){

    if(event == 'mousedown'){
        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.stroke();
    }else if(event == 'mousemove'){
        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.stroke();
    }else if(event == 'touchstart'){
        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.stroke();
    }else if(event == 'touchmove'){
        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.stroke();
    }
    xStart = xEnd;
    yStart = yEnd;                  
}

提前谢谢大家。

如果你画画，这就是现在的样子。

...这就是我想要实现的目标:

Answer 1

我刚才做了一个类似的东西，把它变成了一个 jquery 插件。看看这里，如果这是你想要的，我会发布更详细的答案并从我的文件中挖掘出简化的 jquery 版本:

http://jsfiddle.net/95tft/

编辑

好的，抱歉我昨天没能做到:

最初上面的代码是从 Mr Doob 的“harmony”sketcher 派生出来的: http://mrdoob.com/projects/harmony/#ribbon

(我认为这是最好的解决方案)。但我有点把它分解并在另一个项目中出于我自己的目的重新制作它。我修改了我自己的插件，让它在这里更容易一些:

http://jsfiddle.net/dh3bj/

你唯一可能想要改变的是改变它以在 mousedown/mouseup 上工作，这应该很容易也看看插件底部的设置，你应该能够通过以下方式获得你想要的效果调整画笔大小、颜色、alpha (rgba) 等。

希望对你有帮助