简体   繁体   中英

Determine shape creation with canvas

I want to test with JavaScript that a canvas shape was created.

For example: I'm creating a circle:

context.beginPath();
context.fillStyle = this.color;
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
context.closePath();

In this moment circle suppose to be created. I'm thinking to test it like this:

context.isPointInPath(this.x+1,this.y+1) == true;

But I don't find this very elegant. Anyone has a better idea?

x 2 + y 2 < r 2

r - radius

This is the set of points for a circle.

All the values of x and y that meets the formula inequality are inside the circle.

So check for a point with values (-r< x <r,-r< y <r) to be true.

And check for points (r+1,r+1) (r+1,-r-1) (-r-1,r+1) (-r-1,-r-1) to be false

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM