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>