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

我想用鼠标点击画一条多线（我指的是一些连续的线，它们与上一条线共享一个坐标，与下一条线共享一个坐标）。我目前通过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();

    })

})​

---

但是，正如我在中所展示的，当我移动鼠标光标时，它会留下一条线的轨迹，不知何故，我需要删除这些线，以创建一条移动线的印象，这需要定义另一个点。我已经尝试清除不需要的行，但是2d上下文只有一个

clearRect（）

方法，而我正在寻找类似

clearPath（）

的方法，我想您需要使用两个堆叠的画布。顶层将有一条动态线（这样可以在每个鼠标移动中清除整个内容），然后单击，您将在较低的画布上进行笔划

我想您需要使用两个堆叠的画布。顶层将有一条动态线（这样可以在每个鼠标移动中清除整个内容），然后单击，您将在较低的画布上进行笔划

根据

然而，你无论如何都不会需要它。如果我的假设是正确的，您只需将以前笔划的值存储到数组中：

我制作了一个，这样你就可以看到它在工作和玩了

在每次移动时清除画布非常有效，并且没有性能问题

带说明的源代码

$(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();


    })

})

})​

$（函数（）{
var worksheetCanvas=$（“#工作表画布”）；
var context=worksheetCanvas.get（0.getContext（“2d”）；
var=false；
//要绘制的最大连续线数
var maxLines=5；
//存储行的数组
var storedLines=[]；
//最后存储行的对象
var storedLine={}；
变量鼠标={
x:-1，
y:-1
}
var parentOffset=$（'#canvas holder'）.parent（）.offset（）；
工作表NVAS。单击（功能（e）{
单击=真；
mouse.x=e.pageX-parentOffset.left；
mouse.y=e.pageY-parentOffset.top；
moveTo（mouse.x，mouse.y）；
//将最后一行推到存储行
如果（单击）{
存储线路({
startX:storedLine.startX，
startY:storedLine.startY，
endX:mouse.x，
老鼠，老鼠
});
}
//设置最后一行坐标
storedLine.startX=mouse.x；
storedLine.startY=mouse.y；
$（this）.mousemove（函数（k）{
如果（storedLines.length>maxLines）{
storedLines.shift（）；
}
//清理画布
clearRect（0,0960500）；
context.beginPath（）；
context.strokeStyle=“rgb（180800,95）”；
//绘制存储的线
对于（变量i=0；i

根据

然而，你无论如何都不会需要它。如果我的假设是正确的，您只需将以前笔划的值存储到数组中：

我制作了一个，这样你就可以看到它在工作和玩了

在每次移动时清除画布非常有效，并且没有性能问题

带说明的源代码

$(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();


    })

})

})​

$（函数（）{
var worksheetCanvas=$（“#工作表画布”）；
var context=worksheetCanvas.get（0.getContext（“2d”）；
var=false；
//要绘制的最大连续线数
var maxLines=5；
//存储行的数组
var storedLines=[]；
//最后存储行的对象
var storedLine={}；
变量鼠标={
x:-1，
y:-1
}
var parentOffset=$（'#canvas holder'）.parent（）.offset（）；
工作表NVAS。单击（功能（e）{
单击=真；
mouse.x=e.pageX-parentOffset.left；
mouse.y=e.pageY-parentOffset.top；
moveTo（mouse.x，mouse.y）；
//将最后一行推到存储行
如果（单击）{
存储线路({
startX:storedLine.startX，
startY:storedLine.startY，
endX:mouse.x，
老鼠，老鼠
});
}
//设置最后一行坐标
storedLine.startX=mouse.x；
storedLine.startY=mouse.y；
$（this）.mousemove（函数（k）{
如果（storedLines.length>maxLines）{
storedLines.shift（）；
}
//清理画布
clearRect（0,0960500）；
context.beginPath（）；
context.strokeStyle=“rgb（180800,95）”；
//绘制存储的线
对于（变量i=0；i

我想你指的是

multi>maxLines+1

和

multi--

，因为第一次单击还没有生成一行。伯爵有点不对劲，对吧。我想现在真的不需要了，array.length可以直接使用-更新了答案。为什么要用

var maxLines=5

限制进入数组的行数？如果我不限制它，它会消耗很多资源吗？它会消耗大量资源，是的，但你可以尝试一下，看看它从哪里开始受到伤害<代码>最大线=5只是一个建议，请随意玩玩（使用JSFIDLE的分支来拥有自己的版本）@menislici:other