Javascript 鼠标移动时在画布上显示矩形

我想在画布上画一个矩形。下面的代码运行良好，除了当我画矩形时，鼠标移动时它不会显示路径。当我离开鼠标时，矩形在画布上可见

请帮忙

谢谢

var canvas，ctx，flag=false，
prevX=0，
currX=0，
prevY=0，
咖喱=0，
currShape=‘矩形’，
mouseIsDown=0，
startX，endX，startY，endY，
dot_标志=假；
var x=“白色”，
y=2；
函数init（）{
canvas=document.getElementById（'can'）；
ctx=canvas.getContext（“2d”）；
var imageObj=新图像（）；//画布图像Obj
imageObj.onload=函数（）{
drawImage（imageObj，69，50）；//在画布上加载图像
};
imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg“；//加载图像
w=canvas.width；//画布宽度
h=canvas.height；//画布高度
//检查要绘制的形状
eventListener（）；
}
函数eventListener（）{
if（currShape=='rectangle'）{
canvas.addEventListener（“mousedown”，函数（e）{
mouseDown（e）；
}，假）；
canvas.addEventListener（“mousemove”，函数（e）{
mouseXY（e）；
}，假）；
canvas.addEventListener（“mouseup”，函数（e）{
mouseUp（e）；
}，假）；
}
}
功能鼠标（eve）{
if（mouseIsDown！==0）{
mouseIsDown=0；
var pos=getMousePos（画布，eve）；
endX=位置x；
endY=位置y；
if（currShape=='rectangle'）
{
drawSquare（）；//鼠标向上时更新
}
}
}
函数mouseDown（eve）{
mouseIsDown=1；
var pos=getMousePos（画布，eve）；
startX=endX=位置x；
开始=结束=位置y；
if（currShape=='rectangle'）
{
drawSquare（）；//鼠标向上时更新
}
}
功能鼠标（eve）{
if（mouseIsDown！==0）{
var pos=getMousePos（画布，eve）；
endX=位置x；
endY=位置y；
//drawSquare（）；
}
}
函数drawSquare（）{
//创建正方形
var w=endX-startX；
var h=endY-startY；
var offsetX=（w<0）？w:0；
var-offsetY=（h<0）？h:0；
可变宽度=数学绝对值（w）；
变量高度=数学绝对值（h）；
ctx.beginPath（）；
ctx.globalAlpha=0.7；
ctx.rect（startX+offsetX、startY+offsetY、宽度、高度）；
ctx.fillStyle=x；
ctx.fill（）；
ctx.lineWidth=y；
ctx.strokeStyle=x；
ctx.stroke（）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}

.colortool div{
宽度：15px；
高度：15px；
浮动：左；
左边距：2倍；
}
.清楚{
明确：两者皆有；
}

---

在某种程度上，您需要跟踪对画布上绘制的形状所做的更改。在您的例子中，首先创建一个非常小的矩形，然后在拖动过程中根据鼠标位置缩放它

目前，您只有一个函数可以绘制一个全新的矩形，但不考虑任何以前的“状态”

---

我发现这可能会有帮助。它没有特别解释缩放，但它可以帮助您理解背后的基本概念，因此我认为这将是找到合适解决方案的一个好方法。

因为我们使用画布id在DOM中查找画布标记，然后将画布的绘图上下文设置为2D。这里有两件事很重要，一是在绘制矩形时存储信息，二是使用bolean检查用户是否绘制矩形。 您可以参照这些链接： 检查给定链接中的js小提琴。

---

希望这对您有所帮助。

这是您的新JavaScript

var canvas, cnvHid, cnvRender, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        currShape = 'rectangle',
        mouseIsDown = 0,
        startX, endX, startY, endY,
        dot_flag = false;

    var x = "white",
        y = 2;

    function init() {
        canvas = document.getElementById('can');
        cnvHid = document.getElementById( "canHid" );
        cnvRender = document.getElementById( "canRend" );
        ctx = canvas.getContext("2d");
        var imageObj = new Image(); //Canvas image Obj

        imageObj.onload = function() {
            ctx.drawImage(imageObj, 69, 50);    //Load Image on canvas
            renderAllCanvas();
        };
        imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image 

        w = canvas.width;   // Canvas Width
        h = canvas.height;  // Canvas Height
        //Check Shape to be draw
        eventListener();
    }
    function eventListener(){
        if(currShape=='rectangle'){
            cnvRender.addEventListener("mousedown",function (e) { 
                mouseDown(e);
                renderAllCanvas();
            }, false);
            cnvRender.addEventListener("mousemove",function (e){
                mouseXY(e);
                renderAllCanvas();
            }, false);
            cnvRender.addEventListener("mouseup", function (e){ 
                mouseUp(e);
                renderAllCanvas();
            }, false);
        }
    }
    function mouseUp(eve) {
    if (mouseIsDown !== 0) {
        mouseIsDown = 0;
        var pos = getMousePos(canvas, eve);
        endX = pos.x;
        endY = pos.y;
        if(currShape=='rectangle')
        {
            drawSquare( canvas ); //update on mouse-up
            cnvHid.getContext( "2d" ).clearRect( 0, 0, cnvHid.width, cnvHid.height );
        }
    }
}

