Рисование на холсте

Question

Итак, я хочу иметь возможность рисовать на этом холсте, который я создал, позвольте мне показать вам мой код Javascript и я объясню, что происходит:

У меня есть два холста, один из которых всегда имеет квадрат 50X50следуя за мышью, и другой, которую я хочу использовать, чтобы рисовать.Пока это работает, но я хочу иметь возможность перетаскивать мышь и продолжать рисовать, вместо того, чтобы щелкать мышью каждый раз, когда я хочу рисовать.

function start(){
var canvas_hover_tmp = document.getElementById('canvas_hover');
canvas_hover = canvas_hover_tmp.getContext('2d');
var canvas_click_tmp = document.getElementById('canvas_draw');
canvas_click = canvas_click_tmp.getContext('2d');

window.addEventListener('mousemove', moved, false); //move square with mouse on mouse move
window.addEventListener('mousedown', draw, false); //draw square to canvas at specific location from where mouse is
}  

Эта функция просто получает желаемый холстиспользуйте и настраивайте их, затем я вызываю прослушиватели событий, один из которых следует за мышью, а другой - нажимает вниз, перетаскивает и рисует

function moved(pos){
canvas_hover.clearRect(0,0,1000,600);
var x = pos.clientX;
var y = pos.clientY;
canvas_hover.fillRect(x-25, y-25,50,50);    
}

Эта функция позволяет мне навести курсор на прямоугольник, он зависает с помощью мыши

function draw(draw_pos){
var x = draw_pos.clientX;
var y = draw_pos.clientY;
canvas_click.fillRect(x-25,y-25,50,50);
 }

Это функция, которая рисует на холсте в определенном месте в зависимости от того, где находится мышь, я могу щелкнуть, и она нарисует квадрат, но я не могу щелкнуть вниз, перетащить и продолжить рисование., как я хотел бы.Как я могу это сделать?

 window.addEventListener('load', drawRect, false); //call first function start

Я попытался установить переменную с именем draw = 1, и когда она равна единице, это означает, что продолжить рисование и когда 0 остановить.Но я поместил его в цикл while, и все, что происходит, это сбой страницы.

У меня настроены эти два холста в CSS3 для наложения друг на друга.

Извините, если это сбивает с толку, я не знал, как это выразить

Любая помощь будетбудь офигенным,

спасибо:)

Answer 1

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

//move square with mouse on mouse move
window.addEventListener('mousemove', moved, false);

//draw square to canvas at specific location from where mouse is
//you shouldn't drop this listener, as this would prevent drawing via clicking
window.addEventListener('mousedown', draw, false);

// enable/disable drawing while moving the mouse
window.addEventListener('mousedown', enableDraw, false); 
window.addEventListener('mouseup', disableDraw, false); // disable

Затем вам нужно немного настроить свою функцию moved и реализовать enableDraw / disableDraw:

function moved(pos){    
    canvas_hover.clearRect(0,0,1000,600);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas_hover.fillRect(x-25, y-25,50,50);
    if(drawOnSecond) // <<---- global variable, default false
        draw(pos);
}

function enableDraw(){
    drawOnSecond = true;
}

function disableDraw(){
    drawOnSecond = false;
}

JSFiddle