javascript - 在 Canvas 上绘图

Question

所以我希望能够在我创建的 Canvas 上绘图，让我向您展示我的 Javascript 代码，我将解释发生了什么:

我有两个 Canvas ，一个有一个 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
}  

这个函数只是获取我想要使用的 Canvas 并设置它们，然后我调用事件监听器，一个跟随鼠标，一个点击并拖动和绘制

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);
 }

这是根据鼠标所在的位置在 Canvas 上的特定位置绘制的功能，我可以单击它会绘制一个正方形但我不能单击并拖动并继续绘制，正如我希望的那样.我该怎么做？

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

我尝试设置一个名为 draw = 1 的变量，当它等于 1 时表示继续绘制，当为 0 时停止。但是我把它放在一个 while 循环中，发生的只是页面崩溃。

我在 CSS3 中设置了这两个 Canvas 以相互叠加。

对不起，如果这让我感到困惑，我不确定该如何表达

任何帮助都会很棒，

谢谢:)

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