Javascript：mousemove在画布上画点而不是线（带有alpha）

Question

我有一个画布要在其上“ mousemove”上绘制：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var isDown = false;
var lastPoint = {x: 0, y: 0};

function onMouseDown(event) {
    isDown = true;
    var point = getCanvasPointOfMouseEvent(event);
    ctx.beginPath();
    ctx.moveTo(point.x, point.y);
    lastPoint = point;
}

function onMouseMove(event) {
    if ( isDown !== false) {
        var point = getCanvasPointOfMouseEvent(event);

        ctx.beginPath();
        ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
        ctx.lineWidth = '10';
        ctx.lineJoin = 'round';
        ctx.moveTo(lastPoint.x, lastPoint.y);
        ctx.lineTo(point.x, point.y);
        ctx.closePath();
        ctx.stroke();
        lastPoint = point;
    }
}


function onMouseUp(event) {
    isDown = false;
    ctx.closePath();
}


function getCanvasPointOfMouseEvent(event) {

    var canvasX = (event.pageX - canvas.offsetLeft);
    var canvasY = (event.pageY - canvas.offsetTop);

    return {x: canvasX, y: canvasY};
}

#canvas {
    border: 1px solid red;
    cursor: crosshair;
}

<canvas width="250px" height="250px" onmousedown="onMouseDown(event)" onmousemove="onMouseMove(event)" onmouseup="onMouseUp(event)" id="canvas">
Your browser doesn't support canvas!
</canvas>

输出为带点的线：

但是我只想要这样的行：

如何解决？

Answer 1

基本清除所有内容并重画所有内容。
为此，您必须将所有坐标存储在一个数组中，并且每次要绘制时，都必须使用所有存储的坐标创建一个新的子路径。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var isDown = false;
var points = [];


function onMouseDown(event) {
    var point = getCanvasPointOfMouseEvent(event);
    points.push(point); // store
    redrawAll(); // clearAll and redraw
    isDown = true; // make it last so we can grab the isStart below
}

function onMouseMove(event) {
    if ( isDown !== false) {
        var point = getCanvasPointOfMouseEvent(event);
        points.push(point); // store
        redrawAll(); // clear all and redraw
    }
}
function redrawAll() {
  // clear all
  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.lineWidth = '10';
  ctx.lineJoin = 'round';
  // redraw as a single sub-path
  ctx.beginPath();
  points.forEach(function(pt) {
    if(pt.isStart) ctx.moveTo(pt.x, pt.y);
    else ctx.lineTo(pt.x, pt.y);
  });
  ctx.stroke();
}

function onMouseUp(event) {
    isDown = false;
}


function getCanvasPointOfMouseEvent(event) {

    var canvasX = (event.pageX - canvas.offsetLeft);
    var canvasY = (event.pageY - canvas.offsetTop);

    return {x: canvasX, y: canvasY, isStart: !isDown};
}

#canvas {
    border: 1px solid red;
    cursor: crosshair;
}

<canvas width="250px" height="250px" onmousedown="onMouseDown(event)" onmousemove="onMouseMove(event)" onmouseup="onMouseUp(event)" id="canvas">
Your browser doesn't support canvas!
</canvas>

如果您希望每个mouseup都创建一个新的子路径（因此在同一坐标处两次通过时将它们混合在一起），则只需稍微修改redrawAll函数即可：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var isDown = false;
var points = [];


function onMouseDown(event) {
    var point = getCanvasPointOfMouseEvent(event);
    points.push(point);
    redrawAll();
    isDown = true;
}

function onMouseMove(event) {
    if ( isDown !== false) {
        var point = getCanvasPointOfMouseEvent(event);
        points.push(point);
        redrawAll();
    }
}
function redrawAll() {
  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.lineWidth = '10';
  ctx.lineJoin = 'round';

  ctx.beginPath();
  points.forEach(function(pt) {
    if(pt.isStart){
      ctx.stroke(); // draw previous
      ctx.beginPath(); // begin a new sub-path
    }
    ctx.lineTo(pt.x, pt.y); // will moveTo automatically if needed
  });
  ctx.stroke();

}

function onMouseUp(event) {
    isDown = false;
}


function getCanvasPointOfMouseEvent(event) {

    var canvasX = (event.pageX - canvas.offsetLeft);
    var canvasY = (event.pageY - canvas.offsetTop);

    return {x: canvasX, y: canvasY, isStart: !isDown};
}

#canvas {
    border: 1px solid red;
    cursor: crosshair;
}

<canvas width="250px" height="250px" onmousedown="onMouseDown(event)" onmousemove="onMouseMove(event)" onmouseup="onMouseUp(event)" id="canvas">
Your browser doesn't support canvas!
</canvas>