Skip to content
A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎) https://alibaba.github.io/GCanvas
JavaScript C Java C++ Objective-C Objective-C++ Other
Branch: master
Clone or download
Latest commit 9d6d67f Dec 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gradle
android
bridges
core chore(.gitignore): rm the freetype in gitignore Dec 8, 2019
docs docs: upate docs and publish new website Nov 21, 2019
examples/ReactNativeGCanvasExample feat: iOS dir change update Dec 9, 2019
ios chroe:change the folder to root and rm the gcanvas Dec 8, 2019
packages/gcanvas
tools/build_website docs: add deploy webiste Nov 21, 2019
.gitignore chore(.gitignore): rm the freetype in gitignore Dec 8, 2019
.travis.yml
CMakeLists.txt chroe:change the folder to root and rm the gcanvas Dec 8, 2019
GCanvas.iml
GCanvas.podspec
LICENSE
README.MD
WeexGcanvas.podspec
build.gradle chroe:change the folder to root and rm the gcanvas Dec 8, 2019
gradle.properties chroe:change the folder to root and rm the gcanvas Dec 8, 2019
gradlew
gradlew.bat
publish.gradle
settings.gradle

README.MD

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+.

Distribution

GCanvas

  • iOS GCanvas CocoaPods Version

  • Android com.taobao.gcanvas:core:1.1.0(publishing)

GCanvas Weex Component

  • iOS WeexGcanvas CocoaPods Version

  • Android com.taobao.gcanvas.bridges:weex-brigde 1.1.0 (publishing)

GCanvas NPM Package

Features

  • Cross-platform, support popular iOS and Android.
  • High performance, accelerate graphic draw by OpenGL ES.
  • Provide javascript runtime, such as Weex and ReactNative. convenient to use Javascript API like HTML canvas.
  • Scalable Architecture, easy to implement a GCanvas bridge by yourself following the guide Custom Native Bridge .
  • Small size.

Introduction

See the Introduction to GCanvas for a detailed introduction to GCanvas.

Getting Started

Weex

Follow Weex Setup Guide to integrate GCanvas on Weex

ReactNative

Follow ReactNative Setup Guide to integrate GCanvas on ReactNative.

Javascript

Try our Playground. 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 and WebGL APIs.

Documentation

Check Documentation for more information.

Examples

We take Weex as example, code snippet of context 2d using GCanvas.

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 - Used for font rendering on Android

Changelog

New Changelog record in CHANGELOG 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 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 - see the LICENSE file for details

You can’t perform that action at this time.