Javascript：mousemove 在画布点上绘制而不是线（带 alpha）答案

【问题标题】：Javascript: mousemove draw on canvas dots not line (with alpha)Javascript：mousemove 在画布点上绘制而不是线（带 alpha）
【发布时间】：2018-09-17 20:37:01
【问题描述】：

我有一个画布，我想在“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>

输出是带点的行：

但我只想要线条，像这样：

如何解决？

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案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>

【讨论】：