canvasキャンバスドラッグ衝突canvasのisPointInPath解析を実現

isPointInPath():指定された座標点がcanvasで描画されたパスの中にあるかどうかを判断し、trueを返す場合、falseを返さない場合、最後の描画された閉じたパスしか判断できません
注意:strokeRect()fillRect()この2つの方法はisPointInPath()には適用されません.
canvasキャンバス内のすべての移動は、クリアキャンバスで再描画され、js内のdom要素のように移動するのではなく、特定のオブジェクトのleft値またはtop値を設定して移動することができ、canvasではキャンバスをクリアするたびに再描画され、イベント間隔が短く、連続しているように見えます.
要素をドラッグしてキャンバス内を移動するには、次の手順に従います.

	
	
	


	


	//isPointInPath():           canvas      ,     true,      false,               
	var ctx = cv.getContext("2d");
	//          isPointInPath()   
	// ctx.strokeRect()
	// ctx.fillRect(50,50,100,100);
	// canvas          ,              
	function Rect(x,y,w,h,c="#000"){
		this.x=x;
		this.y=y;
		this.w=w;
		this.h=h;
		this.c=c;
	}
	Rect.prototype.draw=function(){
		ctx.beginPath();
		ctx.rect(this.x,this.y,this.w,this.h);
		ctx.fillStyle=this.c;
		ctx.fill();
	}

	//      ,       
	
	//               ,   r1  r2     
	var r2 = new Rect(350,350,50,50,"yellow");
	r2.draw();
	var r1 = new Rect(50,50,50,50,"pink");
	r1.draw();
	//    
	cv.onmousedown=function(e) {
		//     canvas      
		var dx = e.clientX-cv.offsetLeft-1;
		var dy = e.clientY-cv.offsetTop-1;
		//             
		if(ctx.isPointInPath(dx,dy)){
			console.log("    ");
			//           
			dx=dx-r1.x;
			dy=dy-r1.y;
			cv.onmousemove=function(e){
				cv.width=cv.width;
				var mx = e.clientX-this.offsetLeft-1-dx;
				var my = e.clientY-this.offsetTop-1-dy;
				r1.x=mx;
				r1.y=my;
				//    
				if(isCrash(r2,r1)){
					r1.c="red";
				}else{
					r1.c="cyan";
				}		
				r2.draw();
				r1.draw();
			}	
		}else{
			console.log("    ");
		}
	};
	cv.onmouseup = function(){
		this.onmousemove=null;
	}

	//       :
	function isCrash(x,y){
		var l1 = x.x;
		var r1 =l1+x.w;
		var t1 = x.y;
		var b1 = t1+x.h;

		var l2 = y.x;
		var r2 =l2+y.w;
		var t2 = y.y;
		var b2 = t2+y.h;

		if(l1>r2 || r1<l2 || t1>b2 || b1 <t2){
			return false;
		}
		return true;

	}