dcloudio / Nvuecanvasdemo

概要

HBuilderX2.2.5（alpha）开始nvue页面支持Canvas。

Canvas插件基于GCanvas实现了微信小程序CanvasContext API, W3C WebGL API, 此工程为uni-app项目中nvue页面使用Canvas的演示demo

使用

1. 将gcanvas目录复制到HBX uniapp 工程下
2. 在页面中引入canvas js

import {
	enable,
	WeexBridge
} from '[自己的路径]/gcanvas/index.js';

3. 获取Canvas context

 /*通过元素引用获取canvas对象*/
 var ganvas = this.$refs["gcanvess"];
 var canvasObj = enable(ganvas, {bridge: WeexBridge});
 /*获取绘图所需的上下文*/
 var context = canvasObj.getContext('2d');
 var gl = canvasObj.getContext("webgl");
 /*调用具体API*/

API支持情况

• Canvas API

• CanvasContext API

• WebGL请参考https://alibaba.github.io/GCanvas/docs/WebGL.html

云端打包

Canvas是作为独立的模块，打包时需要选择使用Canvas模块才能正常使用相关的功能。 需要在manifest.json的代码视图中配置如下（暂时还不支持可视化界面操作）：

    "app-plus" : {
        /* 模块配置 */
        "modules" : {
            "Canvas" : "nvue canvas"    //使用Canvas模块
        },
	//...
    },
    //...

保存好提交云端打包。