Author: | Madmadmax |
---|---|
Views Total: | 1,743 views |
Official Page: | Go to website |
Last Update: | August 31, 2019 |
License: | MIT |
Preview:

Description:
The circlesJS JavaScript library makes it simple to generate customizable circle and arc shapes using HTML5 canvas.
How to use it:
Include the main JavaScript file ‘circles.js’ on the web page.
<script src="circles.js"></script>
Create a container to place the generated circles and arcs.
<div id="container"></div>
Initialize the circlesJS.
let circles = new Circles("container"); circles.init();
Create the circles and arcs with your own styles.
circles.add({id: 1, x: 40, y: 50, size: 30, width: 2, fill: 30, color: "#f00"}); circles.add({id: "two", x: 90, y: 140, size: 40, width: 6, fill: 75, color: "#0f0"}); circles.add({id: "three", x: 200, y: 200, size: 50, width: 15, fill: 90, color: "#000"});
Draw the circles and arcs inside the container.
circles.draw();
Change a specific shape.
circles.change([{id: 1, params: {fill: 70, width: 5}}])
Delete & clear.
// deletes the 3rd shape circles.delete("three"); // deletes all the shapes circles.deleteAll(); // destroys the library circles.clear();
Changelog:
v2.0 (08/31/2019)
- [fix] animation duration bug