在canvas上實現畫多個框的功能（框可實現拉伸功能）

html代碼如下：

<canvas id="myCanvas" width="700" height="400" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
</canvas>

js的代碼如下：

const c=document.getElementById("myCanvas");
const ctx=c.getContext("2d");
const scaleStep=1.05;
const minWidth=700,minHeight=400,maxWidth=750,maxHeight=450;
const img=document.createElement('img');
const elementWidth=700,elementHeight=400;
let startx,//起始x座標
    starty,//起始y座標
    flag,//是否點擊鼠標的標誌
    x,
    y,
    leftDistance,
    topDistance,
    op=0,//op操作類型 0 無操作 1 畫矩形框 2 拖動矩形框
    scale=1,
	type=0;
let layers=[];//圖層
let currentR;//當前點擊的矩形框
img.src='https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg';
img.οnlοad=function(){
    c.style.backgroundImage="url("+img.src+")";
    c.style.backgroundSize=`${c.width}px ${c.height}px`;
}
function reshow(x,y){
        let allNotIn=1;
        layers.forEach(item=>{
            //起始（重置）當前路勁
            ctx.beginPath();
            //繪製矩形
            ctx.rect(item.x1,item.y1,item.width,item.height);
            ctx.strokeStyle=item.strokeStyle
            if(x>=(item.x1-25/scale)&&x<=(item.x1+25/scale)&&y<=(item.y2-25/scale)&&y>=(item.y1+25/scale)){
                    resizeLeft(item);
            }else if(x>=(item.x2-25/scale)&&x<=(item.x2+25/scale)&&y<=(item.y2-25/scale)&&y>=(item.y1+25/scale)){
                    resizeWidth(item);
            }else if(y>=(item.y1-25/scale)&&y<=(item.y1+25/scale)&&x<=(item.x2-25/scale)&&x>=(item.x1+25/scale)){
                    resizeTop(item);
            }else if(y>=(item.y2-25/scale)&&y<=(item.y2+25/scale)&&x<=(item.x2-25/scale)&&x>=(item.x1+25/scale)){
                    resizeHeight(item);
            }else if(x>=(item.x1-25/scale)&&x<=(item.x1+25/scale)&&y<=(item.y1+25/scale)&&y>=(item.y1-25/scale)){
                    resizeLT(item);
            }else if(x>=(item.x2-25/scale)&&x<=(item.x2+25/scale)&&y<=(item.y2+25/scale)&&y>=(item.y2-25/scale)){
                    resizeWH(item);
            }else if(x>=(item.x1-25/scale)&&x<=(item.x1+25/scale)&&y<=(item.y2+25/scale)&&y>=(item.y2-25/scale)){
                    resizeLH(item);
            }else if(x>=(item.x2-25/scale)&&x<=(item.x2+25/scale)&&y<=(item.y1+25/scale)&&y>=(item.y1-25/scale)){
                    resizeWT(item);
            }
            if(ctx.isPointInPath(x*scale,y*scale)){//檢測指定的點是否在當前的路徑中，否則返回true
				render(item);
                allNotIn=0;
            }
            //繪製已定義的路徑
            ctx.stroke();
        })
    if(flag&&allNotIn&&op<3){
        op=1
    }

}
function isPointInRetc(x,y){
    let len=layers.length;
    for(let i=0;i<len;i++){
        if(layers[i].x1<x&&x<layers[i].x2&&layers[i].y1<y&&y<layers[i].y2){
            return layers[i];
        }
    }
}

調整矩形框的大小

//調整矩形框的大小
function fixPosition(position){
    if(position.x1>position.x2){
        let x=position.x1;
        position.x1=position.x2;
        position.x2=x;
    }
    if(position.y1>position.y2){
        let y=position.y1;
        position.y1=position.y2;
        position.y2=y;
    }
    position.width=position.x2-position.x1
    position.height=position.y2-position.y1
	if(position.width<50||position.height<50){
		position.width=60;
		position.height=60;
		position.x2+=position.x1+60;
		position.y2+=position.y1+60;
	}
    return position
}

這樣就可實現圖片的選框。圖片如下所示。