网站首页 > 知识剖析 正文
介绍
GCanvas是由阿里巴巴开发的用于移动设备的跨平台渲染引擎。它是使用基于OpenGL ES的C ++编写的,因此可以为Javascript运行时提供高性能的2D / WebGL渲染功能。它还具有类似于浏览器的canvas API,因此使用非常方便且灵活,特别是对于Web开发人员而言。支持的操作系统有Android 4.0+(API 14)和iOS 8.0+。
Github地址
https://github.com/alibaba/GCanvas
特性
- 跨平台,支持流行的iOS和Android
- 高性能,通过OpenGL ES加速图形绘制
- 提供javascript运行时,例如Weex和ReactNative
- 方便使用HTML画布等Javascript 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 = 'TB1KwRTlh6I8KJjy0FgXXXXzVXa-225-75.png'; image.onload = function(){ ctx.drawImage(image, 100, 300); };
谁在使用?
总结
GCanvas是用于移动应用程序的混合画布SDK,使用Javascript绘制本机设备。它支持Weex和ReactNative等混合框架。GCanvas使用与HTML5 canvas相同的API。它同时支持图形2D和WebGL API。GCanvas还利用大多数设备上的硬件加速功能,能够使用Javascript以很高的帧速率绘制场景。
猜你喜欢
- 2024-11-13 HTML5图形绘制——canvas元素 html5 canvas绘图
- 2024-11-13 使用javascript创建一个canvas元素指纹信息用于判断客户端
- 2024-11-13 推荐10个基于Vue3.0全家桶的优秀开源项目
- 2024-11-13 将你的 Virtual dom 渲染成 Canvas
- 2024-11-13 ChatGPT Canvas实测:对不起,它还不是AGI的终极交互形态
- 2024-11-13 如何在 Canvas 上实现图形拾取? canvas获取图片坐标
- 2024-11-13 canvas绘制饼图的方法介绍(代码) css画饼图
- 2024-11-13 前端福音:为什么使用 React 和 SVG 开发图形 UI 是天作之合?
- 2024-11-13 QRCanvas - 动态生成二维码的开源优秀 js 库
- 2024-11-13 HTML5(六)——Canvas 高级操作 h5中canvas
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)