нет все таки не разобрался)
если брать углы за окружность
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<canvas width="500" height="500"></canvas>
<script>
var canva = document.body.children[0];
var ctx = canva.getContext("2d");
var block = {
width:150,
height:30,
Draw: function (x, y) {
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(x,y,this.width, this.height);
this.y = y;
this.x = x;
boundary();
}
};
block.Draw(150,100);
function boundary() {
var rad = 20;
ctx.beginPath();
ctx.moveTo(block.x,block.y - rad);
ctx.lineTo(block.x + block.width , block.y - rad);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(block.x+ block.width + rad,block.y);
ctx.lineTo(block.x+ block.width + rad , block.y + block.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(block.x, block.y + block.height + rad);
ctx.lineTo(block.x + block.width , block.y + block.height + rad);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(block.x- rad,block.y);
ctx.lineTo(block.x - rad , block.y + block.height);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(block.x,block.y);
ctx.arc(block.x,block.y, rad,(Math.PI / 180)* -90, (Math.PI / 180)* -180, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(block.x +block.width,block.y);
ctx.arc(block.x +block.width, block.y, rad,(Math.PI / 180)* -90, (Math.PI / 180)* 0, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(block.x + block.width, block.y + block.height);
ctx.arc(block.x + block.width, block.y + block.height, rad,(Math.PI / 180)* 0, (Math.PI / 180)* 90, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(block.x ,block.y + block.height);
ctx.arc(block.x ,block.y + block.height, rad,(Math.PI / 180)* 180, (Math.PI / 180)* 90, true);
ctx.fill();
}
</script>
</body>
</html>
расчитывать пересечение двух окружностей , то возникает проблема когда шарик на шаге n не пересекается с окружностью , а на шаге n+1 он нужен дальше окружности..
проверял так
var d = (x - block.x)*(x - block.x) + (y - block.y + block.height) * (y - block.y + block.height);
if(d < (ball.R + ball.R ) * (ball.R + ball.R) && d > (ball.R - ball.R) * (ball.R - ball.R))
и блин не как не могу понять как автор
этой статьи так просто расчитывает пересечения с углами