function mouseDown(eve) {
    mouseIsDown = 1;
    var pos = getMousePos(canvas, eve);
    startX = endX = pos.x;
    startY = endY = pos.y;
    if(currShape=='rectangle')
    {
        drawSquare( canvas ); //update on mouse-up
    }
}

function mouseXY(eve) {
    if (mouseIsDown !== 0) {
        var pos = getMousePos(canvas, eve);
        endX = pos.x;
        endY = pos.y;
        drawSquare( cnvHid, true );
    }
}

function drawSquare( cnv, clear ) {
    var ctx = cnv.getContext( "2d" );
    if( clear && clear === true ){
        ctx.clearRect( 0, 0, cnv.width, cnv.height );
    }
    // creating a square
    var w = endX - startX;
    var h = endY - startY;
    var offsetX = (w < 0) ? w : 0;
    var offsetY = (h < 0) ? h : 0;
    var width = Math.abs(w);
    var height = Math.abs(h);

    ctx.beginPath();
    ctx.globalAlpha=0.7;
    ctx.rect(startX + offsetX, startY + offsetY, width, height);
    ctx.fillStyle = x;
    ctx.fill();
    ctx.lineWidth = y;
    ctx.strokeStyle = x;
    ctx.stroke();
    ctx.closePath();
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

function renderAllCanvas(){
    var cnxRender = cnvRender.getContext( "2d" );
    cnxRender.drawImage(
        canvas
        ,0,0
        ,cnvRender.width,cnvRender.height
    );
    cnxRender.drawImage(
        cnvHid
        ,0,0
        ,cnvRender.width,cnvRender.height
    );
}

var canvas，cnvHid，cnvRender，ctx，flag=false，
prevX=0，
currX=0，
prevY=0，
咖喱=0，
currShape=‘矩形’，
mouseIsDown=0，
startX，endX，startY，endY，
dot_标志=假；
var x=“白色”，
y=2；
函数init（）{
canvas=document.getElementById（'can'）；
cnvHid=document.getElementById（“canHid”）；
cnvRender=document.getElementById（“canRend”）；
ctx=canvas.getContext（“2d”）；
var imageObj=新图像（）；//画布图像Obj
imageObj.onload=函数（）{
drawImage（imageObj，69，50）；//在画布上加载图像
renderAllCanvas（）；
};
imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg“；//加载图像
w=canvas.width；//画布宽度
h=canvas.height；//画布高度
//检查要绘制的形状
eventListener（）；
}
函数eventListener（）{
if（currShape=='rectangle'）{
cnvRender.addEventListener（“mousedown”，函数（e）{
mouseDown（e）；
renderAllCanvas（）；
}，假）；
cnvRender.addEventListener（“mousemove”，函数（e）{
mouseXY（e）；
renderAllCanvas（）；
}，假）；
cnvRender.addEventListener（“mouseup”，函数（e）{
mouseUp（e）；
renderAllCanvas（）；
}，假）；
}
}
功能鼠标（eve）{
if（mouseIsDown！==0）{
mouseIsDown=0；
var pos=getMousePos（画布，eve）；
endX=位置x；
endY=位置y；
if（currShape=='rectangle'）
{
drawSquare（画布）；//鼠标向上时更新
cnvHid.getContext（“2d”）.clearRect（0,0，cnvHid.width，cnvHid.height）；
}
}
}
函数mouseDown（eve）{
mouseIsDown=1；
变量
<!DOCTYPE HTML>
<html>
    <body onload="init()">
        <div class="canvasbody">
        <canvas id="can" width="400" height="400" style="display: none;"></canvas>
        <canvas id="canHid" width="400" height="400" style="display: none;"></canvas>
        <canvas id="canRend" width="400" height="400" style="border:1px dotted #eee;"></canvas>
        </div>
    </body>
</html>