javascript - HTML5 Javascript 画笔

Question

我需要创建一个干净光滑的不透明画笔。

这是我需要的一个绘图线示例:

我得到的第二张图片:

虽然我移动光标的速度更快，但绘图线上的圆圈却变少了

    var el = document.getElementById('c');
    var ctx = el.getContext('2d');
    ctx.lineJoin = "round"
    ctx.strokeStyle = "#000000"; 
    ctx.globalAlpha = "0.2"; 
    ctx.lineWidth = 30; 
    ctx.globalCompositeOperation = "source-over";

    var isDrawing, lastPoint;

    el.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
    };

    el.onmousemove = function(e) {
    if (!isDrawing) return;

        var currentPoint = { x: e.clientX, y: e.clientY };

        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
        ctx.lineTo(currentPoint.x, currentPoint.y);
        ctx.closePath();
        ctx.stroke();

        lastPoint = currentPoint;
    };

    el.onmouseup = function() {
        isDrawing = false;
    };

    function clearit() {
        ctx.clearRect(0,0, 1000, 1000);
    }

canvas { border: 1px solid #ccc }

<canvas id="c" width="500" height="300"></canvas>
<input type="button" id="clear-btn" value="Clear it" onclick="clearit()">

Answer 1

您的问题是，在 mousemove 中，您开始和关闭了很多路径，因此线条的不透明度过载。

如果你添加:

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(250,250);
ctx.lineTo(200,100);
ctx.stroke();

你可以看到效果被移除了。

部分解决方案(你看不到你在画什么)是这样的:

 el.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
    };

    el.onmousemove = function(e) {
    if (!isDrawing) return;

        var currentPoint = { x: e.clientX, y: e.clientY };      
        ctx.lineTo(currentPoint.x, currentPoint.y);
        lastPoint = currentPoint;
    };

    el.onmouseup = function() {
        isDrawing = false;
        ctx.closePath();
        ctx.stroke();
    };

现在我们用 mousedown 开始路径，在 mousemove 中“绘制”路径，并用 mouseup 描边路径。我不确定“closePath()”效果，但内圈消失了。