GCanvas 介绍
GCanvas 是由淘宝开发的针对移动设备的跨平台渲染引擎。 它使用 C ++ 编写，基于 OpenGL ES，可为 Javascript
运行时提供高性能的 2D / WebGL 渲染。它也具有类似浏览器的画布 API ，因此使用起来非常方便和灵活，尤其适用于 Web 开发人员。
GCanvas 支持 Android 4.0+（API 14）和 iOS 8.0+ 。支持 Weex 和 ReactNative 等混合框架。
它还可以利用大多数设备上的硬件加速，使得开发者可以使用 Javascript 以非常高的帧率绘制场景。
Demo
<template>
<div>
<gcanvas v-if="isWeex" ref="canvas_holder" v-bind:style="{width:width,height:height,backgroundColor:'rgba(255,255,255,1)'}"></gcanvas>
<canvas v-if="!isWeex" ref="canvas_holder" v-bind:style="{width:width+'px',height:height+'px',backgroundColor:'rgba(255,255,255,1)'}"></canvas>
</div>
</template>
<script>
const isWeex = typeof callNative === "function";
const dom = weex.requireModule("dom");
import { enable, WeexBridge, Image as GImage } from "gcanvas.js";
let EnvImage = isWeex ? GImage : Image;
function run(canvas, { requestAnimationFrame }) {
var img = new EnvImage();
let cxt = canvas.getContext('2d');
img.onload = function(){
cxt.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'https://c1.staticflickr.com/3/2388/5800134409_83345951ed_b.jpg';
}
export default {
data() {
return {
isWeex,
width: 750,
height: 980
};
},
mounted: function() {
const start = () => {
var ref = this.$refs.canvas_holder;
var size = isWeex
? {
width: parseInt(this.width),
height: parseInt(this.height)
}
: {
width: parseInt(ref.clientWidth),
height: parseInt(ref.clientHeight)
};
if (isWeex) {
ref = enable(ref, { debug: true, bridge: WeexBridge });
}
ref.width = size.width;
ref.height = size.height;
run(ref, {
requestAnimationFrame: isWeex ? setTimeout : requestAnimationFrame
});
};
setTimeout(function(){
dom.getComponentRect("viewport", e => {
this.height = e.size.height;
this.isReady = true;
setTimeout(start, 1000);
})
}, 50);
}
};
</script>
GCanvas 官网
https://alibaba.github.io/GCanvas/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。