javascript - Get boundaries (position) of canvas drawn context lines -

javascript - Get boundaries (position) of canvas drawn context lines -

i'm making little testing thing physics. have drawn circle lines using canvas , context:

function drawangles () { var d = 50; //start line @ (10, 20), move 50px away @ angle of 30 degrees var angle = 80 * math.pi/180; ctx.beginpath(); ctx.moveto(300,0); ctx.lineto(300,600); //x, y ctx.moveto(0,300); ctx.lineto(600,300); ctx.arc(300,300,300,0,2*math.pi); ctx.stroke(); }

i want somehow curved boundaries of circle can tell if ball element has collided.

if i'm testing boundaries on typical div, can this:

var divcoords= $(".boundingboxdiv").position(); var top = divcoords.top; etc...

how do context lines?

here's image... ball should bounce off of circle.

live demo

this pretty easy accomplish, in radius based collision check distance if distance closer radius objects have collided. in instance need opposite, if objects distance greater boundary radius need alter angle maintain objects in.

so first need identify our boundary center points, , boundary radius,

var boundaryradius = 300, boundaryx = 300, boundaryy = 300;

later on in ball.update method check against these values.

var dx = boundaryx - this.x, dy = boundaryy - this.y

we need distance our ball , boundaries center point.

dist = math.sqrt(dx * dx + dy * dy);

now need velocity based on our current angle

this.radians = this.angle * math.pi/ 180; this.velx = math.cos(this.radians) * this.speed; this.vely = math.sin(this.radians) * this.speed;

next check if still within of boundaries. in instance if our distance less 300 - our own radius (which 10) 290, maintain moving.

if (dist < boundaryradius-this.radius) { this.x += this.velx; this.y += this.vely;

else if our distance greater 290, need first move bit aren't colliding, alter our heading angle. can in much fancier ways actual calculate should bounce to, in illustration create opposite angle tad bit of randomness.

} else { this.x -= this.velx; this.y -= this.vely; this.angle += 180+math.random()*45; }

code in entirety.

var canvas = document.getelementbyid("canvas"), ctx = canvas.getcontext("2d"), width = 600, height = 600; canvas.width = width; canvas.height = height; var boundaryradius = 300, boundaryx = 300, boundaryy = 300; var ball = function (x, y, speed) { this.x = x || 0; this.y = y || 0; this.radius = 10; this.speed = speed || 10; this.color = "rgb(255,0,0)"; this.angle = math.random() * 360; this.radians = this.angle * math.pi/ 180; this.velx = 0; this.vely = 0; } ball.prototype.update = function () { var dx = boundaryx - this.x, dy = boundaryy - this.y, dist = math.sqrt(dx * dx + dy * dy); this.radians = this.angle * math.pi/ 180; this.velx = math.cos(this.radians) * this.speed; this.vely = math.sin(this.radians) * this.speed; // check if still within of our boundary. if (dist < boundaryradius-this.radius) { this.x += this.velx; this.y += this.vely; } else { // collision, step , take opposite angle bit of randomness. this.x -= this.velx; this.y -= this.vely; this.angle += 180+math.random()*45; } }; ball.prototype.render = function () { ctx.fillstyle = this.color; ctx.beginpath(); // draw our circle x , y beingness center ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2); ctx.closepath(); ctx.fill(); ctx.beginpath(); ctx.moveto(this.x, this.y); ctx.lineto(this.px, this.py); ctx.closepath(); }; var balls = [], ballnum = 10; for(var = 0; < ballnum; i++){ balls.push(new ball(boundaryx + math.random()*30, boundaryy + math.random() * 30, 5 + math.random()*15)); } function drawangles() { var d = 50; //start line @ (10, 20), move 50px away @ angle of 30 degrees var angle = 80 * math.pi / 180; ctx.beginpath(); ctx.moveto(300, 0); ctx.lineto(300, 600); //x, y ctx.moveto(0, 300); ctx.lineto(600, 300); ctx.arc(boundaryx, boundaryy, boundaryradius, 0, 2 * math.pi); ctx.strokestyle = "#000"; ctx.stroke(); } function render() { ctx.clearrect(0, 0, width, height); drawangles(); balls.foreach(function(e){ e.update(); e.render(); }); requestanimationframe(render); } render();

javascript html5 canvas