使用canvas HTML绘制"X“字

Question

单击时，我使用canvas在鼠标位置绘制"X“字，但当我绘制新的"X”字时，旧的"X“字是”加粗的“。

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上面的答案用两条线画了一个简单的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();