1 | English | [简体中文](./README-zh_CN.md)
|
2 |
|
3 | # g-canvas
|
4 |
|
5 | [![](https://img.shields.io/travis/antvis/g.svg)](https://travis-ci.org/antvis/g)
|
6 | ![](https://img.shields.io/badge/language-javascript-red.svg)
|
7 | ![](https://img.shields.io/badge/license-MIT-000000.svg)
|
8 |
|
9 | [![npm package](https://img.shields.io/npm/v/@antv/g-canvas.svg)](https://www.npmjs.com/package/@antv/g-canavs)
|
10 | [![npm downloads](http://img.shields.io/npm/dm/@antv/g-canvas.svg)](https://npmjs.org/package/@antv/g-canvas)
|
11 | [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g.svg)](http://isitmaintained.com/project/antvis/g 'Percentage of issues still open')
|
12 |
|
13 | - A canvas library which providing 2d draw for AntV.
|
14 |
|
15 | ## ✨ Features
|
16 |
|
17 | - Powerful and scalable rendering capability with built-in basic Graphics.
|
18 | - Excellent rendering performance and supports visualization scenarios with large amounts of data.
|
19 | - Complete simulation of browser DOM events, and no difference from native events.
|
20 | - Smooth animation implementation and rich configuration interfaces.
|
21 |
|
22 | ## 📦 Install
|
23 |
|
24 | ```bash
|
25 | $ npm install @antv/g-canvas --save
|
26 | ```
|
27 |
|
28 | ## 🔨 Usage
|
29 |
|
30 | ```html
|
31 | <div id="c1"></div>
|
32 | ```
|
33 |
|
34 | ```js
|
35 | import { Canvas } from '@antv/g-canvas';
|
36 |
|
37 | const canvas = new Canvas({
|
38 | container: 'c1',
|
39 | width: 500,
|
40 | height: 500,
|
41 | });
|
42 |
|
43 | const group = canvas.addGroup();
|
44 | group.addShape('circle', {
|
45 | attrs: {
|
46 | x: 100,
|
47 | y: 100,
|
48 | r: 50,
|
49 | fill: 'red',
|
50 | stroke: 'blue',
|
51 | lineWidth: 5,
|
52 | },
|
53 | });
|
54 | ```
|