GCanvas
GCanvas 是由阿里巴巴开发的一种适用于移动设备的跨平台渲染引擎。它以 C++ 编写,基于 OpenGL ES,因此可以为 JavaScript 运行时提供高性能的 2D/WebGL 渲染能力。它还具有类似浏览器的 canvas API,因此使用起来非常方便灵活,尤其是对于 Web 开发者来说。
支持的操作系统包括 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 (发布中)
-
JS gcanvas.js
特性
- 跨平台,支持流行的 iOS 和 Android。
- 高性能,通过 OpenGL ES 加速图形绘制。
- 提供javascript运行时,例如 Weex 和 ReactNative,方便使用类似HTML canvas的javascript API。
- 可扩展的架构,可根据指南自定义原生桥接自行实现 GCanvas 桥接。
- 体积小巧。
简介
请参阅GCanvas 简介以获取对 GCanvas 的详细介绍。
入门指南
Weex
遵循Weex 集成指南将 GCanvas 集成到 Weex 中
ReactNative
遵循 ReactNative 集成指南将 GCanvas 集成到 ReactNative 中。
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 "../../../../js/src/index.js";
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上用于字体渲染
变更日志
在CHANGELOG中记录了新的变更日志。
开放问题
如果您在使用GCanvas时遇到错误,我们希望能了解相关情况。请搜索现有问题,在提交新问题时确保您的问题并不已存在。如果可能,请提供您使用的GCanvas版本和操作系统。同时,如有必要,请包括堆栈跟踪和简化复现案例。
参与贡献
请阅读CONTRIBUTING了解我们的行为准则以及向我们提交拉取请求的流程。
作者
GCanvas开源团队
许可
本项目采用Apache许可证 - 详见LICENSE文件了解详细信息。