javascript - 在 Canvas 上绘图

因此，我希望能够在我创建的画布上进行绘制，让我向您展示我的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的变量，当它等于1时表示继续绘制，而0停止。但是我把它放在while循环中，所有发生的是页面崩溃。

我在CSS3中将这两个画布设置为相互重叠。

对不起，如果这令人困惑，我不确定该如何措辞

任何帮助都是极好的，

谢谢 ：）

最佳答案

您的“设置变量”方法是正确的。只要按住鼠标键就可以绘制，因此您必须监听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

关于javascript - 在 Canvas 上绘图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9782238/