Создание простой краски в HTML 5 холст - PullRequest
Новая
       9

Создание простой краски в HTML 5 холст

1 голос
/ 03 марта 2012

У меня есть простой код для «рисования» в элементе canvas: 

function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
window.addEventListener("mousemove", rys, false);
}

function rys(e){

var xPos = e.clientX;
var yPos = e.clientY;

canvas.fillStyle="#000";
canvas.beginPath();
canvas.arc(xPos-7,yPos-7,10,0,Math.PI*2,true);
canvas.closePath();
canvas.fill();

}
window.addEventListener("load", doFirst, false);

Как видите, функция работает только тогда, когда мышь находится над элементом canvas. Теперь я хочу, чтобы она рисовалась при щелчке мышью (как в рисовании). Может кто-нибудь сказать мне, как это сделать (с кодом)? Спасибо за помощь

1 Ответ

3 голосов
/ 03 марта 2012

Вам необходимо отслеживать текущее состояние кнопки мыши (нажата или не нажата) независимо от движений мыши.

Вы можете сделать это, подключив обработчики событий к событиям "mousedown" и "mouseup", аналогично тому, как вы подключали к событию "mousemove".

В этих обработчиках событий вы можете отслеживать текущее состояние первой кнопки мыши, обновляя глобальную переменную, указывающую, нажата ли кнопка в данный момент. Затем в обработчике «mousemove» вы можете проверить эту глобальную переменную и определить, следует ли рисовать при перемещении мыши.

При использовании событий mouseup и mousedown вам может потребоваться ограничить обработку только нажатием первой кнопки мыши. Вы можете сделать это, проверив, что свойство события "button" равно 0. Обратите внимание, что вы можете проверить и другие кнопки, а также отслеживать их.

Вы можете увидеть рабочий пример этого здесь: http://jsfiddle.net/mQtKz/

...