GCanvas 已经正式开源,开源官方主页,传送门
GCanvas 提供了一套类似于 H5 Canvas 标准的 JavaScript API。基于这套 API 可以方便的去做图形绘制、动画渲染等,开发的体验与 H5 Canvas 是完全一样的。
GCanvas发展经历了两个阶段。
用一句话来概括 GCanvas,即遵循 W3C 标准,移动端的跨平台的高性能图形渲染引擎。可以从三个方面来解释。
如上图所示 GCanvas 由三层组成 JavaScript 层、插件层、核心渲染库。
上图是 JavaScript 层渲染核心库的概要流程,关键的两个流程是初始化和渲染。
以 Weex 为例, 绘制图形和图片的测试代码如下。
<template>
<div>
<gcanvas v-if="isWeex" ref="canvas_holder" style="top: 0; width:750;height:1000;position:absolute;"></gcanvas>
<canvas v-if="!isWeex" ref="canvas_holder" style="width:750px;height:1000px;"></canvas>
</div>
</template>
<script>
const isWeex = weex.config.env.platform !== 'Web'
const { enable, WeexBridge, Image: GImage } = require('gcanvas.js');
const EnvImage = !isWeex ? Image : GImage;
export default {
data() {
return {
isWeex: isWeex ? 1 : 0
}
},
mounted: function () {
let ref = this.$refs.canvas_holder;
if (isWeex) {
ref = enable(ref, {bridge: WeexBridge});
}
var ctx = ref.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();
//drawImage
var image = new EnvImage();
image.onload = function(){
ctx.drawImage(image, 100, 330);
ctx.drawImage(image, 100+300, 330, 225, 75);
}
image.src = 'https://gw.alicdn.com/tfs/TB1KwRTlh6I8KJjy0FgXXXXzVXa-225-75.png';
}
};
</script>
通过 Weex Playground 运行结果如下
具体分析下整个流程。结合插件层和核心渲染库来分析。
渲染命令的解析,最终通过调用 OpenGL ES 的方法或组合方法来实现 Context2D 和 WebGL 的效果,生成帧缓存,提交给 GPU 渲染,最后在绑定的 GLKView 视图上显示。
下面给出一些 GCanvas 的案例。
最后附上 GCanvas Contex2D 和 WebGL API 的支持列表,支持常用的接口。API 覆盖情况请参考官网内容。
详见官网链接: Context2D 和 WebGL
← 深入理解 Node.js Stream 内部机制 LevelDB 实现分析 →题图:https://unsplash.com/photos/y3KZwM_nBTQ By @Trevor Paterson