Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alibaba/GCanvas
A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎) https://alibaba.github.io/GCanvas
https://github.com/alibaba/GCanvas
2d canvas graphics opengl webgl
Last synced: 6 days ago
JSON representation
A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎) https://alibaba.github.io/GCanvas
- Host: GitHub
- URL: https://github.com/alibaba/GCanvas
- Owner: alibaba
- License: apache-2.0
- Created: 2018-02-26T08:10:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T16:35:47.000Z (over 1 year ago)
- Last Synced: 2024-06-18T15:28:29.126Z (23 days ago)
- Topics: 2d, canvas, graphics, opengl, webgl
- Language: C
- Homepage:
- Size: 88.2 MB
- Stars: 1,867
- Watchers: 75
- Forks: 206
- Open Issues: 43
-
Metadata Files:
- Readme: README.MD
- Contributing: docs/Contributing.md
- License: LICENSE
Lists
- awesome-stars - alibaba/GCanvas - A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎) https://alibaba.github.io/GCanvas (C)
README
# [GCanvas](https://alibaba.github.io/GCanvas/)
GCanvas is a cross-platform rendering engine for mobile devices developed by Alibaba. It is written with C++ based on OpenGL ES, so it can provide high performance 2D/WebGL rendering capabilities for JavaScript runtime. It also has browser-like canvas APIs, so it's very convenient and flexiable for use, especially for web developers.
Supported operating systems are Android 4.0+ (API 14) and iOS 8.0+.
- [Getting Started](#getting-started)
- [Documentation](#documentation)
- [Examples](#examples)
- [Built With](#build-with)
- [Opening Issues](#opening-issues)
- [Contributing](#contributing)
- [License](#license)
## Distribution
### GCanvas
* iOS [GCanvas](https://cocoapods.org/pods/GCanvas) [](https://badge.fury.io/co/GCanvas)
* Android com.taobao.gcanvas:core:1.1.0(publishing)
### GCanvas NPM Package
* [@gcanvas/core](https://www.npmjs.com/package/@gcanvas/core) [](https://www.npmjs.com/package/@gcanvas/core)
## Features
- Cross-platform, support popular iOS and Android.
- High performance, accelerate graphic draw by OpenGL ES.
- Provide JavaScript runtime, such as [Weex](https://github.com/apache/incubator-weex) and [ReactNative](https://github.com/facebook/react-native/). convenient to use JavaScript API like HTML canvas.
- Scalable Architecture, easy to implement a GCanvas bridge by yourself following the guide [Custom Native Bridge](https://alibaba.github.io/GCanvas/docs/Custom%20Bridge.html) .
- Small size.
## Introduction
See the [Introduction to GCanvas](https://alibaba.github.io/GCanvas/docs/Developer's%20Guide.html) for a detailed introduction to GCanvas.
## Getting Started
We will continue to maintain the C++ `core` engine. And will no further update and support `Weex`、 `ReactNative` and `JS bridge`.
### Node
Follow [Node Guide](./node/README.md), use GCanvas in Node.js.
### JavaScript
Try our [Playground](https://alibaba.github.io/GCanvas/playground.html).
GCanvas has browser-like canvas APIs, so almost all of the APIs are exactly same as HTML5 canvas. At this moment, we have already supported 90% of 2D APIs and 99% of WebGL APIs. You can find out those informations in [2D APIs](https://alibaba.github.io/GCanvas/docs/Graphics%202D.html) and [WebGL APIs](https://alibaba.github.io/GCanvas/docs/WebGL.html).
## Documentation
Check [Documentation](https://alibaba.github.io/GCanvas/docs/Introduction.html) for more information.
## Examples
We take [Weex](https://github.com/apache/incubator-weex) as example, code snippet of context 2d using `GCanvas`.
```javascript
import { enable, WeexBridge, Image as GImage } from "@gcanvas/core";
var gcanvas = enable(this.$refs.canvas_holder, {bridge: WeexBridge});
var ctx = gcanvas.getContext("2d");
//rect
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
//rect
ctx.fillStyle = 'black';
ctx.fillRect(100, 100, 100, 100);
ctx.fillRect(25, 210, 700, 5);
//circle
ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
ctx.fill();
var image = new GImage();
image.src = 'https://gw.alicdn.com/tfs/TB1KwRTlh6I8KJjy0FgXXXXzVXa-225-75.png';
image.onload = function(){
ctx.drawImage(image, 100, 300);
};
```
## Built With
* [Freetype](https://www.freetype.org/) - Used for font rendering on Android
## Changelog
New Changelog record in [CHANGELOG](./docs/Changelog.md) for details.
## Open Issues
If you encounter a bug with GCanvas we would like to hear about it. Search the [existing issues]() and try to make sure your problem doesn’t already exist before opening a new issue. It’s helpful if you include the version of GCanvas and OS you’re using. Please include a stack trace and reduced repro case when appropriate, too.
## Contributing
Please read [CONTRIBUTING](./docs/Contributing.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Authors
GCanvas Open Source Team
## License
This project is licensed under the Apache [LICENSE](./LICENSE)