HTML5 Canvas 绘制虚线答案

【问题标题】：HTML5 Canvas Draw Dashed LineHTML5 Canvas 绘制虚线
【发布时间】：2017-12-21 14:06:34
【问题描述】：

我目前尝试在画布中画一条虚线。

我尝试的是ctx.setLineDash([5,5])，如果我画得很快，它会起作用，但仅此而已。该方法似乎不起作用，当我画一条线时很慢。所以在我的画布上，我可以用鼠标画出自己，我希望画出的线是虚线。只有当我快速移动鼠标时，它才会起作用，当我缓慢移动它时，我只会得到一条直线。

即使画得很慢，我该怎么做才能让它工作？

代码：

<html>
    <script type="text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;

    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        ctx.setLineDash([5,5]); //here I try to set the line to a dashed line
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }

    function color(obj) {
        switch (obj.id) {
            case "green":
                x = "green";
                break;
            case "blue":
                x = "blue";
                break;
            case "red":
                x = "red";
                break;
            case "yellow":
                x = "yellow";
                break;
            case "orange":
                x = "orange";
                break;
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        if (x == "white") y = 14;
        else y = 2;

    }

    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() {
        var m = confirm("Want to clear");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }

    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
    </script>
    <body onload="init()">
        <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
        <div style="position:absolute;top:12%;left:43%;">Choose Color</div>
        <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
        <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
        <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
        <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
        <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
        <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
        <div style="position:absolute;top:20%;left:43%;">Eraser</div>
        <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
        <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
        <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
        <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
    </body>
    </html>

【问题讨论】：

添加一个sn-p，你到现在为止做了什么
我可以补充的不多，基本上是像这里这样的绘图解决方案：stackoverflow.com/a/8398189/3375021 然后我只是尝试使用ctx.setLineDash([5,5]) 将线条设置为虚线样式，但它不起作用慢慢画的时候
请添加一个sn-p，我们不能依赖外部代码，而且当你修改它时。从链接帖子的描述和快速阅读中，我猜你会不断地绘制前面的行=>当新行短于一个破折号时，你会得到一条连续的线。为了解决这个问题，将点存储在一个数组中，在每次绘制时清除上下文，然后重新绘制从第一个点到最后一个点的整个路径。
@Kaiido 添加了 sn-p。但是为什么当我用相同的路径画得更快时它会起作用呢？
因为最后一点和新点之间的距离比你的破折号阵列大。

标签： javascript html canvas

【解决方案1】：

您的问题是您当前在每次鼠标移动时都在绘制一个新路径。破折号是从路径起点到终点。
当您缓慢移动鼠标时，您实际上会生成许多非常小的路径，小于您的 dash-array 的 5px。而当你快速移动鼠标时，两点之间的距离大于 10px，所以你可以看到破折号。

此问题的解决方案是将您的点存储在一个数组中，并在每次重绘时从这些存储的点重绘一条路径。这样一来，您的路径就会变得更长，并且您的 dash 会正常工作。

在下面的例子中，我什至在每次 mouseup 时保存一个新路径，这样它们就可以拥有自己的dashed 属性：

const ctx = c.getContext('2d');

const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
c.onmousedown = e => {
  // add a new path object
  pathes.push({
    pts: [], // an array of points
    dashed: check.checked // boolean
  });
  mouse_down = true; // we should draw
}
c.onmouseup = c.onmouseleave = e => mouse_down = false;

c.onmousemove = throttle(e => {
  if (!mouse_down) {
    return;
  } else {
    const rec = c.getBoundingClientRect();
    // add a new point
    addPoint(e.clientX - rec.left, e.clientY - rec.top);
    redraw(); // redraw everything
  }
});

function redraw() {
  ctx.clearRect(0, 0, c.width, c.height); // we clear everything
  // and draw every pathes
  pathes.forEach(path => {
    ctx.setLineDash(path.dashed ? [5, 5] : [0]);
    ctx.beginPath();
    path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
    ctx.stroke();
  })
}

function addPoint(x, y) {
  // append to the last one
  const points = pathes[pathes.length - 1].pts;
  points.push({
    x: x,
    y: y
  });
}


// just to avoid unnecessary drawings
function throttle(callback) {
  if (typeof callback !== 'function')
    throw 'A callback function must be passed';
  var active = false;
  var evt;
  var handler = function() {
    active = false;
    callback(evt);
  };
  return function handleEvent(e) {
    evt = e;
    if (!active) {
      active = true;
      requestAnimationFrame(handler);
    }
  };
}

canvas {
  border: 1px solid
}

<label>dashed : <input type="checkbox" id="check" checked></label><br>
<canvas id="c" width="500" height="500"></canvas>

【讨论】：

精彩的解释和解决方案。谢谢。

【解决方案2】：

<canvas id='asdf' width='200px' height='200px'></canvas>
var canvas = document.getElementById("asdf");
var abc = canvas.getContext("2d");
abc.setLineDash([5, 3]);

【讨论】：

Only when I move my mouse very fast, it works, when I move it slow, I just get a straight through line.
这正是我尝试过的，但它只是在技术上绘制一条线时起作用，而不是当我用鼠标自己绘制时（至少当我像正常人一样绘制时，不要快速移动我的鼠标）
abc.beginPath(); abc.moveTo(0,100); abc.lineTo(300, 100); abc.stroke();
@Dee_wab 是的，这行得通，我知道，但我想用鼠标画线，而不是命令