Question

我希望在鼠标点击时绘制一条多线（我的意思是一些连续的线与前一条线共用一条坐标，一条与下一条线共用）。我目前通过jQuery中的mousemove事件实现了这一点：

var worksheetCanvas = $('#worksheet-canvas');

var context = worksheetCanvas.get(0).getContext("2d");

var mouse = {
     x: -1,
     y: -1
}

var parentOffset = $('#canvas-holder').parent().offset();
worksheetCanvas.click(function(e) {

    mouse.x = e.pageX - parentOffset.left;
    mouse.y = e.pageY - parentOffset.top;

    context.beginPath();
    context.moveTo(mouse.x, mouse.y);

    $(this).mousemove(function(k) {

        context.strokeStyle = "rgb(180,800,95)";

        context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
        context.closePath();
        context.stroke();

    })

})

但正如我可以在this example中向您展示的那样，当我移动鼠标光标时，它会留下一条线条，我需要删除它以创建一条可移动线条的印象，这需要另一个点被定义。我试图清除不需要的行，但是2d上下文只有clearRect()方法，而我正在寻找像clearPath()这样的东西。

Answer 1

根据canvas reference

，没有clearPath方法

但是，无论如何你都不需要它。如果我的假设是正确的，那么您需要做的就是将先前笔划的值存储到数组中：

我做了一个 jsfiddle here ，这样你就可以看到它正常工作并玩弄它。

每次移动都清除画布是非常有效的，没有性能问题。

包含说明的源代码

$(function() {

var worksheetCanvas = $('#worksheet-canvas');

var context = worksheetCanvas.get(0).getContext("2d");
var clicked = false;

// maximum number of consecutive lines to be drawn
var maxLines = 5;

// The array of stored lines
var storedLines = [];

// The object for the last stored line
var storedLine = {};
var mouse = {
    x: -1,
    y: -1
}

var parentOffset = $('#canvas-holder').parent().offset();
worksheetCanvas.click(function(e) {
    clicked = true;

    mouse.x = e.pageX - parentOffset.left;
    mouse.y = e.pageY - parentOffset.top;

    context.moveTo(mouse.x, mouse.y);

    // Push last line to the stored lines

    if (clicked) {
        storedLines.push({
            startX: storedLine.startX,
            startY: storedLine.startY,
            endX: mouse.x,
            endY: mouse.y
        });

    }

    // set last line coordinates

    storedLine.startX = mouse.x;
    storedLine.startY = mouse.y;

    $(this).mousemove(function(k) {
        if (storedLines.length > maxLines) {
            storedLines.shift();
        }

        // clear the canvas

        context.clearRect(0, 0, 960, 500);
        context.beginPath();
        context.strokeStyle = "rgb(180,800,95)";

        // draw the stored lines

        for (var i = 0; i < storedLines.length; i++) {
            var v = storedLines[i];
            context.moveTo(v.startX, v.startY);
            context.lineTo(v.endX, v.endY);
            context.stroke();
        }
        context.moveTo(mouse.x, mouse.y);
        context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
        context.stroke();

        context.closePath();


    })

})

})

Answer 2

我想你会想要使用两个堆叠的画布。顶层将具有动态线（因此可以清除每个鼠标上的整个事物），然后单击，您可以在下部画布上划线

使用Jquery在画布HTML5中绘制多行

2 个答案: