GCanvas
GCanvas 是由阿里巴巴开发的一个针对移动设备的跨平台渲染引擎。它使用 C++ 并基于 OpenGL ES 编写，因此可以为 JavaScript 运行时提供高性能的 2D/WebGL 渲染能力。它还拥有类似的浏览器 canvas API，因此使用起来非常方便灵活，尤其是对于网页开发者来说。
支持的操作系统包括 Android 4.0+ (API 14) 和 iOS 8.0+。
分发
GCanvas
-
iOS GCanvas
-
Android com.taobao.gcanvas:core:1.1.0(publishing)
GCanvas Weex 组件
-
iOS WeexGcanvas
-
Android com.taobao.gcanvas.bridges:weex-brigde 1.1.0 (发布中)
GCanvas NPM 包
功能
- 跨平台，支持流行的 iOS 和 Android。
- 高性能，通过 OpenGL ES 加速图形绘制。
- 提供 JavaScript 运行时，如 Weex 和 ReactNative，方便使用与 HTML canvas 相似的 JavaScript API。
- 可伸缩架构，按照指南自定义原生桥接，易于实现 GCanvas 桥接。
- 体积小。
介绍
请参阅GCanvas 介绍了解 GCanvas 的详细介绍。
入门指南
Weex
遵循Weex 配置指南，将 GCanvas 集成到 Weex 中。
ReactNative
遵循ReactNative 配置指南以在 ReactNative 中集成 GCanvas。
JavaScript
尝试我们的Playground。GCanvas 拥有类似浏览器的 canvas API，因此几乎所有 API 都与 HTML5 canvas 完全相同。目前，我们已经支持了 90% 的 2D API 和 99% 的 WebGL API。您可以在2D API和WebGL API中找到这些信息。
文档
查看更多文档信息。
示例
以Weex为例，以下是使用 GCanvas 的 2D 上下文代码片段。
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);
};由
- Freetype - 用于 Android 上字体渲染
更新日志
查看更新日志中的最新记录。
开放问题
如果您在使用 GCanvas 时遇到bug，我们非常希望得知。请在现有问题中搜索，并确保您的问题尚未存在后再创建新的问题。如果您能提供正在使用的 GCanvas 版本和操作系统会很有帮助。当适用时，也请提供堆栈跟踪和简化的重现案例。
贡献
请阅读CONTRIBUTING以了解我们的行为准则和向我们提交拉取请求的过程。
作者
GCanvas开源团队
许可
本项目采用Apache许可证——请参阅LICENSE文件以了解详细信息