javascript - 如何在html canvas元素上绘制半透明线，且该线中没有点？ [重复](How do I draw a semi transparent line on a html canvas element without dots in the line? [duplicate])

Question

(This question already has answers here) :

((这个问题已经在这里有了答案)

：)

Drawing semi-transparent lines on mouse movement in HTML5 canvas (2 answers)

(在HTML5画布中的鼠标移动上绘制半透明线 （2个答案）)

Closed 10 hours ago .

(10小时前关闭。)

Ok so I am working on a drawing application and I would like to make it so the user can change the opacity of their brush.

(好的，所以我正在开发一个绘图应用程序，我想制作它，以便用户可以更改画笔的不透明度。)

I have gotten the opacity to change by changing the alpha value, but when I draw a line with the lowered alpha value, the line has many dots of different transparency in it.

(我已经通过更改Alpha值来更改不透明度，但是当我绘制一条具有较低Alpha值的线时，该线中有许多透明度不同的点。)

How can I make the semi transparent line draw very clean with occasional transparency changes only at overlaps?

(如何使半透明线绘制得很干净，并且仅在重叠时偶尔更改透明度？)

Image 1 is what happens when I run my code

(图片1是我运行代码时发生的情况)

Image 2 is what I would like to achieve if possible

(图片2是我想尽可能实现的)

Here is my javascript code for my canvas

(这是我的画布的JavaScript代码)

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext('2d');

window.addEventListener('load', function() {

    //Resizing
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;

    //Variables
    let painting = false;

    function startPosition(e) {
        painting = true;
        draw(e);
    }

    function finishedPosition() {
        painting = false;
        ctx.beginPath();
    }

    function draw(e) {
        if(!painting) return;

        ctx.lineWidth = 10;
        ctx.lineCap = "round";

        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);

    }

    //EventListeners
    canvas.addEventListener('mousedown', startPosition);
    canvas.addEventListener('mouseup', finishedPosition);
    canvas.addEventListener('mousemove', draw);

});

  ask by Hoyt Felton translate from so

Answer 1

I would recommend refractoring your draw() and doing some OOP with canvas ( shameless plug of my canvas credibility ).

(我建议折射一下draw()并使用canvas进行一些OOP（ 我的画布信誉的无耻插件 ）。)

I say OOP so that you can track the users previous coordinates and current coordinates in a much cleaner state.

(我说的是OOP，这样您就可以在更加干净的状态下跟踪用户的先前坐标和当前坐标。)

Once some OOP is put in place, you can take advantage of the following code:

(一旦完成一些OOP，您就可以利用以下代码：)

function draw(e) {
    //Update Current coords
    this.currX = e.clientX
    this.currY = e.clientY

    ctx.beginPath();
    ctx.moveTo(this.prevX, this.prevY);
    ctx.lineTo(this.currX, this.currY);
    ctx.lineWidth = this.lineWidth;          //10
    ctx.lineCap = this.lineCap;              //round
    ctx.strokeStyle = this.lineColor;        //blue 
    ctx.stroke();
    ctx.closePath();

    // Update coords
    this.prevX = this.currX
    this.prevY = this.currY
}