Нарисуйте многострочный холст HTML5 с помощью JQuery

Question

Я хочу нарисовать многострочный (я имею в виду несколько последовательных строк, которые разделяют одну координату с предыдущей и одну со следующей строкой) на щелчки мыши. Я в настоящее время достигается это через mousemove событие в JQuery:

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

Существует не clearPath способа согласно canvas reference

Тем не менее, в любом случае это не понадобится. Если мои предположения правы, все, что вам нужно сделать, это хранить значения предыдущих ходов в массив:

Я сделал 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

Я думаю, вы захотите использовать два штабелированных холста. Верхний слой будет иметь динамическую линию (так может clearRect всего это на каждом MouseMove), а затем по щелчку, обводка на нижнем холст