Рисование полупрозрачных линий движения мыши в холсте HTML5

Question

Я пытаюсь дать пользователям указать область, нарисуя на ней инструмент «paint», который рисует полупрозрачные линии на холсте. Его цель - указать «маску» для изображения, которое будет показано ниже на холсте.

Это то, что я пытался до сих пор:

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var canvasPos = canvas.getBoundingClientRect(); 

var dragging = false; 

drawImage(); 

$(canvas).mousedown(mouseDown); 
$(canvas).mouseup(mouseUp); 
$(canvas).mousemove(mouseMove); 

function drawImage() { 
    var img = new Image(); 
    img.src = 'http://img2.timeinc.net/health/img/web/2013/03/slides/cat-allergies-400x400.jpg'; 

    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
    }; 
} 

function mouseDown(e) { 
    var pos = getCursorPosition(e); 

    dragging = true; 

    ctx.strokeStyle = 'rgba(0, 100, 0, 0.25)'; 
    ctx.lineCap = 'round'; 
    ctx.lineJoin = 'round'; 
    ctx.lineWidth = 15; 
    ctx.beginPath(); 
    ctx.moveTo(pos.x, pos.y); 
} 

function mouseUp(e) { 
    dragging = false; 
} 

function mouseMove(e) { 
    var pos, i; 

    if (!dragging) { 
     return; 
    } 

    pos = getCursorPosition(e); 

    ctx.lineTo(pos.x, pos.y); 
    ctx.stroke(); 
} 

function getCursorPosition(e) { 
    return { 
     x: e.clientX - canvasPos.left, 
     y: e.clientY - canvasPos.top 
    }; 
} 

• Ссылка на jsfiddle вышеуказанного кода: http://jsfiddle.net/s34PL/2/

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

Как я могу решить эту проблему?

Спасибо!

Answer 1

Проблема заключается в том, что вы снова и снова рисовать весь путь:

function mouseMove(e) { 
    ... 
    ctx.stroke(); // Draws whole path which begins where mouseDown happened. 
} 

Вы должны сделать только новый сегмент пути (http://jsfiddle.net/jF9a6/). И тогда ... у вас есть проблема с шириной линии 15px.

Итак, как это решить? Мы должны нарисовать линию сразу, как вы, но избегайте рисования поверх существующих линий. Вот код: http://jsfiddle.net/yfDdC/

Самое большое изменение в массиве paths. Он содержит да, пути :-) Путь - это массив точек, хранящихся в mouseDown и mouseMove. Новый путь создается в функции MouseDown:

paths.push([pos]); // Add new path, the first point is current pos. 

В MouseMove добавить текущее положение мыши к последнему пути в paths массиве и refreshs изображения.

paths[paths.length-1].push(pos); // Append point tu current path. 
refresh(); 

refresh() функция очищает весь холст, опять рисует кот и рисует каждый путь.

function refresh() { 
    // Clear canvas and draw the cat. 
    ctx.clearRect(0, 0, ctx.width, ctx.height); 
    if (globImg) 
     ctx.drawImage(globImg, 0, 0); 

    for (var i=0; i<paths.length; ++i) { 
     var path = paths[i]; 

     if (path.length<1) 
      continue; // Need at least two points to draw a line. 

     ctx.beginPath(); 
     ctx.moveTo(path[0].x, path[0].y); 
     ... 
     for (var j=1; j<path.length; ++j) 
      ctx.lineTo(path[j].x, path[j].y); 
     ctx.stroke(); 

    } 
} 

Answer 2

Альтернативный подход состоит в том, чтобы нарисовать пути сплошным и сделать весь холст прозрачным. Конечно, вы должны перемещать изображение из холста и складывать его под ним. Вы можете найти код здесь: http://jsfiddle.net/fP297/

<div style="position: relative; border: 1px solid black; width: 400px; height: 400px;"> 
    <img src='cat.jpg' style="position: absolute; z-order: 1;"> 
    <canvas id="canvas" width="400" height="400" style="position: absolute; z-order: 2; opacity: 0.25;"></canvas> 
</div> 

Рисуя линии твердых вам не придется беспокоиться о рисовании на площади несколько раз, так что вам не придется беспокоиться о стирании изображения и перерисовывая все.