GCanvas 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
GCanvas 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
GCanvas 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
GCanvas 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
GCanvas 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

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>
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (4)

加载中
前面的大哥们,你们考虑过阿里的感受吗
2018/03/11 23:32
回复
举报
淘宝都卡成那样了,你跟我说极高帧率??
2018/03/05 09:54
回复
举报
淘宝手机客户端太费资源了,而且后台跑的东西极费内存
2018/03/03 19:31
回复
举报
淘宝那么卡 这个能行吗
2018/03/03 11:20
回复
举报
更多评论
暂无内容
2020/02/16 09:42

5分钟带你看懂 GCanvas渲染引擎的演进

作者| 蒋卫星(韦青) 出品|阿里巴巴新零售淘系技术部 本文内容大纲: 1、轻量级图形渲染引擎与应用 2、渲染引擎演进与优化之路 3、渲染引擎未来的发展方向 GCanvas 的定位是遵循 w3c 标准的跨平台的轻量级图形渲染...

0
0
2020/07/02 07:27

开源项目:G3D —— Hybrid 环境下的 WebGL 3D 渲染引擎

G3D 是一款基于 WebGL 的 JavaScript 3D 渲染引擎,借助 GCanvas,G3D 可以运行在 Weex,ReactNative 等 hybrid 环境下。G3D 由淘宝终端团队推出,并于 2018 年 3 月与 GCanvas 同时宣布正式开源。 那么就会有同学...

0
0
2018/07/02 15:36

G3D 渲染引擎简介

G3D 是一款基于 WebGL 的 JavaScript 3D 渲染引擎,借助 GCanvas,G3D 可以运行在 Weex,ReactNative 等 hybrid 环境下。G3D 由淘宝终端团队推出,并于 2018 年 3 月与 GCanvas 同时宣布正式开源。 那么就会有同学...

0
0
发表了博客
2018/05/07 16:31

基于canvas实现的高性能、跨平台的股票图表库--clchart

ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台。在React Native和Weex上完全适配开源项目GCanvas,可轻松使用GCanvas来使得您开发的应用在android和ios上具有原生绘图的能力。...

0
0
发表了博客
2018/05/07 16:45

High-performance, cross-platform stock chart library based on the canvas - clchart

[ClChart](https://github.com/seerline/clchart) is a simple, high-performance and cross-platform open source project for stock data visualization created based on the canvas. Support PC, webApp and [React Native](https://github.com/facebook/react-native) and [Weex](https://github.com/apache/incuba...

0
0
2020/01/20 14:30

淘宝小游戏了解一下?技术引擎让你喜提2000条锦鲤

今天的淘宝是月活过6亿的超级APP,它承载的不仅仅是购物的能力,实际上在淘宝有非常丰富的内容生态和内容体验。比如说以淘宝头条为代表的资讯类模块,以淘宝直播为代表的直播模块。对于游戏这种内容形态,会在淘宝...

0
0
2017/03/09 18:28

Weex Android的canvas动画性能优化

Weex是手机淘宝推出的轻量级跨平台UI解决方案,它在iOS、Android和H5三端提供了一致的渲染能力。 众所周知,Weex的用户有很多是前端开发者,一直以来他们都希望Weex能直接支持canvas标签,这样可以利用他们熟悉的...

0
0
2020/01/11 22:18

一次美丽的“约会” |Weex Meetup 深圳站的一点感想

在今年 1 月 19 号举办的 Weex Conf 2018 大会上曾承诺过,Weex 社区今年将会在多个地方举办线下的 Meetup 活动,和全国各地的开发者一起面对面的深入交流。这不,在 2018 年 3 月 31 号,来自阿里巴巴和腾讯的小...

0
0
01/13 14:23

让数据栩栩如生|几行代码轻松获得想要的图表展示!

2015 年底,支付宝财富业务飞速发展,有大量金融相关的可视化需求,但在当时社区上找不到合适的移动端图表,蚂蚁技术团队便开始开发一款针对于移动端的图表库。在经过大量的实践和经验后,充分探讨用 C++ 重新实现...

0
0
发表了博客
2020/03/19 10:42

蚂蚁金服 AntV F2 3.6 发布,更强!更快!

F2 3.6 发布,更强!更快! 导读 F2,为移动端而生的可视化图表引擎。从 3.1 全新版本发布以来,我们一直朝着提供高性能,高扩展,开箱即用的生动图表的方向努力,同时面对移动端多样的环境,多端适配也一直是我们...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
4 评论
38 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部