想给绘制的多个矩形，添加完整的图片

Question

<script type="text/javascript">

var canvas=document.getElementById("myCanvas");

var context=canvas.getContext("2d");

var bags=[]

var img=new Image();

img.src="img/redbag.png";

window.onload=function(){

canvas.width=800;

canvas.height=800;

setInterval(function(){

for(var i=0;i<3;i++){

var bag={x:Math.random()*canvas.width,y:Math.random()*canvas.height}

bags[i]=bag;

}

draw();

},1000)

canvas.addEventListener("mouseup",change)

}

function change(event){

var x=event.clientX-canvas.getBoundingClientRect().left;

var y=event.clientY-canvas.getBoundingClientRect().top;

draw(x,y);

}

function draw(x,y){

context.clearRect(0,0,canvas.width,canvas.height)

for(var i=0;i<bags.length;i++){

context.beginPath();

context.rect(bags[i].x,bags[i].y,60,60);

var pat=context.createPattern(img,"repeat")

context.fillStyle=pat;

context.fill();

if(context.isPointInPath(x,y)){

context.fillStyle="red";

context.fill();

}

}

}

</script>

Answer 1

function draw(x,y){ context.clearRect(0,0,canvas.width,canvas.height) for(var i=0;i<bags.length;i++){ context.beginPath(); context.rect(bags[i].x,bags[i].y,60,60); context.drawImage(img,bags[i].x,bags[i].y)/* var pat=context.createPattern(img,"no-repeat") context.fillStyle=pat; context.fill();*/ if(context.isPointInPath(x,y)){ console.log(i) context.fillStyle="red"; context.fill(); } }} 我用这样的解决方法，不知道还有没其他更合适的