绘制在画布上

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