GCanvas 提供了一套类似于 H5 Canvas 标准的 JavaScript API。基于这套 API 可以方便的去做图形绘制、动画渲染等,开发的体验与 H5 Canvas 是完全一样的。
GCanvas发展经历了两个阶段。
用一句话来概括 GCanvas,即遵循 W3C 标准,移动端的跨平台的高性能图形渲染引擎。可以从三个方面来解释。
如上图所示 GCanvas 由三层组成 JavaScript 层、插件层、核心渲染库。
上图是 JavaScript 层渲染核心库的概要流程,关键的两个流程是初始化和渲染。
以 Weex 为例, 绘制图形和图片的测试代码如下。
<template>
<div ref="test">
<gcanvas ref="canvas_holder" style="width:750; height:750; background-color:rgba(0, 0, 0, 0.1)"></gcanvas>
</div>
</template>
<script>
var GCanvas=require('weex-gcanvas');
var Image=require('weex-gcanvas/gcanvasimage');
module.exports = {
mounted: function () {
//1、初始化 GCanvas
var ref = this.$refs.canvas_holder;
var gcanvas = GCanvas.start(ref);
var ctx = gcanvas.getContext('2d');
//2、执行渲染操作
//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();
//drawImage
var image = new Image();
image.onload = function(){
ctx.drawImage(image, 100, 330);
ctx.drawImage(image, 100+300, 330, 225, 75);
}
image.src = 'https://www.khronos.org/assets/uploads/ceimg/made/assets/uploads/apis/OpenGL-ES_100px_May16_225_75.png';
}
};
</script>
通过 Weex Playground 运行结果如下
具体分析下整个流程。结合插件层和核心渲染库来分析。
渲染命令的解析,最终通过调用 OpenGL ES 的方法或组合方法来实现 Context2D 和 WebGL 的效果,生成帧缓存,提交给 GPU 渲染,最后在绑定的 GLKView 视图上显示。
下面给出一些 GCanvas 的案例。