html - 使用画布 HTML 绘制“X”字

Question

单击时，我使用画布在鼠标位置绘制“X”字，但是当我绘制新的“X”字时，旧的“X”是“BOLD”。

http://jsfiddle.net/darklight27/h4JvJ/

你对我有什么建议吗？谢谢！！！

Answer 1

在开始画线之前，请致电beginPath()：

function drawX(x, y) {
    ctx.beginPath();

    ctx.moveTo(x - 20, y - 20);
    ctx.lineTo(x + 20, y + 20);

    ctx.moveTo(x + 20, y - 20);
    ctx.lineTo(x - 20, y + 20);
    ctx.stroke();
}

jsFiddle 上的更新代码：http: //jsfiddle.net/h4JvJ/23/

Answer 2

上面 Stefan 的回答用 2 行绘制了一个简单的 X。如果您想要更厚的 X，请使用以下函数：

const drawX = (ctx, shape, x, y, size, width) => {
    // Start at the top left corner and draw an X
    ctx.beginPath();
    x -= size;
    y -= size;
    ctx.moveTo(x, y);
    x += width / 2;
    y -= width / 2;
    ctx.lineTo(x, y);
    x += size;
    y += size;
    ctx.lineTo(x, y);
    x += size;
    y -= size;
    ctx.lineTo(x, y);
    x += width / 2;
    y += width / 2;
    ctx.lineTo(x, y);
    x -= size;
    y += size;
    ctx.lineTo(x, y);
    x += size;
    y += size;
    ctx.lineTo(x, y);
    x -= width / 2;
    y += width / 2;
    ctx.lineTo(x, y);
    x -= size;
    y -= size;
    ctx.lineTo(x, y);
    x -= size;
    y += size;
    ctx.lineTo(x, y);
    x -= width / 2;
    y -= width / 2;
    ctx.lineTo(x, y);
    x += size;
    y -= size;
    ctx.lineTo(x, y);
    x -= size;
    y -= size;
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.closePath();
    ctx.fillStrokeShape(shape);
};

Answer 3

可定制的十字架

 var cursor = document.createElement("canvas"),
      ctx = cursor.getContext("2d");

    cursor.width = 36;
    cursor.height = 36;

    // draw some shape for sake of demo
    ctx.strokeStyle = color;

    ctx.lineWidth = 2;

    var x = cursor.width / 2;
    var y = cursor.height / 2;

    // ctx.moveTo(x, y);
    ctx.arc(x, y, 20, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(x, y, 30, 0, 2 * Math.PI);

    let lineLength = 22

    ctx.moveTo(x - lineLength / 2, y - lineLength / 2);
    ctx.lineTo(x + lineLength / 2, y + lineLength / 2);
    ctx.stroke();

    ctx.moveTo(x + lineLength / 2, y - lineLength / 2);
    ctx.lineTo(x - lineLength / 2, y + lineLength / 2);
    ctx.stroke();