From 4a141878f264f0487c86f7b46b895f7f6936d1b1 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Fri, 10 Jan 2025 18:24:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=9B=B4=E6=96=B0=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E4=BA=AB=E6=B5=B7=E6=8A=A5=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hbuilderx/launch.json                        |    6 +-
 App.vue                                       |    4 +-
 components/cc-poster.vue                      |  283 ----
 components/my-poster/my-poster.vue            |  204 +++
 components/my-video-list/list-item.vue        |   46 +-
 components/my-video-list/my-video-list.vue    |  135 +-
 components/tki-qrcode/qrcode.js               | 1206 -----------------
 components/tki-qrcode/tki-qrcode.vue          |  205 ---
 gcanvas/bridge/bridge-weex.js                 |  241 ++++
 gcanvas/context-2d/FillStyleLinearGradient.js |   18 +
 gcanvas/context-2d/FillStylePattern.js        |    8 +
 gcanvas/context-2d/FillStyleRadialGradient.js |   17 +
 gcanvas/context-2d/RenderingContext.js        |  666 +++++++++
 gcanvas/context-webgl/ActiveInfo.js           |   11 +
 gcanvas/context-webgl/Buffer.js               |   21 +
 gcanvas/context-webgl/Framebuffer.js          |   21 +
 gcanvas/context-webgl/GLenum.js               |  298 ++++
 gcanvas/context-webgl/GLmethod.js             |  142 ++
 gcanvas/context-webgl/GLtype.js               |   23 +
 gcanvas/context-webgl/Program.js              |   21 +
 gcanvas/context-webgl/Renderbuffer.js         |   21 +
 gcanvas/context-webgl/RenderingContext.js     | 1191 ++++++++++++++++
 gcanvas/context-webgl/Shader.js               |   22 +
 .../context-webgl/ShaderPrecisionFormat.js    |   11 +
 gcanvas/context-webgl/Texture.js              |   22 +
 gcanvas/context-webgl/UniformLocation.js      |   22 +
 gcanvas/context-webgl/classUtils.js           |    3 +
 gcanvas/env/canvas.js                         |   74 +
 gcanvas/env/image.js                          |   96 ++
 gcanvas/env/tool.js                           |   24 +
 gcanvas/index.js                              |   39 +
 manifest.json                                 |    3 +-
 pages/video/index.nvue                        |   11 +-
 utils/util.js                                 |   36 +
 34 files changed, 3399 insertions(+), 1752 deletions(-)
 delete mode 100644 components/cc-poster.vue
 create mode 100644 components/my-poster/my-poster.vue
 delete mode 100644 components/tki-qrcode/qrcode.js
 delete mode 100644 components/tki-qrcode/tki-qrcode.vue
 create mode 100644 gcanvas/bridge/bridge-weex.js
 create mode 100644 gcanvas/context-2d/FillStyleLinearGradient.js
 create mode 100644 gcanvas/context-2d/FillStylePattern.js
 create mode 100644 gcanvas/context-2d/FillStyleRadialGradient.js
 create mode 100644 gcanvas/context-2d/RenderingContext.js
 create mode 100644 gcanvas/context-webgl/ActiveInfo.js
 create mode 100644 gcanvas/context-webgl/Buffer.js
 create mode 100644 gcanvas/context-webgl/Framebuffer.js
 create mode 100644 gcanvas/context-webgl/GLenum.js
 create mode 100644 gcanvas/context-webgl/GLmethod.js
 create mode 100644 gcanvas/context-webgl/GLtype.js
 create mode 100644 gcanvas/context-webgl/Program.js
 create mode 100644 gcanvas/context-webgl/Renderbuffer.js
 create mode 100644 gcanvas/context-webgl/RenderingContext.js
 create mode 100644 gcanvas/context-webgl/Shader.js
 create mode 100644 gcanvas/context-webgl/ShaderPrecisionFormat.js
 create mode 100644 gcanvas/context-webgl/Texture.js
 create mode 100644 gcanvas/context-webgl/UniformLocation.js
 create mode 100644 gcanvas/context-webgl/classUtils.js
 create mode 100644 gcanvas/env/canvas.js
 create mode 100644 gcanvas/env/image.js
 create mode 100644 gcanvas/env/tool.js
 create mode 100644 gcanvas/index.js

diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
index 8ae452a..15f1188 100644
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@@ -2,8 +2,12 @@
     "version" : "1.0",
     "configurations" : [
         {
-            "playground" : "standard",
+            "playground" : "custom",
             "type" : "uni-app:app-android"
+        },
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-ios"
         }
     ]
 }
diff --git a/App.vue b/App.vue
index 01387a1..efea306 100644
--- a/App.vue
+++ b/App.vue
@@ -40,11 +40,11 @@ li {
 }
 
 .show {
-	display: none !important;
+	display: block;
 }
 
 .hidden {
-	display: block !important;
+	display: none !important;
 }
 
 page,
diff --git a/components/cc-poster.vue b/components/cc-poster.vue
deleted file mode 100644
index 4d39927..0000000
--- a/components/cc-poster.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<template>
-	<view style="background: #FFFFFF;">
-		<canvas v-if="!tempFilePath" :canvas-id="CanvasID"
-			:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
-		<image v-else lazy-load :src="tempFilePath" mode="widthFix" class="is-response"
-			@longpress="toSave(tempFilePath)"></image>
-	</view>
-</template>
-
-<script>
-	var _this;
-	export default {
-		name: 'wm-poster',
-		props: {
-			CanvasID: {
-				//CanvasID 等同于 canvas-id
-				Type: String,
-				default: 'PosterCanvas'
-			},
-			imgSrc: {
-				//展示图
-				Type: String,
-				default: ''
-			},
-			QrSrc: {
-				//二维码
-				Type: String,
-				default: ''
-			},
-			Title: {
-				//文本内容
-				Type: String,
-				default: '短剧'
-			},
-			TitleColor: {
-				//标题颜色
-				Type: String,
-				default: '#333333'
-			},
-			LineType: {
-				//标题显示行数 大于两行是否省略	（注超出2行显示会导致画布布局絮乱）
-				Type: [String, Boolean],
-				default: true
-			},
-			PriceTxt: {
-				//价格值
-				Type: String,
-				default: ''
-			},
-			PriceColor: {
-				//价格颜色
-				Type: String,
-				default: '#e31d1a'
-			},
-			OriginalTxt: {
-				//原价值
-				Type: String,
-				default: ''
-			},
-			OriginalColor: {
-				//默认颜色（如原价与扫描二维码颜色）
-				Type: String,
-				default: '#b8b8b8'
-			},
-			Width: {
-				//画布宽度  (高度根据图片比例计算 单位upx)
-				Type: String,
-				default: 750
-			},
-			CanvasBg: {
-				//canvas画布背景色
-				Type: String,
-				default: '#ffffff'
-			},
-			Referrer: {
-				//推荐人信息
-				Type: String,
-				default: '精选好剧'
-			},
-			ViewDetails: {
-				//描述提示文字
-				Type: String,
-				default: '长按或扫描识别二维码观看'
-			}
-		},
-		data() {
-			return {
-				tempFilePath: '',
-				canvasW: 0,
-				canvasH: 0,
-				canvasImgSrc: '',
-				ctx: null
-			};
-		},
-		methods: {
-			toSave(url) {
-
-				//#ifndef H5
-				uni.getImageInfo({
-					src: url,
-					success: function(image) {
-						console.log('图片信息：', JSON.stringify(image));
-						uni.saveImageToPhotosAlbum({
-							filePath: image.path,
-							success: function() {
-								console.log('save success');
-								uni.showToast({
-									title: '海报已保存相册',
-									icon: 'success',
-									duration: 2000
-								});
-							}
-						});
-					}
-				});
-				//#endif
-			},
-			async OnCanvas() {
-				uni.showLoading({
-					title: '海报生成中...'
-				})
-				_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
-				const C_W = uni.upx2px(_this.Width), //canvas宽度
-					C_P = uni.upx2px(30), //canvas Paddng 间距
-					C_Q = uni.upx2px(150); //二维码或太阳码宽高
-				let _strlineW = 0; //文本宽度
-				let _imgInfo = await _this.getImageInfo({
-					imgSrc: _this.imgSrc
-				}); //广告图
-				console.log('图片信息0：', JSON.stringify(""));
-
-				let _QrCode = await _this.getImageInfo({
-					imgSrc: _this.QrSrc
-				}); //二维码或太阳码
-
-				console.log('图片信息1：', JSON.stringify(""));
-
-				let r = [_imgInfo.width, _imgInfo.height];
-				let q = [_QrCode.width, _QrCode.height];
-				let imgW = C_W - C_P * 2;
-				if (r[0] != imgW) {
-					r[1] = Math.floor((imgW / r[0]) * r[1]);
-					r[0] = imgW;
-				}
-				if (q[0] != C_Q) {
-					q[1] = Math.floor((C_Q / q[0]) * q[1]);
-					q[0] = C_Q;
-				}
-				_this.canvasW = C_W;
-				_this.canvasH = r[1] + q[1] + 40;
-				_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
-				_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
-
-				//添加图片展示
-				_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
-				//添加图片展示 end
-
-				//设置文本
-				_this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
-				_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
-				let _strLastIndex = 0; //每次开始截取的字符串的索引
-				let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
-				let _num = 1;
-				// for (let i = 0; i < _this.Title.length; i++) {
-				// 	_strlineW += _this.ctx.measureText(_this.Title[i]).width;
-				// 	if (_strlineW > r[0]) {
-				// 		if (_num == 2 && _this.LineType) {
-				// 			//文字换行数量大于二进行省略号处理
-				// 			_this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
-				// 			_strlineW = 0;
-				// 			_strLastIndex = i;
-				// 			_num++;
-				// 			break;
-				// 		} else {
-				// 			_this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
-				// 			_strlineW = 0;
-				// 			_strHeight += 20;
-				// 			_strLastIndex = i;
-				// 			_num++;
-				// 		}
-				// 	} else if (i == _this.Title.length - 1) {
-				// 		_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
-				// 		_strlineW = 0;
-				// 	}
-				// }
-				//设置文本 end
-				//设置价格
-				_strlineW = C_P;
-				_strHeight += uni.upx2px(60);
-				if (_num == 1) {
-					_strHeight += 20; //单行标题时占位符
-				}
-				// if (_this.PriceTxt != '') {
-				// 	//判断是否有销售价格
-				// 	_this.ctx.setFillStyle(_this.PriceColor);
-				// 	_this.ctx.setFontSize(uni.upx2px(38));
-				// 	// _this.ctx.fillText('券后价 ￥' + _this.PriceTxt, _strlineW, _strHeight); //商品价格
-				// 	_strlineW += _this.ctx.measureText('券后价 ￥' + _this.PriceTxt).width + uni.upx2px(10);
-				// }
-				// // #ifdef H5
-				// if (_this.PriceTxt != '' && _this.OriginalTxt != '') {
-				// 	//判断是否有销售价格且原价
-				// 	_this.ctx.setFillStyle(_this.OriginalColor);
-				// 	_this.ctx.setFontSize(uni.upx2px(24));
-				// 	_this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
-				// }
-				// #endif
-				_this.ctx.strokeStyle = _this.OriginalColor;
-				_this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
-				_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(
-					10)); //终点
-				_this.ctx.stroke();
-				//设置价格 end
-
-				//添加二维码
-				_strHeight += uni.upx2px(20);
-				let toTop = uni.upx2px(20);
-				// _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
-				_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _this.canvasH - q[1] - toTop, q[0], q[1]);
-				//添加二维码 end
-
-				//添加推荐人与描述
-				_this.ctx.setFillStyle(_this.TitleColor);
-				_this.ctx.setFontSize(uni.upx2px(30));
-				_this.ctx.fillText(_this.Title, C_P, _this.canvasH - q[1] - toTop + q[1] / 2);
-				_this.ctx.setFillStyle(_this.OriginalColor);
-				_this.ctx.setFontSize(uni.upx2px(24));
-				_this.ctx.fillText(_this.ViewDetails, C_P, _this.canvasH - q[1] - toTop + q[1] / 2 + 20);
-				//添加推荐人与描述 end
-				//延迟后渲染至canvas上
-				setTimeout(function() {
-					_this.ctx.draw(true, ret => {
-						_this.getNewImage();
-					});
-				}, 600);
-			},
-			async getImageInfo({
-				imgSrc
-			}) {
-				return new Promise((resolve, errs) => {
-					uni.getImageInfo({
-						src: imgSrc,
-						success: function(image) {
-							resolve(image);
-						},
-						fail(err) {
-							// errs(err);
-							_this.$emit('error', err);
-
-
-						}
-					});
-				});
-			},
-			getNewImage() {
-				uni.canvasToTempFilePath({
-						canvasId: _this.CanvasID,
-						quality: 1,
-						complete: res => {
-							_this.tempFilePath = res.tempFilePath;
-							_this.$emit('success', res);
-
-							// uni.showToast({
-							// 	title: '长按图片保存海报',
-							// 	mask: false,
-							// 	duration: 2000,
-							// 	icon: "none"
-							// });
-
-						}
-					},
-					this
-				);
-			}
-		},
-		mounted() {
-			_this = this;
-			this.OnCanvas();
-		}
-	};
-</script>
-
-<style></style>
\ No newline at end of file
diff --git a/components/my-poster/my-poster.vue b/components/my-poster/my-poster.vue
new file mode 100644
index 0000000..1a6c940
--- /dev/null
+++ b/components/my-poster/my-poster.vue
@@ -0,0 +1,204 @@
+<template>
+	<view class="qrcode">
+		<up-qrcode :size="qrcodeData.size" :val="qrcodeData.val" @result="qrcodeResult"></up-qrcode>
+	</view>
+	<view class="poster-box" @click="hide">
+		<view class="bg-fff container" @click.stop>
+			<canvas canvas-id="myCanvas" class="myCanvas" id="myCanvas" style="width: 100%;flex: 1;"></canvas>
+		</view>
+	</view>
+
+
+	<up-popup :show="posterData.result?true:false" mode="center" width="700rpx" closeOnClickOverlay @close="reset">
+		<image :src="posterData.result" mode="widthFix"></image>
+	</up-popup>
+
+</template>
+
+<script setup>
+	import {
+		getElRect
+	} from '@/utils/util.js'
+	import {
+		ref,
+		onMounted,
+		getCurrentInstance,
+		reactive,
+		computed
+	} from 'vue'
+	let show = ref(false)
+	function reset(){
+		ctx.clearRect(0,0,posterData.width,posterData.height)
+		show.value=false
+		qrcodeData.val=''
+		qrcodeData.result=''
+		posterData.result=''
+	}
+	const qrcodeData = reactive({
+		val: '',
+		result: '',
+		size: 80
+	})
+
+	let posterData = reactive({
+		width: 0,
+		height: 0,
+		result: ''
+	})
+	const ctx = uni.createCanvasContext('myCanvas')
+
+	function qrcodeResult(e) {
+		console.log(e);
+		qrcodeData.result = e
+		console.log(posterData);
+		const gap = 10
+		show.value = true
+		ctx.setFillStyle('#fff')
+		ctx.fillRect(0, 0, posterData.width, posterData.height)
+		uni.downloadFile({
+			url: posterData.bigImg,
+			success(res) {
+				if (res.statusCode == 200) {
+					uni.getImageInfo({
+						src: res.tempFilePath,
+						success(imageInfo) {
+							console.log(imageInfo);
+							const bili = imageInfo.width / imageInfo.height
+							const width = posterData.width - gap * 2
+							console.log(width);
+							console.log(width / bili);
+							ctx.drawImage(res.tempFilePath, gap, gap, width, width / bili, 0, 0)
+							ctx.drawImage(e, posterData.width - qrcodeData.size - gap, posterData.height -
+								gap - qrcodeData.size, qrcodeData.size, qrcodeData.size)
+							ctx.setFillStyle('#000')
+							ctx.setFontSize(14);
+							ctx.fillText(posterData.title, gap, posterData.height - gap - 20)
+							ctx.setFillStyle('#999')
+							ctx.setFontSize(12);
+							ctx.fillText(posterData.tips, gap, posterData.height - gap)
+							ctx.draw()
+							setTimeout(() => {
+								uni.canvasToTempFilePath({
+									x: 0,
+									y: 0,
+									width: posterData.width,
+									height: posterData.height,
+									destWidth: posterData.width,
+									destHeight: posterData.height,
+									canvasId: 'myCanvas',
+									quality: 1,
+									success: function(res) {
+										// 在H5平台下，tempFilePath 为 base64
+										console.log(res.tempFilePath)
+										posterData.result = res.tempFilePath
+									}
+								})
+							}, 600)
+
+						}
+					})
+
+				} else {
+					uni.showToast({
+						title: '封面图下载失败'
+					})
+				}
+				console.log(res);
+
+			}
+		})
+
+		show.value = true
+	}
+
+	const props = defineProps({
+		bigImg: {
+			type: Object,
+			default: () => {
+				return {}
+			}
+		}
+	})
+
+
+	function make(data) {
+		uni.showLoading({
+			title: '二维码生成中……'
+		})
+		Object.assign(posterData, data)
+		qrcodeData.val = data.qrcode
+
+		return
+	}
+
+	onMounted(() => {
+		getElRect('myCanvas').then(res => {
+			Object.assign(posterData, res)
+		})
+	})
+
+	function hide() {
+		show.value = false
+	}
+
+
+	let canvasConfig = reactive({
+		width: '',
+		height: ''
+	})
+
+	const canvasStyle = computed(() => {
+		return {
+			width: '',
+			height: ''
+		}
+	})
+
+	defineExpose({
+		make
+	})
+</script>
+
+<style lang="scss" scoped>
+	.qrcode {
+		position: fixed;
+		top: -9999px;
+		left: -9999px;
+		opacity: 0;
+	}
+
+	.u-popup {
+		position: fixed !important;
+	}
+
+	::v-deep .u-popup {
+		position: fixed !important;
+	}
+
+	.poster-box {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 9999;
+		background-color: rgba(0, 0, 0, .5);
+		transform: translateY(-100%);
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		transition: all .3s ease-in-out;
+		padding: 30rpx;
+
+		.container {
+			width: 100%;
+			flex: 1;
+		}
+
+		&.show {
+			transform: translateY(0px);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/components/my-video-list/list-item.vue b/components/my-video-list/list-item.vue
index e1f4d30..c5c557d 100644
--- a/components/my-video-list/list-item.vue
+++ b/components/my-video-list/list-item.vue
@@ -3,6 +3,7 @@
 
 		<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
 			@waiting="waiting()" object-fit="cover"
+			@pause="onpause"
 			@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
 			:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
 			:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
@@ -11,7 +12,7 @@
 		<image class="poster" v-else @click="!item.videoUrl?popupShow('pay'):''" :src="item.titleImg" mode="aspectFill">
 		</image>
 
-		<view class="info" v-if="!isCommand">
+		<view class="info" v-if="!isCommand" :style="infoStyle">
 			<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
 			<view v-if="item.content" v-html="item.content"></view>
 			<view class="u-m-t-20 color-fff" @click="popupShow('show')">
@@ -21,7 +22,7 @@
 			</view>
 
 		</view>
-		<view class="info" v-if="isCommand">
+		<view class="info" v-if="isCommand" :style="infoStyle">
 			<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
 			<view v-if="item.content" v-html="item.content"></view>
 			<view class="u-m-t-20 color-fff" @click="toDetail">
@@ -31,7 +32,7 @@
 			</view>
 
 		</view>
-		<view class="right">
+		<view class="right" :style="rightStyle">
 			<view class="love u-flex u-flex-xy-center u-flex-col u-m-b-40   u-text-center" @click="dianzanClick">
 				<up-icon name="heart-fill" v-if="item.isGood==1" color="red" size="30"></up-icon>
 				<up-icon name="heart-fill" v-else color="#ffffff" size="30"></up-icon>
@@ -69,6 +70,22 @@
 				}
 			}
 		},
+		rightStyle:{
+			type:Object,
+			default:()=>{
+				return {
+					
+				}
+			}
+		},
+		infoStyle:{
+			type:Object,
+			default:()=>{
+				return {
+					
+				}
+			}
+		},
 		isCommand: {
 			type: Boolean,
 			default: false
@@ -106,6 +123,10 @@
 		playSpeeds: {
 			type: Number,
 			default: 1
+		},
+		showControls:{
+			type: Boolean,
+			default: true
 		}
 	})
 	let autoplay = ref(props.item.videoUrl ? true : false)
@@ -115,6 +136,7 @@
 	])
 
 	function controlstoggles(e) {
+		console.log(e);
 		emits('controlstoggles', e)
 	}
 
@@ -130,7 +152,20 @@
 	}
 
 	function videoPlay() {
-
+		// #ifdef H5
+		emits('controlstoggles', {
+			detail:{show:true}
+		})
+		// #endif
+		
+	}
+	
+	function onpause(){
+		// #ifdef H5
+		emits('controlstoggles', {
+			detail:{show:false}
+		})
+		// #endif
 	}
 
 	function ended() {
@@ -211,6 +246,7 @@
 			video = null
 		}
 	})
+	
 </script>
 
 <style lang="scss" scoped>
@@ -279,6 +315,7 @@
 		color: #ffffff;
 		font-size: 15px;
 		z-index: 9999;
+		transition: all .3s ease-in-out;
 	}
 
 	.u-flex-y-center {
@@ -293,6 +330,7 @@
 	}
 
 	.right {
+		transition: all .3s ease-in-out; 
 		position: absolute !important;
 		right: 20rpx;
 		/* #ifdef H5 */
diff --git a/components/my-video-list/my-video-list.vue b/components/my-video-list/my-video-list.vue
index 3bceccd..f3bb27b 100644
--- a/components/my-video-list/my-video-list.vue
+++ b/components/my-video-list/my-video-list.vue
@@ -1,19 +1,16 @@
 <template>
 	<!-- #ifdef H5 -->
 	<view class=" w-full box" style="width: 100vw;">
-		<swiper @longpress="popupShow('speed')" 
-		:style="{height:wHeight+'px'}"
-		v-if="videoList.length" @change="swiperChange" :current="current"
-			:circular="true" vertical class="u-flex-1" @transition="transition" :indicator-dots="false"
-			:autoplay="false" :interval="0" :duration="200">
+		<swiper @longpress="popupShow('speed')" :style="{height:wHeight+'px'}" v-if="videoList.length"
+			@change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
+			@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
 			<swiper-item v-for="(item,index) in videoList" :key="index">
-				<list-item-vue :total="list.length" :item="item"
-				 :isCommand="isCommand"
-				 :current="current" :isCollect="isCollect"
-				 @toDetail="toDetail(item,index)"
-					@controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
-					@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
-					@popupShow="popupShow"></list-item-vue>
+				<list-item-vue :total="list.length" :item="item" :isCommand="isCommand"
+				:rightStyle="rightStyle"  :infoStyle="infoStyle"
+					:showControls="control.showControls" :current="current" :isCollect="isCollect"
+					@toDetail="toDetail(item,index)" @controlstoggles="controlstoggles" :playSpeeds="playSpeeds"
+					:index="index" :nowIndex="nowIndex" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
+					@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow"></list-item-vue>
 			</swiper-item>
 		</swiper>
 	</view>
@@ -25,8 +22,8 @@
 		<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
 			<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
 				<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
-								 :isCommand="isCommand"
-								 @toDetail="toDetail(item,index)"
+				:rightStyle="rightStyle"  :infoStyle="infoStyle"
+					:isCommand="isCommand" :showControls="control.showControls" @toDetail="toDetail(item,index)"
 					@itemMounted="itemMounted" @controlstoggles="controlstoggles" :index="index" :instance="instance"
 					:nowIndex="nowIndex" @appear="appear($event,item,index)" :playSpeeds="playSpeeds"
 					@disappear="disappear(item,index)" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@@ -150,8 +147,7 @@
 		</view>
 	</up-popup>
 
-
-
+	<my-poster ref="refPoster"></my-poster>
 </template>
 
 <script setup>
@@ -177,6 +173,9 @@
 		onMounted,
 		getCurrentInstance
 	} from 'vue';
+
+	const refPoster = ref(null)
+
 	const props = defineProps({
 		list: {
 			type: Array,
@@ -184,13 +183,13 @@
 				[]
 			}
 		},
-		isCommand:{
-			type:Boolean,
-			default:false
+		isCommand: {
+			type: Boolean,
+			default: false
 		},
-		isTabbar:{
-			type:Boolean,
-			default:false
+		isTabbar: {
+			type: Boolean,
+			default: false
 		},
 		info: {
 			tpye: Object,
@@ -209,11 +208,14 @@
 		showBack: true,
 		showControls: true
 	})
-	
-	const customStyle=computed(()=>{
+	// #ifdef APP
+	control.showControls=false
+	// #endif
+
+	const customStyle = computed(() => {
 		// #ifdef H5
 		return {
-			bottom:props.isTabbar?'50px':'0'
+			bottom: props.isTabbar ? '50px' : '0'
 		}
 		// #endif
 		// #ifndef H5
@@ -223,6 +225,7 @@
 
 	function controlstoggles(e) {
 		control.showControls = e.detail.show
+		console.log(control.showControls );
 		control.showBack = control.showControls
 		console.log(control);
 	}
@@ -243,8 +246,9 @@
 		}],
 		active: 1
 	})
-	
-	const $mountedComponents={}
+
+	const $mountedComponents = {}
+
 	function itemMounted(index) {
 		// $mountedComponents[index]=true
 	}
@@ -293,9 +297,9 @@
 
 	let cacheIndex = null
 
-	function appear(isFirst,item, index) {
-		if(isFirst){
-			$mountedComponents[index]=true
+	function appear(isFirst, item, index) {
+		if (isFirst) {
+			$mountedComponents[index] = true
 		}
 		if (!initing) {
 			cacheIndex = index
@@ -353,7 +357,7 @@
 	function goListPosition(index) {
 		console.log('goListPosition:' + index)
 		const el = refList.value[index]
-		if($mountedComponents[props.list.length-1]){
+		if ($mountedComponents[props.list.length - 1]) {
 			domModule.scrollToElement(el, {
 				animated: false
 			})
@@ -361,10 +365,10 @@
 			const item = props.list[index]
 			setVideoList(item)
 			insertHistory()
-		}else{
-			setTimeout(()=>{
+		} else {
+			setTimeout(() => {
 				goListPosition(index)
-			},30)
+			}, 30)
 		}
 	}
 
@@ -383,7 +387,7 @@
 	function popupShow(key = 'show') {
 		popup[key] = true
 	}
-	
+
 
 	let jinbiBili = ref(0)
 	let wHeight = ref(0)
@@ -400,10 +404,10 @@
 	watch(() => props.collect, (newval) => {
 		isCollect.value = newval
 	})
-	
-	function toDetail(item,index){
+
+	function toDetail(item, index) {
 		uni.navigateTo({
-			url:'/pages/video/detail?courseId='+item.courseId
+			url: '/pages/video/detail?courseId=' + item.courseId
 		})
 	}
 
@@ -510,8 +514,27 @@
 		const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
 			.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
 		console.log(urls);
-		posterData.img = item.titleImg
-		posterData.show = true
+		// #ifdef H5
+		refPoster.value.make({
+			qrcode: urls,
+			title: props.info.title,
+			bigImg: item.titleImg,
+			tips: '长按或扫描识别二维码观看'
+		})
+		// #endif
+
+		// #ifndef H5
+		uni.setClipboardData({
+			data: urls,
+			success() {
+				uni.showToast({
+					title: '邀请链接已复制到剪贴板',
+					icon: 'none'
+				})
+			}
+		})
+		// #endif
+
 	}
 
 	function posterHide() {
@@ -610,7 +633,30 @@
 	const nowDanjiPrice = computed(() => {
 		return videoList.value[current.value].price
 	})
-
+	const rightStyle=computed(()=>{
+		// #ifdef H5
+		return {
+			transform: `translateX(${!control.showControls?'0':60}px)`
+		}
+		// #endif
+		// #ifdef APP
+		return {
+			transform: `translateX(${control.showControls?'0':60}px)`
+		}
+		// #endif
+	})
+	const infoStyle=computed(()=>{
+		// #ifdef H5
+		return {
+			transform: `translateX(${!control.showControls?0:'-110%'})`
+		}
+		// #endif
+		// #ifdef APP
+		return {
+			transform: `translateX(${control.showControls?0:'-110%'})`
+		}
+		// #endif
+	})
 	function loadmore() {
 		console.log('loadmore');
 	}
@@ -810,6 +856,13 @@
 		height: 56rpx;
 	}
 
+	.qrcode {
+		position: fixed;
+		top: -9999px;
+		left: -9999px;
+		opacity: 0;
+	}
+
 	.speed-list {
 		align-items: center;
 		background-color: #eeeeef;
diff --git a/components/tki-qrcode/qrcode.js b/components/tki-qrcode/qrcode.js
deleted file mode 100644
index ae5f945..0000000
--- a/components/tki-qrcode/qrcode.js
+++ /dev/null
@@ -1,1206 +0,0 @@
-let QRCode = {};
-(function () {
-    /**
-     * 获取单个字符的utf8编码
-     * unicode BMP平面约65535个字符
-     * @param {num} code
-     * return {array}
-     */
-    function unicodeFormat8(code) {
-        // 1 byte
-        var c0, c1, c2;
-        if (code < 128) {
-            return [code];
-            // 2 bytes
-        } else if (code < 2048) {
-            c0 = 192 + (code >> 6);
-            c1 = 128 + (code & 63);
-            return [c0, c1];
-            // 3 bytes
-        } else {
-            c0 = 224 + (code >> 12);
-            c1 = 128 + (code >> 6 & 63);
-            c2 = 128 + (code & 63);
-            return [c0, c1, c2];
-        }
-    }
-    /**
-     * 获取字符串的utf8编码字节串
-     * @param {string} string
-     * @return {array}
-     */
-    function getUTF8Bytes(string) {
-        var utf8codes = [];
-        for (var i = 0; i < string.length; i++) {
-            var code = string.charCodeAt(i);
-            var utf8 = unicodeFormat8(code);
-            for (var j = 0; j < utf8.length; j++) {
-                utf8codes.push(utf8[j]);
-            }
-        }
-        return utf8codes;
-    }
-    /**
-     * 二维码算法实现
-     * @param {string} data              要编码的信息字符串
-     * @param {num} errorCorrectLevel 纠错等级
-     */
-    function QRCodeAlg(data, errorCorrectLevel) {
-        this.typeNumber = -1; //版本
-        this.errorCorrectLevel = errorCorrectLevel;
-        this.modules = null; //二维矩阵，存放最终结果
-        this.moduleCount = 0; //矩阵大小
-        this.dataCache = null; //数据缓存
-        this.rsBlocks = null; //版本数据信息
-        this.totalDataCount = -1; //可使用的数据量
-        this.data = data;
-        this.utf8bytes = getUTF8Bytes(data);
-        this.make();
-    }
-    QRCodeAlg.prototype = {
-        constructor: QRCodeAlg,
-        /**
-         * 获取二维码矩阵大小
-         * @return {num} 矩阵大小
-         */
-        getModuleCount: function () {
-            return this.moduleCount;
-        },
-        /**
-         * 编码
-         */
-        make: function () {
-            this.getRightType();
-            this.dataCache = this.createData();
-            this.createQrcode();
-        },
-        /**
-         * 设置二位矩阵功能图形
-         * @param  {bool} test 表示是否在寻找最好掩膜阶段
-         * @param  {num} maskPattern 掩膜的版本
-         */
-        makeImpl: function (maskPattern) {
-            this.moduleCount = this.typeNumber * 4 + 17;
-            this.modules = new Array(this.moduleCount);
-            for (var row = 0; row < this.moduleCount; row++) {
-                this.modules[row] = new Array(this.moduleCount);
-            }
-            this.setupPositionProbePattern(0, 0);
-            this.setupPositionProbePattern(this.moduleCount - 7, 0);
-            this.setupPositionProbePattern(0, this.moduleCount - 7);
-            this.setupPositionAdjustPattern();
-            this.setupTimingPattern();
-            this.setupTypeInfo(true, maskPattern);
-            if (this.typeNumber >= 7) {
-                this.setupTypeNumber(true);
-            }
-            this.mapData(this.dataCache, maskPattern);
-        },
-        /**
-         * 设置二维码的位置探测图形
-         * @param  {num} row 探测图形的中心横坐标
-         * @param  {num} col 探测图形的中心纵坐标
-         */
-        setupPositionProbePattern: function (row, col) {
-            for (var r = -1; r <= 7; r++) {
-                if (row + r <= -1 || this.moduleCount <= row + r) continue;
-                for (var c = -1; c <= 7; c++) {
-                    if (col + c <= -1 || this.moduleCount <= col + c) continue;
-                    if ((0 <= r && r <= 6 && (c == 0 || c == 6)) || (0 <= c && c <= 6 && (r == 0 || r == 6)) || (2 <= r && r <= 4 && 2 <= c && c <= 4)) {
-                        this.modules[row + r][col + c] = true;
-                    } else {
-                        this.modules[row + r][col + c] = false;
-                    }
-                }
-            }
-        },
-        /**
-         * 创建二维码
-         * @return {[type]} [description]
-         */
-        createQrcode: function () {
-            var minLostPoint = 0;
-            var pattern = 0;
-            var bestModules = null;
-            for (var i = 0; i < 8; i++) {
-                this.makeImpl(i);
-                var lostPoint = QRUtil.getLostPoint(this);
-                if (i == 0 || minLostPoint > lostPoint) {
-                    minLostPoint = lostPoint;
-                    pattern = i;
-                    bestModules = this.modules;
-                }
-            }
-            this.modules = bestModules;
-            this.setupTypeInfo(false, pattern);
-            if (this.typeNumber >= 7) {
-                this.setupTypeNumber(false);
-            }
-        },
-        /**
-         * 设置定位图形
-         * @return {[type]} [description]
-         */
-        setupTimingPattern: function () {
-            for (var r = 8; r < this.moduleCount - 8; r++) {
-                if (this.modules[r][6] != null) {
-                    continue;
-                }
-                this.modules[r][6] = (r % 2 == 0);
-                if (this.modules[6][r] != null) {
-                    continue;
-                }
-                this.modules[6][r] = (r % 2 == 0);
-            }
-        },
-        /**
-         * 设置矫正图形
-         * @return {[type]} [description]
-         */
-        setupPositionAdjustPattern: function () {
-            var pos = QRUtil.getPatternPosition(this.typeNumber);
-            for (var i = 0; i < pos.length; i++) {
-                for (var j = 0; j < pos.length; j++) {
-                    var row = pos[i];
-                    var col = pos[j];
-                    if (this.modules[row][col] != null) {
-                        continue;
-                    }
-                    for (var r = -2; r <= 2; r++) {
-                        for (var c = -2; c <= 2; c++) {
-                            if (r == -2 || r == 2 || c == -2 || c == 2 || (r == 0 && c == 0)) {
-                                this.modules[row + r][col + c] = true;
-                            } else {
-                                this.modules[row + r][col + c] = false;
-                            }
-                        }
-                    }
-                }
-            }
-        },
-        /**
-         * 设置版本信息（7以上版本才有）
-         * @param  {bool} test 是否处于判断最佳掩膜阶段
-         * @return {[type]}      [description]
-         */
-        setupTypeNumber: function (test) {
-            var bits = QRUtil.getBCHTypeNumber(this.typeNumber);
-            for (var i = 0; i < 18; i++) {
-                var mod = (!test && ((bits >> i) & 1) == 1);
-                this.modules[Math.floor(i / 3)][i % 3 + this.moduleCount - 8 - 3] = mod;
-                this.modules[i % 3 + this.moduleCount - 8 - 3][Math.floor(i / 3)] = mod;
-            }
-        },
-        /**
-         * 设置格式信息（纠错等级和掩膜版本）
-         * @param  {bool} test
-         * @param  {num} maskPattern 掩膜版本
-         * @return {}
-         */
-        setupTypeInfo: function (test, maskPattern) {
-            var data = (QRErrorCorrectLevel[this.errorCorrectLevel] << 3) | maskPattern;
-            var bits = QRUtil.getBCHTypeInfo(data);
-            // vertical
-            for (var i = 0; i < 15; i++) {
-                var mod = (!test && ((bits >> i) & 1) == 1);
-                if (i < 6) {
-                    this.modules[i][8] = mod;
-                } else if (i < 8) {
-                    this.modules[i + 1][8] = mod;
-                } else {
-                    this.modules[this.moduleCount - 15 + i][8] = mod;
-                }
-                // horizontal
-                var mod = (!test && ((bits >> i) & 1) == 1);
-                if (i < 8) {
-                    this.modules[8][this.moduleCount - i - 1] = mod;
-                } else if (i < 9) {
-                    this.modules[8][15 - i - 1 + 1] = mod;
-                } else {
-                    this.modules[8][15 - i - 1] = mod;
-                }
-            }
-            // fixed module
-            this.modules[this.moduleCount - 8][8] = (!test);
-        },
-        /**
-         * 数据编码
-         * @return {[type]} [description]
-         */
-        createData: function () {
-            var buffer = new QRBitBuffer();
-            var lengthBits = this.typeNumber > 9 ? 16 : 8;
-            buffer.put(4, 4); //添加模式
-            buffer.put(this.utf8bytes.length, lengthBits);
-            for (var i = 0, l = this.utf8bytes.length; i < l; i++) {
-                buffer.put(this.utf8bytes[i], 8);
-            }
-            if (buffer.length + 4 <= this.totalDataCount * 8) {
-                buffer.put(0, 4);
-            }
-            // padding
-            while (buffer.length % 8 != 0) {
-                buffer.putBit(false);
-            }
-            // padding
-            while (true) {
-                if (buffer.length >= this.totalDataCount * 8) {
-                    break;
-                }
-                buffer.put(QRCodeAlg.PAD0, 8);
-                if (buffer.length >= this.totalDataCount * 8) {
-                    break;
-                }
-                buffer.put(QRCodeAlg.PAD1, 8);
-            }
-            return this.createBytes(buffer);
-        },
-        /**
-         * 纠错码编码
-         * @param  {buffer} buffer 数据编码
-         * @return {[type]}
-         */
-        createBytes: function (buffer) {
-            var offset = 0;
-            var maxDcCount = 0;
-            var maxEcCount = 0;
-            var length = this.rsBlock.length / 3;
-            var rsBlocks = new Array();
-            for (var i = 0; i < length; i++) {
-                var count = this.rsBlock[i * 3 + 0];
-                var totalCount = this.rsBlock[i * 3 + 1];
-                var dataCount = this.rsBlock[i * 3 + 2];
-                for (var j = 0; j < count; j++) {
-                    rsBlocks.push([dataCount, totalCount]);
-                }
-            }
-            var dcdata = new Array(rsBlocks.length);
-            var ecdata = new Array(rsBlocks.length);
-            for (var r = 0; r < rsBlocks.length; r++) {
-                var dcCount = rsBlocks[r][0];
-                var ecCount = rsBlocks[r][1] - dcCount;
-                maxDcCount = Math.max(maxDcCount, dcCount);
-                maxEcCount = Math.max(maxEcCount, ecCount);
-                dcdata[r] = new Array(dcCount);
-                for (var i = 0; i < dcdata[r].length; i++) {
-                    dcdata[r][i] = 0xff & buffer.buffer[i + offset];
-                }
-                offset += dcCount;
-                var rsPoly = QRUtil.getErrorCorrectPolynomial(ecCount);
-                var rawPoly = new QRPolynomial(dcdata[r], rsPoly.getLength() - 1);
-                var modPoly = rawPoly.mod(rsPoly);
-                ecdata[r] = new Array(rsPoly.getLength() - 1);
-                for (var i = 0; i < ecdata[r].length; i++) {
-                    var modIndex = i + modPoly.getLength() - ecdata[r].length;
-                    ecdata[r][i] = (modIndex >= 0) ? modPoly.get(modIndex) : 0;
-                }
-            }
-            var data = new Array(this.totalDataCount);
-            var index = 0;
-            for (var i = 0; i < maxDcCount; i++) {
-                for (var r = 0; r < rsBlocks.length; r++) {
-                    if (i < dcdata[r].length) {
-                        data[index++] = dcdata[r][i];
-                    }
-                }
-            }
-            for (var i = 0; i < maxEcCount; i++) {
-                for (var r = 0; r < rsBlocks.length; r++) {
-                    if (i < ecdata[r].length) {
-                        data[index++] = ecdata[r][i];
-                    }
-                }
-            }
-            return data;
-
-        },
-        /**
-         * 布置模块，构建最终信息
-         * @param  {} data
-         * @param  {} maskPattern
-         * @return {}
-         */
-        mapData: function (data, maskPattern) {
-            var inc = -1;
-            var row = this.moduleCount - 1;
-            var bitIndex = 7;
-            var byteIndex = 0;
-            for (var col = this.moduleCount - 1; col > 0; col -= 2) {
-                if (col == 6) col--;
-                while (true) {
-                    for (var c = 0; c < 2; c++) {
-                        if (this.modules[row][col - c] == null) {
-                            var dark = false;
-                            if (byteIndex < data.length) {
-                                dark = (((data[byteIndex] >>> bitIndex) & 1) == 1);
-                            }
-                            var mask = QRUtil.getMask(maskPattern, row, col - c);
-                            if (mask) {
-                                dark = !dark;
-                            }
-                            this.modules[row][col - c] = dark;
-                            bitIndex--;
-                            if (bitIndex == -1) {
-                                byteIndex++;
-                                bitIndex = 7;
-                            }
-                        }
-                    }
-                    row += inc;
-                    if (row < 0 || this.moduleCount <= row) {
-                        row -= inc;
-                        inc = -inc;
-                        break;
-                    }
-                }
-            }
-        }
-    };
-    /**
-     * 填充字段
-     */
-    QRCodeAlg.PAD0 = 0xEC;
-    QRCodeAlg.PAD1 = 0x11;
-    //---------------------------------------------------------------------
-    // 纠错等级对应的编码
-    //---------------------------------------------------------------------
-    var QRErrorCorrectLevel = [1, 0, 3, 2];
-    //---------------------------------------------------------------------
-    // 掩膜版本
-    //---------------------------------------------------------------------
-    var QRMaskPattern = {
-        PATTERN000: 0,
-        PATTERN001: 1,
-        PATTERN010: 2,
-        PATTERN011: 3,
-        PATTERN100: 4,
-        PATTERN101: 5,
-        PATTERN110: 6,
-        PATTERN111: 7
-    };
-    //---------------------------------------------------------------------
-    // 工具类
-    //---------------------------------------------------------------------
-    var QRUtil = {
-        /*
-        每个版本矫正图形的位置
-         */
-        PATTERN_POSITION_TABLE: [
-            [],
-            [6, 18],
-            [6, 22],
-            [6, 26],
-            [6, 30],
-            [6, 34],
-            [6, 22, 38],
-            [6, 24, 42],
-            [6, 26, 46],
-            [6, 28, 50],
-            [6, 30, 54],
-            [6, 32, 58],
-            [6, 34, 62],
-            [6, 26, 46, 66],
-            [6, 26, 48, 70],
-            [6, 26, 50, 74],
-            [6, 30, 54, 78],
-            [6, 30, 56, 82],
-            [6, 30, 58, 86],
-            [6, 34, 62, 90],
-            [6, 28, 50, 72, 94],
-            [6, 26, 50, 74, 98],
-            [6, 30, 54, 78, 102],
-            [6, 28, 54, 80, 106],
-            [6, 32, 58, 84, 110],
-            [6, 30, 58, 86, 114],
-            [6, 34, 62, 90, 118],
-            [6, 26, 50, 74, 98, 122],
-            [6, 30, 54, 78, 102, 126],
-            [6, 26, 52, 78, 104, 130],
-            [6, 30, 56, 82, 108, 134],
-            [6, 34, 60, 86, 112, 138],
-            [6, 30, 58, 86, 114, 142],
-            [6, 34, 62, 90, 118, 146],
-            [6, 30, 54, 78, 102, 126, 150],
-            [6, 24, 50, 76, 102, 128, 154],
-            [6, 28, 54, 80, 106, 132, 158],
-            [6, 32, 58, 84, 110, 136, 162],
-            [6, 26, 54, 82, 110, 138, 166],
-            [6, 30, 58, 86, 114, 142, 170]
-        ],
-        G15: (1 << 10) | (1 << 8) | (1 << 5) | (1 << 4) | (1 << 2) | (1 << 1) | (1 << 0),
-        G18: (1 << 12) | (1 << 11) | (1 << 10) | (1 << 9) | (1 << 8) | (1 << 5) | (1 << 2) | (1 << 0),
-        G15_MASK: (1 << 14) | (1 << 12) | (1 << 10) | (1 << 4) | (1 << 1),
-        /*
-        BCH编码格式信息
-         */
-        getBCHTypeInfo: function (data) {
-            var d = data << 10;
-            while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15) >= 0) {
-                d ^= (QRUtil.G15 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15)));
-            }
-            return ((data << 10) | d) ^ QRUtil.G15_MASK;
-        },
-        /*
-        BCH编码版本信息
-         */
-        getBCHTypeNumber: function (data) {
-            var d = data << 12;
-            while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18) >= 0) {
-                d ^= (QRUtil.G18 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18)));
-            }
-            return (data << 12) | d;
-        },
-        /*
-        获取BCH位信息
-         */
-        getBCHDigit: function (data) {
-            var digit = 0;
-            while (data != 0) {
-                digit++;
-                data >>>= 1;
-            }
-            return digit;
-        },
-        /*
-        获取版本对应的矫正图形位置
-         */
-        getPatternPosition: function (typeNumber) {
-            return QRUtil.PATTERN_POSITION_TABLE[typeNumber - 1];
-        },
-        /*
-        掩膜算法
-         */
-        getMask: function (maskPattern, i, j) {
-            switch (maskPattern) {
-                case QRMaskPattern.PATTERN000:
-                    return (i + j) % 2 == 0;
-                case QRMaskPattern.PATTERN001:
-                    return i % 2 == 0;
-                case QRMaskPattern.PATTERN010:
-                    return j % 3 == 0;
-                case QRMaskPattern.PATTERN011:
-                    return (i + j) % 3 == 0;
-                case QRMaskPattern.PATTERN100:
-                    return (Math.floor(i / 2) + Math.floor(j / 3)) % 2 == 0;
-                case QRMaskPattern.PATTERN101:
-                    return (i * j) % 2 + (i * j) % 3 == 0;
-                case QRMaskPattern.PATTERN110:
-                    return ((i * j) % 2 + (i * j) % 3) % 2 == 0;
-                case QRMaskPattern.PATTERN111:
-                    return ((i * j) % 3 + (i + j) % 2) % 2 == 0;
-                default:
-                    throw new Error("bad maskPattern:" + maskPattern);
-            }
-        },
-        /*
-        获取RS的纠错多项式
-         */
-        getErrorCorrectPolynomial: function (errorCorrectLength) {
-            var a = new QRPolynomial([1], 0);
-            for (var i = 0; i < errorCorrectLength; i++) {
-                a = a.multiply(new QRPolynomial([1, QRMath.gexp(i)], 0));
-            }
-            return a;
-        },
-        /*
-        获取评价
-         */
-        getLostPoint: function (qrCode) {
-            var moduleCount = qrCode.getModuleCount(),
-                lostPoint = 0,
-                darkCount = 0;
-            for (var row = 0; row < moduleCount; row++) {
-                var sameCount = 0;
-                var head = qrCode.modules[row][0];
-                for (var col = 0; col < moduleCount; col++) {
-                    var current = qrCode.modules[row][col];
-                    //level 3 评价
-                    if (col < moduleCount - 6) {
-                        if (current && !qrCode.modules[row][col + 1] && qrCode.modules[row][col + 2] && qrCode.modules[row][col + 3] && qrCode.modules[row][col + 4] && !qrCode.modules[row][col + 5] && qrCode.modules[row][col + 6]) {
-                            if (col < moduleCount - 10) {
-                                if (qrCode.modules[row][col + 7] && qrCode.modules[row][col + 8] && qrCode.modules[row][col + 9] && qrCode.modules[row][col + 10]) {
-                                    lostPoint += 40;
-                                }
-                            } else if (col > 3) {
-                                if (qrCode.modules[row][col - 1] && qrCode.modules[row][col - 2] && qrCode.modules[row][col - 3] && qrCode.modules[row][col - 4]) {
-                                    lostPoint += 40;
-                                }
-                            }
-                        }
-                    }
-                    //level 2 评价
-                    if ((row < moduleCount - 1) && (col < moduleCount - 1)) {
-                        var count = 0;
-                        if (current) count++;
-                        if (qrCode.modules[row + 1][col]) count++;
-                        if (qrCode.modules[row][col + 1]) count++;
-                        if (qrCode.modules[row + 1][col + 1]) count++;
-                        if (count == 0 || count == 4) {
-                            lostPoint += 3;
-                        }
-                    }
-                    //level 1 评价
-                    if (head ^ current) {
-                        sameCount++;
-                    } else {
-                        head = current;
-                        if (sameCount >= 5) {
-                            lostPoint += (3 + sameCount - 5);
-                        }
-                        sameCount = 1;
-                    }
-                    //level 4 评价
-                    if (current) {
-                        darkCount++;
-                    }
-                }
-            }
-            for (var col = 0; col < moduleCount; col++) {
-                var sameCount = 0;
-                var head = qrCode.modules[0][col];
-                for (var row = 0; row < moduleCount; row++) {
-                    var current = qrCode.modules[row][col];
-                    //level 3 评价
-                    if (row < moduleCount - 6) {
-                        if (current && !qrCode.modules[row + 1][col] && qrCode.modules[row + 2][col] && qrCode.modules[row + 3][col] && qrCode.modules[row + 4][col] && !qrCode.modules[row + 5][col] && qrCode.modules[row + 6][col]) {
-                            if (row < moduleCount - 10) {
-                                if (qrCode.modules[row + 7][col] && qrCode.modules[row + 8][col] && qrCode.modules[row + 9][col] && qrCode.modules[row + 10][col]) {
-                                    lostPoint += 40;
-                                }
-                            } else if (row > 3) {
-                                if (qrCode.modules[row - 1][col] && qrCode.modules[row - 2][col] && qrCode.modules[row - 3][col] && qrCode.modules[row - 4][col]) {
-                                    lostPoint += 40;
-                                }
-                            }
-                        }
-                    }
-                    //level 1 评价
-                    if (head ^ current) {
-                        sameCount++;
-                    } else {
-                        head = current;
-                        if (sameCount >= 5) {
-                            lostPoint += (3 + sameCount - 5);
-                        }
-                        sameCount = 1;
-                    }
-                }
-            }
-            // LEVEL4
-            var ratio = Math.abs(100 * darkCount / moduleCount / moduleCount - 50) / 5;
-            lostPoint += ratio * 10;
-            return lostPoint;
-        }
-
-    };
-    //---------------------------------------------------------------------
-    // QRMath使用的数学工具
-    //---------------------------------------------------------------------
-    var QRMath = {
-        /*
-        将n转化为a^m
-         */
-        glog: function (n) {
-            if (n < 1) {
-                throw new Error("glog(" + n + ")");
-            }
-            return QRMath.LOG_TABLE[n];
-        },
-        /*
-        将a^m转化为n
-         */
-        gexp: function (n) {
-            while (n < 0) {
-                n += 255;
-            }
-            while (n >= 256) {
-                n -= 255;
-            }
-            return QRMath.EXP_TABLE[n];
-        },
-        EXP_TABLE: new Array(256),
-        LOG_TABLE: new Array(256)
-
-    };
-    for (var i = 0; i < 8; i++) {
-        QRMath.EXP_TABLE[i] = 1 << i;
-    }
-    for (var i = 8; i < 256; i++) {
-        QRMath.EXP_TABLE[i] = QRMath.EXP_TABLE[i - 4] ^ QRMath.EXP_TABLE[i - 5] ^ QRMath.EXP_TABLE[i - 6] ^ QRMath.EXP_TABLE[i - 8];
-    }
-    for (var i = 0; i < 255; i++) {
-        QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]] = i;
-    }
-    //---------------------------------------------------------------------
-    // QRPolynomial 多项式
-    //---------------------------------------------------------------------
-    /**
-     * 多项式类
-     * @param {Array} num   系数
-     * @param {num} shift a^shift
-     */
-    function QRPolynomial(num, shift) {
-        if (num.length == undefined) {
-            throw new Error(num.length + "/" + shift);
-        }
-        var offset = 0;
-        while (offset < num.length && num[offset] == 0) {
-            offset++;
-        }
-        this.num = new Array(num.length - offset + shift);
-        for (var i = 0; i < num.length - offset; i++) {
-            this.num[i] = num[i + offset];
-        }
-    }
-    QRPolynomial.prototype = {
-        get: function (index) {
-            return this.num[index];
-        },
-        getLength: function () {
-            return this.num.length;
-        },
-        /**
-         * 多项式乘法
-         * @param  {QRPolynomial} e 被乘多项式
-         * @return {[type]}   [description]
-         */
-        multiply: function (e) {
-            var num = new Array(this.getLength() + e.getLength() - 1);
-            for (var i = 0; i < this.getLength(); i++) {
-                for (var j = 0; j < e.getLength(); j++) {
-                    num[i + j] ^= QRMath.gexp(QRMath.glog(this.get(i)) + QRMath.glog(e.get(j)));
-                }
-            }
-            return new QRPolynomial(num, 0);
-        },
-        /**
-         * 多项式模运算
-         * @param  {QRPolynomial} e 模多项式
-         * @return {}
-         */
-        mod: function (e) {
-            var tl = this.getLength(),
-                el = e.getLength();
-            if (tl - el < 0) {
-                return this;
-            }
-            var num = new Array(tl);
-            for (var i = 0; i < tl; i++) {
-                num[i] = this.get(i);
-            }
-            while (num.length >= el) {
-                var ratio = QRMath.glog(num[0]) - QRMath.glog(e.get(0));
-
-                for (var i = 0; i < e.getLength(); i++) {
-                    num[i] ^= QRMath.gexp(QRMath.glog(e.get(i)) + ratio);
-                }
-                while (num[0] == 0) {
-                    num.shift();
-                }
-            }
-            return new QRPolynomial(num, 0);
-        }
-    };
-
-    //---------------------------------------------------------------------
-    // RS_BLOCK_TABLE
-    //---------------------------------------------------------------------
-    /*
-    二维码各个版本信息[块数, 每块中的数据块数, 每块中的信息块数]
-     */
-    var RS_BLOCK_TABLE = [
-        // L
-        // M
-        // Q
-        // H
-        // 1
-        [1, 26, 19],
-        [1, 26, 16],
-        [1, 26, 13],
-        [1, 26, 9],
-
-        // 2
-        [1, 44, 34],
-        [1, 44, 28],
-        [1, 44, 22],
-        [1, 44, 16],
-
-        // 3
-        [1, 70, 55],
-        [1, 70, 44],
-        [2, 35, 17],
-        [2, 35, 13],
-
-        // 4
-        [1, 100, 80],
-        [2, 50, 32],
-        [2, 50, 24],
-        [4, 25, 9],
-
-        // 5
-        [1, 134, 108],
-        [2, 67, 43],
-        [2, 33, 15, 2, 34, 16],
-        [2, 33, 11, 2, 34, 12],
-
-        // 6
-        [2, 86, 68],
-        [4, 43, 27],
-        [4, 43, 19],
-        [4, 43, 15],
-
-        // 7
-        [2, 98, 78],
-        [4, 49, 31],
-        [2, 32, 14, 4, 33, 15],
-        [4, 39, 13, 1, 40, 14],
-
-        // 8
-        [2, 121, 97],
-        [2, 60, 38, 2, 61, 39],
-        [4, 40, 18, 2, 41, 19],
-        [4, 40, 14, 2, 41, 15],
-
-        // 9
-        [2, 146, 116],
-        [3, 58, 36, 2, 59, 37],
-        [4, 36, 16, 4, 37, 17],
-        [4, 36, 12, 4, 37, 13],
-
-        // 10
-        [2, 86, 68, 2, 87, 69],
-        [4, 69, 43, 1, 70, 44],
-        [6, 43, 19, 2, 44, 20],
-        [6, 43, 15, 2, 44, 16],
-
-        // 11
-        [4, 101, 81],
-        [1, 80, 50, 4, 81, 51],
-        [4, 50, 22, 4, 51, 23],
-        [3, 36, 12, 8, 37, 13],
-
-        // 12
-        [2, 116, 92, 2, 117, 93],
-        [6, 58, 36, 2, 59, 37],
-        [4, 46, 20, 6, 47, 21],
-        [7, 42, 14, 4, 43, 15],
-
-        // 13
-        [4, 133, 107],
-        [8, 59, 37, 1, 60, 38],
-        [8, 44, 20, 4, 45, 21],
-        [12, 33, 11, 4, 34, 12],
-
-        // 14
-        [3, 145, 115, 1, 146, 116],
-        [4, 64, 40, 5, 65, 41],
-        [11, 36, 16, 5, 37, 17],
-        [11, 36, 12, 5, 37, 13],
-
-        // 15
-        [5, 109, 87, 1, 110, 88],
-        [5, 65, 41, 5, 66, 42],
-        [5, 54, 24, 7, 55, 25],
-        [11, 36, 12],
-
-        // 16
-        [5, 122, 98, 1, 123, 99],
-        [7, 73, 45, 3, 74, 46],
-        [15, 43, 19, 2, 44, 20],
-        [3, 45, 15, 13, 46, 16],
-
-        // 17
-        [1, 135, 107, 5, 136, 108],
-        [10, 74, 46, 1, 75, 47],
-        [1, 50, 22, 15, 51, 23],
-        [2, 42, 14, 17, 43, 15],
-
-        // 18
-        [5, 150, 120, 1, 151, 121],
-        [9, 69, 43, 4, 70, 44],
-        [17, 50, 22, 1, 51, 23],
-        [2, 42, 14, 19, 43, 15],
-
-        // 19
-        [3, 141, 113, 4, 142, 114],
-        [3, 70, 44, 11, 71, 45],
-        [17, 47, 21, 4, 48, 22],
-        [9, 39, 13, 16, 40, 14],
-
-        // 20
-        [3, 135, 107, 5, 136, 108],
-        [3, 67, 41, 13, 68, 42],
-        [15, 54, 24, 5, 55, 25],
-        [15, 43, 15, 10, 44, 16],
-
-        // 21
-        [4, 144, 116, 4, 145, 117],
-        [17, 68, 42],
-        [17, 50, 22, 6, 51, 23],
-        [19, 46, 16, 6, 47, 17],
-
-        // 22
-        [2, 139, 111, 7, 140, 112],
-        [17, 74, 46],
-        [7, 54, 24, 16, 55, 25],
-        [34, 37, 13],
-
-        // 23
-        [4, 151, 121, 5, 152, 122],
-        [4, 75, 47, 14, 76, 48],
-        [11, 54, 24, 14, 55, 25],
-        [16, 45, 15, 14, 46, 16],
-
-        // 24
-        [6, 147, 117, 4, 148, 118],
-        [6, 73, 45, 14, 74, 46],
-        [11, 54, 24, 16, 55, 25],
-        [30, 46, 16, 2, 47, 17],
-
-        // 25
-        [8, 132, 106, 4, 133, 107],
-        [8, 75, 47, 13, 76, 48],
-        [7, 54, 24, 22, 55, 25],
-        [22, 45, 15, 13, 46, 16],
-
-        // 26
-        [10, 142, 114, 2, 143, 115],
-        [19, 74, 46, 4, 75, 47],
-        [28, 50, 22, 6, 51, 23],
-        [33, 46, 16, 4, 47, 17],
-
-        // 27
-        [8, 152, 122, 4, 153, 123],
-        [22, 73, 45, 3, 74, 46],
-        [8, 53, 23, 26, 54, 24],
-        [12, 45, 15, 28, 46, 16],
-
-        // 28
-        [3, 147, 117, 10, 148, 118],
-        [3, 73, 45, 23, 74, 46],
-        [4, 54, 24, 31, 55, 25],
-        [11, 45, 15, 31, 46, 16],
-
-        // 29
-        [7, 146, 116, 7, 147, 117],
-        [21, 73, 45, 7, 74, 46],
-        [1, 53, 23, 37, 54, 24],
-        [19, 45, 15, 26, 46, 16],
-
-        // 30
-        [5, 145, 115, 10, 146, 116],
-        [19, 75, 47, 10, 76, 48],
-        [15, 54, 24, 25, 55, 25],
-        [23, 45, 15, 25, 46, 16],
-
-        // 31
-        [13, 145, 115, 3, 146, 116],
-        [2, 74, 46, 29, 75, 47],
-        [42, 54, 24, 1, 55, 25],
-        [23, 45, 15, 28, 46, 16],
-
-        // 32
-        [17, 145, 115],
-        [10, 74, 46, 23, 75, 47],
-        [10, 54, 24, 35, 55, 25],
-        [19, 45, 15, 35, 46, 16],
-
-        // 33
-        [17, 145, 115, 1, 146, 116],
-        [14, 74, 46, 21, 75, 47],
-        [29, 54, 24, 19, 55, 25],
-        [11, 45, 15, 46, 46, 16],
-
-        // 34
-        [13, 145, 115, 6, 146, 116],
-        [14, 74, 46, 23, 75, 47],
-        [44, 54, 24, 7, 55, 25],
-        [59, 46, 16, 1, 47, 17],
-
-        // 35
-        [12, 151, 121, 7, 152, 122],
-        [12, 75, 47, 26, 76, 48],
-        [39, 54, 24, 14, 55, 25],
-        [22, 45, 15, 41, 46, 16],
-
-        // 36
-        [6, 151, 121, 14, 152, 122],
-        [6, 75, 47, 34, 76, 48],
-        [46, 54, 24, 10, 55, 25],
-        [2, 45, 15, 64, 46, 16],
-
-        // 37
-        [17, 152, 122, 4, 153, 123],
-        [29, 74, 46, 14, 75, 47],
-        [49, 54, 24, 10, 55, 25],
-        [24, 45, 15, 46, 46, 16],
-
-        // 38
-        [4, 152, 122, 18, 153, 123],
-        [13, 74, 46, 32, 75, 47],
-        [48, 54, 24, 14, 55, 25],
-        [42, 45, 15, 32, 46, 16],
-
-        // 39
-        [20, 147, 117, 4, 148, 118],
-        [40, 75, 47, 7, 76, 48],
-        [43, 54, 24, 22, 55, 25],
-        [10, 45, 15, 67, 46, 16],
-
-        // 40
-        [19, 148, 118, 6, 149, 119],
-        [18, 75, 47, 31, 76, 48],
-        [34, 54, 24, 34, 55, 25],
-        [20, 45, 15, 61, 46, 16]
-    ];
-
-    /**
-     * 根据数据获取对应版本
-     * @return {[type]} [description]
-     */
-    QRCodeAlg.prototype.getRightType = function () {
-        for (var typeNumber = 1; typeNumber < 41; typeNumber++) {
-            var rsBlock = RS_BLOCK_TABLE[(typeNumber - 1) * 4 + this.errorCorrectLevel];
-            if (rsBlock == undefined) {
-                throw new Error("bad rs block @ typeNumber:" + typeNumber + "/errorCorrectLevel:" + this.errorCorrectLevel);
-            }
-            var length = rsBlock.length / 3;
-            var totalDataCount = 0;
-            for (var i = 0; i < length; i++) {
-                var count = rsBlock[i * 3 + 0];
-                var dataCount = rsBlock[i * 3 + 2];
-                totalDataCount += dataCount * count;
-            }
-            var lengthBytes = typeNumber > 9 ? 2 : 1;
-            if (this.utf8bytes.length + lengthBytes < totalDataCount || typeNumber == 40) {
-                this.typeNumber = typeNumber;
-                this.rsBlock = rsBlock;
-                this.totalDataCount = totalDataCount;
-                break;
-            }
-        }
-    };
-
-    //---------------------------------------------------------------------
-    // QRBitBuffer
-    //---------------------------------------------------------------------
-    function QRBitBuffer() {
-        this.buffer = new Array();
-        this.length = 0;
-    }
-    QRBitBuffer.prototype = {
-        get: function (index) {
-            var bufIndex = Math.floor(index / 8);
-            return ((this.buffer[bufIndex] >>> (7 - index % 8)) & 1);
-        },
-        put: function (num, length) {
-            for (var i = 0; i < length; i++) {
-                this.putBit(((num >>> (length - i - 1)) & 1));
-            }
-        },
-        putBit: function (bit) {
-            var bufIndex = Math.floor(this.length / 8);
-            if (this.buffer.length <= bufIndex) {
-                this.buffer.push(0);
-            }
-            if (bit) {
-                this.buffer[bufIndex] |= (0x80 >>> (this.length % 8));
-            }
-            this.length++;
-        }
-    };
-
-
-
-    // xzedit
-    let qrcodeAlgObjCache = [];
-    /**
-     * 二维码构造函数，主要用于绘制
-     * @param  {参数列表} opt 传递参数
-     * @return {}
-     */
-    QRCode = function (opt) {
-        //设置默认参数
-        this.options = {
-            text: '',
-            size: 256,
-            correctLevel: 3,
-            background: '#ffffff',
-            foreground: '#000000',
-            pdground: '#000000',
-            image: '',
-            imageSize: 30,
-            canvasId: opt.canvasId,
-            context: opt.context,
-            usingComponents: opt.usingComponents,
-            showLoading: opt.showLoading,
-            loadingText: opt.loadingText,
-        };
-        if (typeof opt === 'string') { // 只编码ASCII字符串
-            opt = {
-                text: opt
-            };
-        }
-        if (opt) {
-            for (var i in opt) {
-                this.options[i] = opt[i];
-            }
-        }
-        //使用QRCodeAlg创建二维码结构
-        var qrCodeAlg = null;
-        for (var i = 0, l = qrcodeAlgObjCache.length; i < l; i++) {
-            if (qrcodeAlgObjCache[i].text == this.options.text && qrcodeAlgObjCache[i].text.correctLevel == this.options.correctLevel) {
-                qrCodeAlg = qrcodeAlgObjCache[i].obj;
-                break;
-            }
-        }
-        if (i == l) {
-            qrCodeAlg = new QRCodeAlg(this.options.text, this.options.correctLevel);
-            qrcodeAlgObjCache.push({
-                text: this.options.text,
-                correctLevel: this.options.correctLevel,
-                obj: qrCodeAlg
-            });
-        }
-        /**
-         * 计算矩阵点的前景色
-         * @param {Obj} config
-         * @param {Number} config.row 点x坐标
-         * @param {Number} config.col 点y坐标
-         * @param {Number} config.count 矩阵大小
-         * @param {Number} config.options 组件的options
-         * @return {String}
-         */
-        let getForeGround = function (config) {
-            var options = config.options;
-            if (options.pdground && (
-                (config.row > 1 && config.row < 5 && config.col > 1 && config.col < 5) ||
-                (config.row > (config.count - 6) && config.row < (config.count - 2) && config.col > 1 && config.col < 5) ||
-                (config.row > 1 && config.row < 5 && config.col > (config.count - 6) && config.col < (config.count - 2))
-            )) {
-                return options.pdground;
-            }
-            return options.foreground;
-        }
-        // 创建canvas
-        let createCanvas = function (options) {
-            if(options.showLoading){
-                uni.showLoading({
-                    title: options.loadingText,
-                    mask: true
-                });
-            }
-            var ctx = uni.createCanvasContext(options.canvasId, options.context);
-            var count = qrCodeAlg.getModuleCount();
-            var ratioSize = options.size;
-            var ratioImgSize = options.imageSize;
-            //计算每个点的长宽
-            var tileW = (ratioSize / count).toPrecision(4);
-            var tileH = (ratioSize / count).toPrecision(4);
-            //绘制
-            for (var row = 0; row < count; row++) {
-                for (var col = 0; col < count; col++) {
-                    var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
-                    var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
-                    var foreground = getForeGround({
-                        row: row,
-                        col: col,
-                        count: count,
-                        options: options
-                    });
-                    ctx.setFillStyle(qrCodeAlg.modules[row][col] ? foreground : options.background);
-                    ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
-                }
-            }
-            if (options.image) {
-                var x = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));
-                var y = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));
-                drawRoundedRect(ctx, x, y, ratioImgSize, ratioImgSize, 2, 6, true, true)
-                ctx.drawImage(options.image, x, y, ratioImgSize, ratioImgSize);
-                // 画圆角矩形
-                function drawRoundedRect(ctxi, x, y, width, height, r, lineWidth, fill, stroke) {
-                    ctxi.setLineWidth(lineWidth);
-                    ctxi.setFillStyle(options.background);
-                    ctxi.setStrokeStyle(options.background);
-                    ctxi.beginPath(); // draw top and top right corner 
-                    ctxi.moveTo(x + r, y);
-                    ctxi.arcTo(x + width, y, x + width, y + r, r); // draw right side and bottom right corner 
-                    ctxi.arcTo(x + width, y + height, x + width - r, y + height, r); // draw bottom and bottom left corner 
-                    ctxi.arcTo(x, y + height, x, y + height - r, r); // draw left and top left corner 
-                    ctxi.arcTo(x, y, x + r, y, r);
-                    ctxi.closePath();
-                    if (fill) {
-                        ctxi.fill();
-                    }
-                    if (stroke) {
-                        ctxi.stroke();
-                    }
-                }
-            }
-            setTimeout(() => {
-                ctx.draw(true, () => {
-                    // 保存到临时区域
-                    setTimeout(() => {
-                        uni.canvasToTempFilePath({
-                            width: options.width,
-                            height: options.height,
-                            destWidth: options.width,
-                            destHeight: options.height,
-                            canvasId: options.canvasId,
-                            quality: Number(1),
-                            success: function (res) {
-                                if (options.cbResult) {
-                                    // 由于官方还没有统一此接口的输出字段，所以先判定下  支付宝为 res.apFilePath
-                                    if (!empty(res.tempFilePath)) {
-                                        options.cbResult(res.tempFilePath)
-                                    } else if (!empty(res.apFilePath)) {
-                                        options.cbResult(res.apFilePath)
-                                    } else {
-                                        options.cbResult(res.tempFilePath)
-                                    }
-                                }
-                            },
-                            fail: function (res) {
-                                if (options.cbResult) {
-                                    options.cbResult(res)
-                                }
-                            },
-                            complete: function () {
-                                uni.hideLoading();
-                            },
-                        }, options.context);
-                    }, options.text.length + 100);
-                });
-            }, options.usingComponents ? 0 : 150);
-        }
-        createCanvas(this.options);
-        // 空判定
-        let empty = function (v) {
-            let tp = typeof v,
-                rt = false;
-            if (tp == "number" && String(v) == "") {
-                rt = true
-            } else if (tp == "undefined") {
-                rt = true
-            } else if (tp == "object") {
-                if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
-            } else if (tp == "string") {
-                if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
-            } else if (tp == "function") {
-                rt = false
-            }
-            return rt
-        }
-    };
-    QRCode.prototype.clear = function (fn) {
-        var ctx = uni.createCanvasContext(this.options.canvasId, this.options.context)
-        ctx.clearRect(0, 0, this.options.size, this.options.size)
-        ctx.draw(false, () => {
-            if (fn) {
-                fn()
-            }
-        })
-    };
-})()
-
-export default QRCode
\ No newline at end of file
diff --git a/components/tki-qrcode/tki-qrcode.vue b/components/tki-qrcode/tki-qrcode.vue
deleted file mode 100644
index a90eb3a..0000000
--- a/components/tki-qrcode/tki-qrcode.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<template xlang="wxml" minapp="mpvue">
-	<view class="tki-qrcode">
-		<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
-		<image v-if="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
-	</view>
-</template>
-
-<script>
-	import QRCode from "./qrcode.js"
-	let qrcode
-	export default {
-		name: "tki-qrcode",
-		props: {
-			cid: {
-				type: String,
-				default: 'tki-qrcode-canvas'
-			},
-			size: {
-				type: Number,
-				default: 200
-			},
-			unit: {
-				type: String,
-				default: 'upx'
-			},
-			show: {
-				type: Boolean,
-				default: true
-			},
-			val: {
-				type: String,
-				default: ''
-			},
-			background: {
-				type: String,
-				default: '#ffffff'
-			},
-			foreground: {
-				type: String,
-				default: '#000000'
-			},
-			pdground: {
-				type: String,
-				default: '#000000'
-			},
-			icon: {
-				type: String,
-				default: ''
-			},
-			iconSize: {
-				type: Number,
-				default: 40
-			},
-			lv: {
-				type: Number,
-				default: 3
-			},
-			onval: {
-				type: Boolean,
-				default: false
-			},
-			loadMake: {
-				type: Boolean,
-				default: false
-			},
-			usingComponents: {
-				type: Boolean,
-				default: true
-			},
-			showLoading: {
-				type: Boolean,
-				default: true
-			},
-			loadingText: {
-				type: String,
-				default: '二维码生成中'
-			},
-		},
-		data() {
-			return {
-				result: '',
-			}
-		},
-		methods: {
-			_makeCode() {
-				let that = this
-				if (!this._empty(this.val)) {
-					qrcode = new QRCode({
-						context: that, // 上下文环境
-						canvasId: that.cid, // canvas-id
-						usingComponents: that.usingComponents, // 是否是自定义组件
-						// loadingText: that.loadingText, // loading文字
-						text: that.val, // 生成内容
-						size: that.cpSize, // 二维码大小
-						background: that.background, // 背景色
-						foreground: that.foreground, // 前景色
-						pdground: that.pdground, // 定位角点颜色
-						correctLevel: that.lv, // 容错级别
-						image: that.icon, // 二维码图标
-						imageSize: that.iconSize, // 二维码图标大小
-						cbResult: function(res) { // 生成二维码的回调
-							that._result(res)
-						},
-					});
-				} else {
-					uni.showToast({
-						title: '二维码内容不能为空',
-						icon: 'none',
-						duration: 2000
-					});
-				}
-			},
-			_clearCode() {
-				this._result('')
-				qrcode.clear()
-			},
-			_saveCode() {
-				let that = this;
-				if (this.result != "") {
-					uni.saveImageToPhotosAlbum({
-						filePath: that.result,
-						success: function() {
-							// uni.showToast({
-							// 	title: '二维码保存成功',
-							// 	icon: 'success',
-							// 	duration: 2000
-							// });
-						}
-					});
-				}
-			},
-			_result(res) {
-				this.result = res;
-				this.$emit('result', res)
-			},
-			_empty(v) {
-				let tp = typeof v,
-					rt = false;
-				if (tp == "number" && String(v) == "") {
-					rt = true
-				} else if (tp == "undefined") {
-					rt = true
-				} else if (tp == "object") {
-					if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
-				} else if (tp == "string") {
-					if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
-				} else if (tp == "function") {
-					rt = false
-				}
-				return rt
-			}
-		},
-		watch: {
-			size: function(n, o) {
-				if (n != o && !this._empty(n)) {
-					this.cSize = n
-					if (!this._empty(this.val)) {
-						setTimeout(() => {
-							this._makeCode()
-						}, 100);
-					}
-				}
-			},
-			val: function(n, o) {
-				if (this.onval) {
-					if (n != o && !this._empty(n)) {
-						setTimeout(() => {
-							this._makeCode()
-						}, 0);
-					}
-				}
-			}
-		},
-		computed: {
-			cpSize() {
-				if (this.unit == "upx") {
-					return uni.upx2px(this.size)
-				} else {
-					return this.size
-				}
-			}
-		},
-		mounted: function() {
-			if (this.loadMake) {
-				if (!this._empty(this.val)) {
-					setTimeout(() => {
-						this._makeCode()
-					}, 0);
-				}
-			}
-		},
-	}
-</script>
-<style>
-	.tki-qrcode {
-		position: relative;
-	}
-
-	.tki-qrcode-canvas {
-		position: fixed;
-		top: -99999upx;
-		left: -99999upx;
-		z-index: -99999;
-	}
-</style>
\ No newline at end of file
diff --git a/gcanvas/bridge/bridge-weex.js b/gcanvas/bridge/bridge-weex.js
new file mode 100644
index 0000000..27086ec
--- /dev/null
+++ b/gcanvas/bridge/bridge-weex.js
@@ -0,0 +1,241 @@
+const isWeex = typeof WXEnvironment !== 'undefined';
+const isWeexIOS = isWeex && /ios/i.test(WXEnvironment.platform);
+const isWeexAndroid = isWeex && !isWeexIOS;
+
+import GLmethod from '../context-webgl/GLmethod';
+
+const GCanvasModule =
+    (typeof weex !== 'undefined' && weex.requireModule) ? (weex.requireModule('gcanvas')) :
+        (typeof __weex_require__ !== 'undefined') ? (__weex_require__('@weex-module/gcanvas')) : {};
+
+let isDebugging = false;
+
+let isComboDisabled = false;
+
+const logCommand = (function () {
+    const methodQuery = [];
+    Object.keys(GLmethod).forEach(key => {
+        methodQuery[GLmethod[key]] = key;
+    })
+    const queryMethod = (id) => {
+        return methodQuery[parseInt(id)] || 'NotFoundMethod';
+    }
+    const logCommand = (id, cmds) => {
+        const mId = cmds.split(',')[0];
+        const mName = queryMethod(mId);
+        console.log(`=== callNative - componentId:${id}; method: ${mName}; cmds: ${cmds}`);
+    }
+    return logCommand;
+})();
+
+function joinArray(arr, sep) {
+    let res = '';
+    for (let i = 0; i < arr.length; i++) {
+        if (i !== 0) {
+            res += sep;
+        }
+        res += arr[i];
+    }
+    return res;
+}
+
+const commandsCache = {}
+
+const GBridge = {
+
+    callEnable: (ref, configArray) => {
+
+        commandsCache[ref] = [];
+
+        return GCanvasModule.enable({
+            componentId: ref,
+            config: configArray
+        });
+    },
+
+    callEnableDebug: () => {
+        isDebugging = true;
+    },
+
+    callEnableDisableCombo: () => {
+        isComboDisabled = true;
+    },
+
+    callSetContextType: function (componentId, context_type) {
+        GCanvasModule.setContextType(context_type, componentId);
+    },
+
+    callReset: function(id){
+        GCanvasModule.resetComponent && canvasModule.resetComponent(componentId);
+    },
+
+    render: isWeexIOS ? function (componentId) {
+        return GCanvasModule.extendCallNative({
+            contextId: componentId,
+            type: 0x60000001
+        });
+    } : function (componentId) {
+        return callGCanvasLinkNative(componentId, 0x60000001, 'render');
+    },
+
+    render2d: isWeexIOS ? function (componentId, commands, callback) {
+
+        if (isDebugging) {
+            console.log('>>> >>> render2d ===');
+            console.log('>>> commands: ' + commands);
+        }
+		
+        GCanvasModule.render([commands, callback?true:false], componentId, callback);
+
+    } : function (componentId, commands,callback) {
+
+        if (isDebugging) {
+            console.log('>>> >>> render2d ===');
+            console.log('>>> commands: ' + commands);
+        }
+
+        callGCanvasLinkNative(componentId, 0x20000001, commands);
+		if(callback){
+		callback();
+		}
+    },
+
+    callExtendCallNative: isWeexIOS ? function (componentId, cmdArgs) {
+
+        throw 'should not be here anymore ' + cmdArgs;
+
+    } : function (componentId, cmdArgs) {
+
+        throw 'should not be here anymore ' + cmdArgs;
+
+    },
+
+
+    flushNative: isWeexIOS ? function (componentId) {
+
+        const cmdArgs = joinArray(commandsCache[componentId], ';');
+        commandsCache[componentId] = [];
+
+        if (isDebugging) {
+            console.log('>>> >>> flush native ===');
+            console.log('>>> commands: ' + cmdArgs);
+        }
+
+        const result = GCanvasModule.extendCallNative({
+            "contextId": componentId,
+            "type": 0x60000000,
+            "args": cmdArgs
+        });
+
+        const res = result && result.result;
+
+        if (isDebugging) {
+            console.log('>>> result: ' + res);
+        }
+
+        return res;
+
+    } : function (componentId) {
+
+        const cmdArgs = joinArray(commandsCache[componentId], ';');
+        commandsCache[componentId] = [];
+
+        if (isDebugging) {
+            console.log('>>> >>> flush native ===');
+            console.log('>>> commands: ' + cmdArgs);
+        }
+
+        const result = callGCanvasLinkNative(componentId, 0x60000000, cmdArgs);
+
+        if (isDebugging) {
+            console.log('>>> result: ' + result);
+        }
+
+        return result;
+    },
+
+    callNative: function (componentId, cmdArgs, cache) {
+
+        if (isDebugging) {
+            logCommand(componentId, cmdArgs);
+        }
+
+        commandsCache[componentId].push(cmdArgs);
+
+        if (!cache || isComboDisabled) {
+            return GBridge.flushNative(componentId);
+        } else {
+            return undefined;
+        }
+    },
+
+    texImage2D(componentId, ...args) {
+        if (isWeexIOS) {
+            if (args.length === 6) {
+                const [target, level, internalformat, format, type, image] = args;
+                GBridge.callNative(
+                    componentId,
+                    GLmethod.texImage2D + ',' + 6 + ',' + target + ',' + level + ',' + internalformat + ',' + format + ',' + type + ',' + image.src
+                )
+            } else if (args.length === 9) {
+                const [target, level, internalformat, width, height, border, format, type, image] = args;
+                GBridge.callNative(
+                    componentId,
+                    GLmethod.texImage2D + ',' + 9 + ',' + target + ',' + level + ',' + internalformat + ',' + width + ',' + height + ',' + border + ',' +
+                    + format + ',' + type + ',' + (image ? image.src : 0)
+                )
+            }
+        } else if (isWeexAndroid) {
+            if (args.length === 6) {
+                const [target, level, internalformat, format, type, image] = args;
+                GCanvasModule.texImage2D(componentId, target, level, internalformat, format, type, image.src);
+            } else if (args.length === 9) {
+                const [target, level, internalformat, width, height, border, format, type, image] = args;
+                GCanvasModule.texImage2D(componentId, target, level, internalformat, width, height, border, format, type, (image ? image.src : 0));
+            }
+        }
+    },
+
+    texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image) {
+        if (isWeexIOS) {
+            if (arguments.length === 8) {
+                GBridge.callNative(
+                    componentId,
+                    GLmethod.texSubImage2D + ',' + 6 + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset, + ',' + format + ',' + type + ',' + image.src
+                )
+            }
+        } else if (isWeexAndroid) {
+            GCanvasModule.texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image.src);
+        }
+    },
+
+    bindImageTexture(componentId, src, imageId) {
+        GCanvasModule.bindImageTexture([src, imageId], componentId);
+    },
+
+    perloadImage([url, id], callback) {
+        GCanvasModule.preLoadImage([url, id], function (image) {
+            image.url = url;
+            image.id = id;
+            callback(image);
+        });
+    },
+	
+	measureText(text, fontStyle, componentId) {
+	    return GCanvasModule.measureText([text, fontStyle], componentId);
+	},
+	
+	getImageData (componentId, x, y, w, h, callback) {
+		GCanvasModule.getImageData([x, y,w,h],componentId,callback);
+	},
+	
+	putImageData (componentId, data, x, y, w, h, callback) {
+		GCanvasModule.putImageData([x, y,w,h,data],componentId,callback);
+	},
+	
+	toTempFilePath(componentId, x, y, width, height, destWidth, destHeight, fileType, quality, callback){ 
+		GCanvasModule.toTempFilePath([x, y, width,height, destWidth, destHeight, fileType, quality], componentId, callback);
+	}
+}
+
+export default GBridge;
\ No newline at end of file
diff --git a/gcanvas/context-2d/FillStyleLinearGradient.js b/gcanvas/context-2d/FillStyleLinearGradient.js
new file mode 100644
index 0000000..3e7f03a
--- /dev/null
+++ b/gcanvas/context-2d/FillStyleLinearGradient.js
@@ -0,0 +1,18 @@
+class FillStyleLinearGradient {
+
+    constructor(x0, y0, x1, y1) {
+        this._start_pos = { _x: x0, _y: y0 };
+        this._end_pos = { _x: x1, _y: y1 };
+        this._stop_count = 0;
+        this._stops = [0, 0, 0, 0, 0];
+    }
+
+    addColorStop = function (pos, color) {
+        if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
+            this._stops[this._stop_count] = { _pos: pos, _color: color };
+            this._stop_count++;
+        }
+    }
+}
+
+export default FillStyleLinearGradient;
\ No newline at end of file
diff --git a/gcanvas/context-2d/FillStylePattern.js b/gcanvas/context-2d/FillStylePattern.js
new file mode 100644
index 0000000..6e4f646
--- /dev/null
+++ b/gcanvas/context-2d/FillStylePattern.js
@@ -0,0 +1,8 @@
+class FillStylePattern {
+    constructor(img, pattern) {
+        this._style = pattern;
+        this._img = img;
+    }
+}
+
+export default FillStylePattern;
\ No newline at end of file
diff --git a/gcanvas/context-2d/FillStyleRadialGradient.js b/gcanvas/context-2d/FillStyleRadialGradient.js
new file mode 100644
index 0000000..7790596
--- /dev/null
+++ b/gcanvas/context-2d/FillStyleRadialGradient.js
@@ -0,0 +1,17 @@
+class FillStyleRadialGradient {
+    constructor(x0, y0, r0, x1, y1, r1) {
+        this._start_pos = { _x: x0, _y: y0, _r: r0 };
+        this._end_pos = { _x: x1, _y: y1, _r: r1 };
+        this._stop_count = 0;
+        this._stops = [0, 0, 0, 0, 0];
+    }
+
+    addColorStop(pos, color) {
+        if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
+            this._stops[this._stop_count] = { _pos: pos, _color: color };
+            this._stop_count++;
+        }
+    }
+}
+
+export default FillStyleRadialGradient;
\ No newline at end of file
diff --git a/gcanvas/context-2d/RenderingContext.js b/gcanvas/context-2d/RenderingContext.js
new file mode 100644
index 0000000..e6b8f48
--- /dev/null
+++ b/gcanvas/context-2d/RenderingContext.js
@@ -0,0 +1,666 @@
+import FillStylePattern from './FillStylePattern';
+import FillStyleLinearGradient from './FillStyleLinearGradient';
+import FillStyleRadialGradient from './FillStyleRadialGradient';
+import GImage from '../env/image.js';
+import {
+	ArrayBufferToBase64,
+	Base64ToUint8ClampedArray
+} from '../env/tool.js';
+
+export default class CanvasRenderingContext2D {
+
+	_drawCommands = '';
+
+	_globalAlpha = 1.0;
+
+	_fillStyle = 'rgb(0,0,0)';
+	_strokeStyle = 'rgb(0,0,0)';
+
+	_lineWidth = 1;
+	_lineCap = 'butt';
+	_lineJoin = 'miter';
+
+	_miterLimit = 10;
+
+	_globalCompositeOperation = 'source-over';
+
+	_textAlign = 'start';
+	_textBaseline = 'alphabetic';
+
+	_font = '10px sans-serif';
+
+	_savedGlobalAlpha = [];
+
+	timer = null;
+	componentId = null;
+
+	_notCommitDrawImageCache = [];
+	_needRedrawImageCache = [];
+	_redrawCommands = '';
+	_autoSaveContext = true;
+	// _imageMap = new GHashMap();
+	// _textureMap = new GHashMap();
+
+	constructor() {
+		this.className = 'CanvasRenderingContext2D';
+		//this.save()
+	}
+
+	setFillStyle(value) {
+		this.fillStyle = value;
+	}
+
+	set fillStyle(value) {
+		this._fillStyle = value;
+
+		if (typeof(value) == 'string') {
+			this._drawCommands = this._drawCommands.concat("F" + value + ";");
+		} else if (value instanceof FillStylePattern) {
+			const image = value._img;
+			if (!image.complete) {
+				image.onload = () => {
+					var index = this._needRedrawImageCache.indexOf(image);
+					if (index > -1) {
+						this._needRedrawImageCache.splice(index, 1);
+						CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
+						this._redrawflush(true);
+					}
+				}
+				this._notCommitDrawImageCache.push(image);
+			} else {
+				CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
+			}
+
+			//CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
+			this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
+		} else if (value instanceof FillStyleLinearGradient) {
+			var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
+				value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
+				value._stop_count;
+			for (var i = 0; i < value._stop_count; ++i) {
+				command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
+			}
+			this._drawCommands = this._drawCommands.concat(command + ";");
+		} else if (value instanceof FillStyleRadialGradient) {
+			var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
+				.toFixed(2) + "," +
+				value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," + value._end_pos._r.toFixed(2) + "," +
+				value._stop_count;
+			for (var i = 0; i < value._stop_count; ++i) {
+				command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
+			}
+			this._drawCommands = this._drawCommands.concat(command + ";");
+		}
+	}
+
+	get fillStyle() {
+		return this._fillStyle;
+	}
+
+	get globalAlpha() {
+		return this._globalAlpha;
+	}
+
+	setGlobalAlpha(value) {
+		this.globalAlpha = value;
+	}
+
+	set globalAlpha(value) {
+		this._globalAlpha = value;
+		this._drawCommands = this._drawCommands.concat("a" + value.toFixed(2) + ";");
+	}
+
+
+	get strokeStyle() {
+		return this._strokeStyle;
+	}
+
+	setStrokeStyle(value) {
+		this.strokeStyle = value;
+	}
+
+	set strokeStyle(value) {
+
+		this._strokeStyle = value;
+
+		if (typeof(value) == 'string') {
+			this._drawCommands = this._drawCommands.concat("S" + value + ";");
+		} else if (value instanceof FillStylePattern) {
+			CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
+			this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
+		} else if (value instanceof FillStyleLinearGradient) {
+			var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
+				value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
+				value._stop_count;
+
+			for (var i = 0; i < value._stop_count; ++i) {
+				command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
+			}
+			this._drawCommands = this._drawCommands.concat(command + ";");
+		} else if (value instanceof FillStyleRadialGradient) {
+			var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
+				.toFixed(2) + "," +
+				value._end_pos._x.toFixed(2) + "," + value._end_pos._y + ",".toFixed(2) + value._end_pos._r.toFixed(2) + "," +
+				value._stop_count;
+
+			for (var i = 0; i < value._stop_count; ++i) {
+				command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
+			}
+			this._drawCommands = this._drawCommands.concat(command + ";");
+		}
+	}
+
+	get lineWidth() {
+		return this._lineWidth;
+	}
+
+	setLineWidth(value) {
+		this.lineWidth = value;
+	}
+
+	set lineWidth(value) {
+		this._lineWidth = value;
+		this._drawCommands = this._drawCommands.concat("W" + value + ";");
+	}
+
+	get lineCap() {
+		return this._lineCap;
+	}
+
+	setLineCap(value) {
+		this.lineCap = value;
+	}
+
+	set lineCap(value) {
+		this._lineCap = value;
+		this._drawCommands = this._drawCommands.concat("C" + value + ";");
+	}
+
+	get lineJoin() {
+		return this._lineJoin;
+	}
+
+	setLineJoin(value) {
+		this.lineJoin = value
+	}
+
+	set lineJoin(value) {
+		this._lineJoin = value;
+		this._drawCommands = this._drawCommands.concat("J" + value + ";");
+	}
+
+	get miterLimit() {
+		return this._miterLimit;
+	}
+
+	setMiterLimit(value) {
+		this.miterLimit = value
+	}
+
+	set miterLimit(value) {
+		this._miterLimit = value;
+		this._drawCommands = this._drawCommands.concat("M" + value + ";");
+	}
+
+	get globalCompositeOperation() {
+		return this._globalCompositeOperation;
+	}
+
+	set globalCompositeOperation(value) {
+
+		this._globalCompositeOperation = value;
+		let mode = 0;
+		switch (value) {
+			case "source-over":
+				mode = 0;
+				break;
+			case "source-atop":
+				mode = 5;
+				break;
+			case "source-in":
+				mode = 0;
+				break;
+			case "source-out":
+				mode = 2;
+				break;
+			case "destination-over":
+				mode = 4;
+				break;
+			case "destination-atop":
+				mode = 4;
+				break;
+			case "destination-in":
+				mode = 4;
+				break;
+			case "destination-out":
+				mode = 3;
+				break;
+			case "lighter":
+				mode = 1;
+				break;
+			case "copy":
+				mode = 2;
+				break;
+			case "xor":
+				mode = 6;
+				break;
+			default:
+				mode = 0;
+		}
+
+		this._drawCommands = this._drawCommands.concat("B" + mode + ";");
+	}
+
+	get textAlign() {
+		return this._textAlign;
+	}
+
+	setTextAlign(value) {
+		this.textAlign = value
+	}
+
+	set textAlign(value) {
+
+		this._textAlign = value;
+		let Align = 0;
+		switch (value) {
+			case "start":
+				Align = 0;
+				break;
+			case "end":
+				Align = 1;
+				break;
+			case "left":
+				Align = 2;
+				break;
+			case "center":
+				Align = 3;
+				break;
+			case "right":
+				Align = 4;
+				break;
+			default:
+				Align = 0;
+		}
+
+		this._drawCommands = this._drawCommands.concat("A" + Align + ";");
+	}
+
+	get textBaseline() {
+		return this._textBaseline;
+	}
+
+	setTextBaseline(value) {
+		this.textBaseline = value
+	}
+
+	set textBaseline(value) {
+		this._textBaseline = value;
+		let baseline = 0;
+		switch (value) {
+			case "alphabetic":
+				baseline = 0;
+				break;
+			case "middle":
+				baseline = 1;
+				break;
+			case "top":
+				baseline = 2;
+				break;
+			case "hanging":
+				baseline = 3;
+				break;
+			case "bottom":
+				baseline = 4;
+				break;
+			case "ideographic":
+				baseline = 5;
+				break;
+			default:
+				baseline = 0;
+				break;
+		}
+
+		this._drawCommands = this._drawCommands.concat("E" + baseline + ";");
+	}
+
+	get font() {
+		return this._font;
+	}
+
+	setFontSize(size) {
+		var str = this._font;
+		var strs = str.trim().split(/\s+/);
+		for (var i = 0; i < strs.length; i++) {
+			var values = ["normal", "italic", "oblique", "normal", "small-caps", "normal", "bold",
+				"bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900",
+				"normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
+				"semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
+			];
+
+			if (-1 == values.indexOf(strs[i].trim())) {
+				if (typeof size === 'string') {
+					strs[i] = size;
+				} else if (typeof size === 'number') {
+					strs[i] = String(size) + 'px';
+				}
+				break;
+			}
+		}
+		this.font = strs.join(" ");
+	}
+
+	set font(value) {
+		this._font = value;
+		this._drawCommands = this._drawCommands.concat("j" + value + ";");
+	}
+
+	setTransform(a, b, c, d, tx, ty) {
+		this._drawCommands = this._drawCommands.concat("t" +
+			(a === 1 ? "1" : a.toFixed(2)) + "," +
+			(b === 0 ? "0" : b.toFixed(2)) + "," +
+			(c === 0 ? "0" : c.toFixed(2)) + "," +
+			(d === 1 ? "1" : d.toFixed(2)) + "," + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
+	}
+
+	transform(a, b, c, d, tx, ty) {
+		this._drawCommands = this._drawCommands.concat("f" +
+			(a === 1 ? "1" : a.toFixed(2)) + "," +
+			(b === 0 ? "0" : b.toFixed(2)) + "," +
+			(c === 0 ? "0" : c.toFixed(2)) + "," +
+			(d === 1 ? "1" : d.toFixed(2)) + "," + tx + "," + ty + ";");
+	}
+
+	resetTransform() {
+		this._drawCommands = this._drawCommands.concat("m;");
+	}
+
+	scale(a, d) {
+		this._drawCommands = this._drawCommands.concat("k" + a.toFixed(2) + "," +
+			d.toFixed(2) + ";");
+	}
+
+	rotate(angle) {
+		this._drawCommands = this._drawCommands
+			.concat("r" + angle.toFixed(6) + ";");
+	}
+
+	translate(tx, ty) {
+		this._drawCommands = this._drawCommands.concat("l" + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
+	}
+
+	save() {
+		this._savedGlobalAlpha.push(this._globalAlpha);
+		this._drawCommands = this._drawCommands.concat("v;");
+	}
+
+	restore() {
+		this._drawCommands = this._drawCommands.concat("e;");
+		this._globalAlpha = this._savedGlobalAlpha.pop();
+	}
+
+	createPattern(img, pattern) {
+		if (typeof img === 'string') {
+			var imgObj = new GImage();
+			imgObj.src = img;
+			img = imgObj;
+		}
+		return new FillStylePattern(img, pattern);
+	}
+
+	createLinearGradient(x0, y0, x1, y1) {
+		return new FillStyleLinearGradient(x0, y0, x1, y1);
+	}
+
+	createRadialGradient = function(x0, y0, r0, x1, y1, r1) {
+		return new FillStyleRadialGradient(x0, y0, r0, x1, y1, r1);
+	};
+
+	createCircularGradient = function(x0, y0, r0) {
+		return new FillStyleRadialGradient(x0, y0, 0, x0, y0, r0);
+	};
+
+	strokeRect(x, y, w, h) {
+		this._drawCommands = this._drawCommands.concat("s" + x + "," + y + "," + w + "," + h + ";");
+	}
+
+
+	clearRect(x, y, w, h) {
+		this._drawCommands = this._drawCommands.concat("c" + x + "," + y + "," + w +
+			"," + h + ";");
+	}
+
+	clip() {
+		this._drawCommands = this._drawCommands.concat("p;");
+	}
+
+	resetClip() {
+		this._drawCommands = this._drawCommands.concat("q;");
+	}
+
+	closePath() {
+		this._drawCommands = this._drawCommands.concat("o;");
+	}
+
+	moveTo(x, y) {
+		this._drawCommands = this._drawCommands.concat("g" + x.toFixed(2) + "," + y.toFixed(2) + ";");
+	}
+
+	lineTo(x, y) {
+		this._drawCommands = this._drawCommands.concat("i" + x.toFixed(2) + "," + y.toFixed(2) + ";");
+	}
+
+	quadraticCurveTo = function(cpx, cpy, x, y) {
+		this._drawCommands = this._drawCommands.concat("u" + cpx + "," + cpy + "," + x + "," + y + ";");
+	}
+
+	bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, ) {
+		this._drawCommands = this._drawCommands.concat(
+			"z" + cp1x.toFixed(2) + "," + cp1y.toFixed(2) + "," + cp2x.toFixed(2) + "," + cp2y.toFixed(2) + "," +
+			x.toFixed(2) + "," + y.toFixed(2) + ";");
+	}
+
+	arcTo(x1, y1, x2, y2, radius) {
+		this._drawCommands = this._drawCommands.concat("h" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + radius + ";");
+	}
+
+	beginPath() {
+		this._drawCommands = this._drawCommands.concat("b;");
+	}
+
+
+	fillRect(x, y, w, h) {
+		this._drawCommands = this._drawCommands.concat("n" + x + "," + y + "," + w +
+			"," + h + ";");
+	}
+
+	rect(x, y, w, h) {
+		this._drawCommands = this._drawCommands.concat("w" + x + "," + y + "," + w + "," + h + ";");
+	}
+
+	fill() {
+		this._drawCommands = this._drawCommands.concat("L;");
+	}
+
+	stroke(path) {
+		this._drawCommands = this._drawCommands.concat("x;");
+	}
+
+	arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+
+		let ianticlockwise = 0;
+		if (anticlockwise) {
+			ianticlockwise = 1;
+		}
+
+		this._drawCommands = this._drawCommands.concat(
+			"y" + x.toFixed(2) + "," + y.toFixed(2) + "," +
+			radius.toFixed(2) + "," + startAngle + "," + endAngle + "," + ianticlockwise +
+			";"
+		);
+	}
+
+	fillText(text, x, y) {
+		let tmptext = text.replace(/!/g, "!!");
+		tmptext = tmptext.replace(/,/g, "!,");
+		tmptext = tmptext.replace(/;/g, "!;");
+		this._drawCommands = this._drawCommands.concat("T" + tmptext + "," + x + "," + y + ",0.0;");
+	}
+
+	strokeText = function(text, x, y) {
+		let tmptext = text.replace(/!/g, "!!");
+		tmptext = tmptext.replace(/,/g, "!,");
+		tmptext = tmptext.replace(/;/g, "!;");
+		this._drawCommands = this._drawCommands.concat("U" + tmptext + "," + x + "," + y + ",0.0;");
+	}
+
+	measureText(text) {
+		return CanvasRenderingContext2D.GBridge.measureText(text, this.font, this.componentId);
+	}
+
+	isPointInPath = function(x, y) {
+		throw new Error('GCanvas not supported yet');
+	}
+
+	drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
+		if (typeof image === 'string') {
+			var imgObj = new GImage();
+			imgObj.src = image;
+			image = imgObj;
+		}
+		if (image instanceof GImage) {
+			if (!image.complete) {
+				imgObj.onload = () => {
+					var index = this._needRedrawImageCache.indexOf(image);
+					if (index > -1) {
+						this._needRedrawImageCache.splice(index, 1);
+						CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
+						this._redrawflush(true);
+					}
+				}
+				this._notCommitDrawImageCache.push(image);
+			} else {
+				CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
+			}
+			var srcArgs = [image, sx, sy, sw, sh, dx, dy, dw, dh];
+			var args = [];
+			for (var arg in srcArgs) {
+				if (typeof(srcArgs[arg]) != 'undefined') {
+					args.push(srcArgs[arg]);
+				}
+			}
+			this.__drawImage.apply(this, args);
+			//this.__drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh);
+		}
+	}
+
+	__drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
+		const numArgs = arguments.length;
+
+		function drawImageCommands() {
+
+			if (numArgs === 3) {
+				const x = parseFloat(sx) || 0.0;
+				const y = parseFloat(sy) || 0.0;
+
+				return ("d" + image._id + ",0,0," +
+					image.width + "," + image.height + "," +
+					x + "," + y + "," + image.width + "," + image.height + ";");
+			} else if (numArgs === 5) {
+				const x = parseFloat(sx) || 0.0;
+				const y = parseFloat(sy) || 0.0;
+				const width = parseInt(sw) || image.width;
+				const height = parseInt(sh) || image.height;
+
+				return ("d" + image._id + ",0,0," +
+					image.width + "," + image.height + "," +
+					x + "," + y + "," + width + "," + height + ";");
+			} else if (numArgs === 9) {
+				sx = parseFloat(sx) || 0.0;
+				sy = parseFloat(sy) || 0.0;
+				sw = parseInt(sw) || image.width;
+				sh = parseInt(sh) || image.height;
+				dx = parseFloat(dx) || 0.0;
+				dy = parseFloat(dy) || 0.0;
+				dw = parseInt(dw) || image.width;
+				dh = parseInt(dh) || image.height;
+
+				return ("d" + image._id + "," +
+					sx + "," + sy + "," + sw + "," + sh + "," +
+					dx + "," + dy + "," + dw + "," + dh + ";");
+			}
+		}
+		this._drawCommands += drawImageCommands();
+	}
+
+	_flush(reserve, callback) {
+		const commands = this._drawCommands;
+		this._drawCommands = '';
+		CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
+		this._needRender = false;
+	}
+
+	_redrawflush(reserve, callback) {
+		const commands = this._redrawCommands;
+		CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
+		if (this._needRedrawImageCache.length == 0) {
+			this._redrawCommands = '';
+		}
+	}
+
+	draw(reserve, callback) {
+		if (!reserve) {
+			this._globalAlpha = this._savedGlobalAlpha.pop();
+			this._savedGlobalAlpha.push(this._globalAlpha);
+			this._redrawCommands = this._drawCommands;
+			this._needRedrawImageCache = this._notCommitDrawImageCache;
+			if (this._autoSaveContext) {
+				this._drawCommands = ("v;" + this._drawCommands);
+				this._autoSaveContext = false;
+			} else {
+				this._drawCommands = ("e;X;v;" + this._drawCommands);
+			}
+		} else {
+			this._needRedrawImageCache = this._needRedrawImageCache.concat(this._notCommitDrawImageCache);
+			this._redrawCommands += this._drawCommands;
+			if (this._autoSaveContext) {
+				this._drawCommands = ("v;" + this._drawCommands);
+				this._autoSaveContext = false;
+			}
+		}
+		this._notCommitDrawImageCache = [];
+		if (this._flush) {
+			this._flush(reserve, callback);
+		}
+	}
+
+	getImageData(x, y, w, h, callback) {
+		CanvasRenderingContext2D.GBridge.getImageData(this.componentId, x, y, w, h, function(res) {
+			res.data = Base64ToUint8ClampedArray(res.data);
+			if (typeof(callback) == 'function') {
+				callback(res);
+			}
+		});
+	}
+
+	putImageData(data, x, y, w, h, callback) {
+		if (data instanceof Uint8ClampedArray) {
+			data = ArrayBufferToBase64(data);
+			CanvasRenderingContext2D.GBridge.putImageData(this.componentId, data, x, y, w, h, function(res) {
+				if (typeof(callback) == 'function') {
+					callback(res);
+				}
+			});
+		}
+	}
+
+	toTempFilePath(x, y, width, height, destWidth, destHeight, fileType, quality, callback) {
+		CanvasRenderingContext2D.GBridge.toTempFilePath(this.componentId, x, y, width, height, destWidth, destHeight,
+			fileType, quality,
+			function(res) {
+				if (typeof(callback) == 'function') {
+					callback(res);
+				}
+			});
+	}
+}
diff --git a/gcanvas/context-webgl/ActiveInfo.js b/gcanvas/context-webgl/ActiveInfo.js
new file mode 100644
index 0000000..b495129
--- /dev/null
+++ b/gcanvas/context-webgl/ActiveInfo.js
@@ -0,0 +1,11 @@
+export default class WebGLActiveInfo {
+    className = 'WebGLActiveInfo';
+
+    constructor({
+        type, name, size
+    }) {
+        this.type = type;
+        this.name = name;
+        this.size = size;
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/Buffer.js b/gcanvas/context-webgl/Buffer.js
new file mode 100644
index 0000000..4800f67
--- /dev/null
+++ b/gcanvas/context-webgl/Buffer.js
@@ -0,0 +1,21 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLBuffer';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLBuffer {
+    className = name;
+
+    constructor(id) {
+        this.id = id;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/Framebuffer.js b/gcanvas/context-webgl/Framebuffer.js
new file mode 100644
index 0000000..28b46d3
--- /dev/null
+++ b/gcanvas/context-webgl/Framebuffer.js
@@ -0,0 +1,21 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLFrameBuffer';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLFramebuffer {
+    className = name;
+
+    constructor(id) {
+        this.id = id;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/GLenum.js b/gcanvas/context-webgl/GLenum.js
new file mode 100644
index 0000000..ac5544d
--- /dev/null
+++ b/gcanvas/context-webgl/GLenum.js
@@ -0,0 +1,298 @@
+export default {
+    "DEPTH_BUFFER_BIT": 256,
+    "STENCIL_BUFFER_BIT": 1024,
+    "COLOR_BUFFER_BIT": 16384,
+    "POINTS": 0,
+    "LINES": 1,
+    "LINE_LOOP": 2,
+    "LINE_STRIP": 3,
+    "TRIANGLES": 4,
+    "TRIANGLE_STRIP": 5,
+    "TRIANGLE_FAN": 6,
+    "ZERO": 0,
+    "ONE": 1,
+    "SRC_COLOR": 768,
+    "ONE_MINUS_SRC_COLOR": 769,
+    "SRC_ALPHA": 770,
+    "ONE_MINUS_SRC_ALPHA": 771,
+    "DST_ALPHA": 772,
+    "ONE_MINUS_DST_ALPHA": 773,
+    "DST_COLOR": 774,
+    "ONE_MINUS_DST_COLOR": 775,
+    "SRC_ALPHA_SATURATE": 776,
+    "FUNC_ADD": 32774,
+    "BLEND_EQUATION": 32777,
+    "BLEND_EQUATION_RGB": 32777,
+    "BLEND_EQUATION_ALPHA": 34877,
+    "FUNC_SUBTRACT": 32778,
+    "FUNC_REVERSE_SUBTRACT": 32779,
+    "BLEND_DST_RGB": 32968,
+    "BLEND_SRC_RGB": 32969,
+    "BLEND_DST_ALPHA": 32970,
+    "BLEND_SRC_ALPHA": 32971,
+    "CONSTANT_COLOR": 32769,
+    "ONE_MINUS_CONSTANT_COLOR": 32770,
+    "CONSTANT_ALPHA": 32771,
+    "ONE_MINUS_CONSTANT_ALPHA": 32772,
+    "BLEND_COLOR": 32773,
+    "ARRAY_BUFFER": 34962,
+    "ELEMENT_ARRAY_BUFFER": 34963,
+    "ARRAY_BUFFER_BINDING": 34964,
+    "ELEMENT_ARRAY_BUFFER_BINDING": 34965,
+    "STREAM_DRAW": 35040,
+    "STATIC_DRAW": 35044,
+    "DYNAMIC_DRAW": 35048,
+    "BUFFER_SIZE": 34660,
+    "BUFFER_USAGE": 34661,
+    "CURRENT_VERTEX_ATTRIB": 34342,
+    "FRONT": 1028,
+    "BACK": 1029,
+    "FRONT_AND_BACK": 1032,
+    "TEXTURE_2D": 3553,
+    "CULL_FACE": 2884,
+    "BLEND": 3042,
+    "DITHER": 3024,
+    "STENCIL_TEST": 2960,
+    "DEPTH_TEST": 2929,
+    "SCISSOR_TEST": 3089,
+    "POLYGON_OFFSET_FILL": 32823,
+    "SAMPLE_ALPHA_TO_COVERAGE": 32926,
+    "SAMPLE_COVERAGE": 32928,
+    "NO_ERROR": 0,
+    "INVALID_ENUM": 1280,
+    "INVALID_VALUE": 1281,
+    "INVALID_OPERATION": 1282,
+    "OUT_OF_MEMORY": 1285,
+    "CW": 2304,
+    "CCW": 2305,
+    "LINE_WIDTH": 2849,
+    "ALIASED_POINT_SIZE_RANGE": 33901,
+    "ALIASED_LINE_WIDTH_RANGE": 33902,
+    "CULL_FACE_MODE": 2885,
+    "FRONT_FACE": 2886,
+    "DEPTH_RANGE": 2928,
+    "DEPTH_WRITEMASK": 2930,
+    "DEPTH_CLEAR_VALUE": 2931,
+    "DEPTH_FUNC": 2932,
+    "STENCIL_CLEAR_VALUE": 2961,
+    "STENCIL_FUNC": 2962,
+    "STENCIL_FAIL": 2964,
+    "STENCIL_PASS_DEPTH_FAIL": 2965,
+    "STENCIL_PASS_DEPTH_PASS": 2966,
+    "STENCIL_REF": 2967,
+    "STENCIL_VALUE_MASK": 2963,
+    "STENCIL_WRITEMASK": 2968,
+    "STENCIL_BACK_FUNC": 34816,
+    "STENCIL_BACK_FAIL": 34817,
+    "STENCIL_BACK_PASS_DEPTH_FAIL": 34818,
+    "STENCIL_BACK_PASS_DEPTH_PASS": 34819,
+    "STENCIL_BACK_REF": 36003,
+    "STENCIL_BACK_VALUE_MASK": 36004,
+    "STENCIL_BACK_WRITEMASK": 36005,
+    "VIEWPORT": 2978,
+    "SCISSOR_BOX": 3088,
+    "COLOR_CLEAR_VALUE": 3106,
+    "COLOR_WRITEMASK": 3107,
+    "UNPACK_ALIGNMENT": 3317,
+    "PACK_ALIGNMENT": 3333,
+    "MAX_TEXTURE_SIZE": 3379,
+    "MAX_VIEWPORT_DIMS": 3386,
+    "SUBPIXEL_BITS": 3408,
+    "RED_BITS": 3410,
+    "GREEN_BITS": 3411,
+    "BLUE_BITS": 3412,
+    "ALPHA_BITS": 3413,
+    "DEPTH_BITS": 3414,
+    "STENCIL_BITS": 3415,
+    "POLYGON_OFFSET_UNITS": 10752,
+    "POLYGON_OFFSET_FACTOR": 32824,
+    "TEXTURE_BINDING_2D": 32873,
+    "SAMPLE_BUFFERS": 32936,
+    "SAMPLES": 32937,
+    "SAMPLE_COVERAGE_VALUE": 32938,
+    "SAMPLE_COVERAGE_INVERT": 32939,
+    "COMPRESSED_TEXTURE_FORMATS": 34467,
+    "DONT_CARE": 4352,
+    "FASTEST": 4353,
+    "NICEST": 4354,
+    "GENERATE_MIPMAP_HINT": 33170,
+    "BYTE": 5120,
+    "UNSIGNED_BYTE": 5121,
+    "SHORT": 5122,
+    "UNSIGNED_SHORT": 5123,
+    "INT": 5124,
+    "UNSIGNED_INT": 5125,
+    "FLOAT": 5126,
+    "DEPTH_COMPONENT": 6402,
+    "ALPHA": 6406,
+    "RGB": 6407,
+    "RGBA": 6408,
+    "LUMINANCE": 6409,
+    "LUMINANCE_ALPHA": 6410,
+    "UNSIGNED_SHORT_4_4_4_4": 32819,
+    "UNSIGNED_SHORT_5_5_5_1": 32820,
+    "UNSIGNED_SHORT_5_6_5": 33635,
+    "FRAGMENT_SHADER": 35632,
+    "VERTEX_SHADER": 35633,
+    "MAX_VERTEX_ATTRIBS": 34921,
+    "MAX_VERTEX_UNIFORM_VECTORS": 36347,
+    "MAX_VARYING_VECTORS": 36348,
+    "MAX_COMBINED_TEXTURE_IMAGE_UNITS": 35661,
+    "MAX_VERTEX_TEXTURE_IMAGE_UNITS": 35660,
+    "MAX_TEXTURE_IMAGE_UNITS": 34930,
+    "MAX_FRAGMENT_UNIFORM_VECTORS": 36349,
+    "SHADER_TYPE": 35663,
+    "DELETE_STATUS": 35712,
+    "LINK_STATUS": 35714,
+    "VALIDATE_STATUS": 35715,
+    "ATTACHED_SHADERS": 35717,
+    "ACTIVE_UNIFORMS": 35718,
+    "ACTIVE_ATTRIBUTES": 35721,
+    "SHADING_LANGUAGE_VERSION": 35724,
+    "CURRENT_PROGRAM": 35725,
+    "NEVER": 512,
+    "LESS": 513,
+    "EQUAL": 514,
+    "LEQUAL": 515,
+    "GREATER": 516,
+    "NOTEQUAL": 517,
+    "GEQUAL": 518,
+    "ALWAYS": 519,
+    "KEEP": 7680,
+    "REPLACE": 7681,
+    "INCR": 7682,
+    "DECR": 7683,
+    "INVERT": 5386,
+    "INCR_WRAP": 34055,
+    "DECR_WRAP": 34056,
+    "VENDOR": 7936,
+    "RENDERER": 7937,
+    "VERSION": 7938,
+    "NEAREST": 9728,
+    "LINEAR": 9729,
+    "NEAREST_MIPMAP_NEAREST": 9984,
+    "LINEAR_MIPMAP_NEAREST": 9985,
+    "NEAREST_MIPMAP_LINEAR": 9986,
+    "LINEAR_MIPMAP_LINEAR": 9987,
+    "TEXTURE_MAG_FILTER": 10240,
+    "TEXTURE_MIN_FILTER": 10241,
+    "TEXTURE_WRAP_S": 10242,
+    "TEXTURE_WRAP_T": 10243,
+    "TEXTURE": 5890,
+    "TEXTURE_CUBE_MAP": 34067,
+    "TEXTURE_BINDING_CUBE_MAP": 34068,
+    "TEXTURE_CUBE_MAP_POSITIVE_X": 34069,
+    "TEXTURE_CUBE_MAP_NEGATIVE_X": 34070,
+    "TEXTURE_CUBE_MAP_POSITIVE_Y": 34071,
+    "TEXTURE_CUBE_MAP_NEGATIVE_Y": 34072,
+    "TEXTURE_CUBE_MAP_POSITIVE_Z": 34073,
+    "TEXTURE_CUBE_MAP_NEGATIVE_Z": 34074,
+    "MAX_CUBE_MAP_TEXTURE_SIZE": 34076,
+    "TEXTURE0": 33984,
+    "TEXTURE1": 33985,
+    "TEXTURE2": 33986,
+    "TEXTURE3": 33987,
+    "TEXTURE4": 33988,
+    "TEXTURE5": 33989,
+    "TEXTURE6": 33990,
+    "TEXTURE7": 33991,
+    "TEXTURE8": 33992,
+    "TEXTURE9": 33993,
+    "TEXTURE10": 33994,
+    "TEXTURE11": 33995,
+    "TEXTURE12": 33996,
+    "TEXTURE13": 33997,
+    "TEXTURE14": 33998,
+    "TEXTURE15": 33999,
+    "TEXTURE16": 34000,
+    "TEXTURE17": 34001,
+    "TEXTURE18": 34002,
+    "TEXTURE19": 34003,
+    "TEXTURE20": 34004,
+    "TEXTURE21": 34005,
+    "TEXTURE22": 34006,
+    "TEXTURE23": 34007,
+    "TEXTURE24": 34008,
+    "TEXTURE25": 34009,
+    "TEXTURE26": 34010,
+    "TEXTURE27": 34011,
+    "TEXTURE28": 34012,
+    "TEXTURE29": 34013,
+    "TEXTURE30": 34014,
+    "TEXTURE31": 34015,
+    "ACTIVE_TEXTURE": 34016,
+    "REPEAT": 10497,
+    "CLAMP_TO_EDGE": 33071,
+    "MIRRORED_REPEAT": 33648,
+    "FLOAT_VEC2": 35664,
+    "FLOAT_VEC3": 35665,
+    "FLOAT_VEC4": 35666,
+    "INT_VEC2": 35667,
+    "INT_VEC3": 35668,
+    "INT_VEC4": 35669,
+    "BOOL": 35670,
+    "BOOL_VEC2": 35671,
+    "BOOL_VEC3": 35672,
+    "BOOL_VEC4": 35673,
+    "FLOAT_MAT2": 35674,
+    "FLOAT_MAT3": 35675,
+    "FLOAT_MAT4": 35676,
+    "SAMPLER_2D": 35678,
+    "SAMPLER_CUBE": 35680,
+    "VERTEX_ATTRIB_ARRAY_ENABLED": 34338,
+    "VERTEX_ATTRIB_ARRAY_SIZE": 34339,
+    "VERTEX_ATTRIB_ARRAY_STRIDE": 34340,
+    "VERTEX_ATTRIB_ARRAY_TYPE": 34341,
+    "VERTEX_ATTRIB_ARRAY_NORMALIZED": 34922,
+    "VERTEX_ATTRIB_ARRAY_POINTER": 34373,
+    "VERTEX_ATTRIB_ARRAY_BUFFER_BINDING": 34975,
+    "IMPLEMENTATION_COLOR_READ_TYPE": 35738,
+    "IMPLEMENTATION_COLOR_READ_FORMAT": 35739,
+    "COMPILE_STATUS": 35713,
+    "LOW_FLOAT": 36336,
+    "MEDIUM_FLOAT": 36337,
+    "HIGH_FLOAT": 36338,
+    "LOW_INT": 36339,
+    "MEDIUM_INT": 36340,
+    "HIGH_INT": 36341,
+    "FRAMEBUFFER": 36160,
+    "RENDERBUFFER": 36161,
+    "RGBA4": 32854,
+    "RGB5_A1": 32855,
+    "RGB565": 36194,
+    "DEPTH_COMPONENT16": 33189,
+    "STENCIL_INDEX8": 36168,
+    "DEPTH_STENCIL": 34041,
+    "RENDERBUFFER_WIDTH": 36162,
+    "RENDERBUFFER_HEIGHT": 36163,
+    "RENDERBUFFER_INTERNAL_FORMAT": 36164,
+    "RENDERBUFFER_RED_SIZE": 36176,
+    "RENDERBUFFER_GREEN_SIZE": 36177,
+    "RENDERBUFFER_BLUE_SIZE": 36178,
+    "RENDERBUFFER_ALPHA_SIZE": 36179,
+    "RENDERBUFFER_DEPTH_SIZE": 36180,
+    "RENDERBUFFER_STENCIL_SIZE": 36181,
+    "FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE": 36048,
+    "FRAMEBUFFER_ATTACHMENT_OBJECT_NAME": 36049,
+    "FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL": 36050,
+    "FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE": 36051,
+    "COLOR_ATTACHMENT0": 36064,
+    "DEPTH_ATTACHMENT": 36096,
+    "STENCIL_ATTACHMENT": 36128,
+    "DEPTH_STENCIL_ATTACHMENT": 33306,
+    "NONE": 0,
+    "FRAMEBUFFER_COMPLETE": 36053,
+    "FRAMEBUFFER_INCOMPLETE_ATTACHMENT": 36054,
+    "FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT": 36055,
+    "FRAMEBUFFER_INCOMPLETE_DIMENSIONS": 36057,
+    "FRAMEBUFFER_UNSUPPORTED": 36061,
+    "FRAMEBUFFER_BINDING": 36006,
+    "RENDERBUFFER_BINDING": 36007,
+    "MAX_RENDERBUFFER_SIZE": 34024,
+    "INVALID_FRAMEBUFFER_OPERATION": 1286,
+    "UNPACK_FLIP_Y_WEBGL": 37440,
+    "UNPACK_PREMULTIPLY_ALPHA_WEBGL": 37441,
+    "CONTEXT_LOST_WEBGL": 37442,
+    "UNPACK_COLORSPACE_CONVERSION_WEBGL": 37443,
+    "BROWSER_DEFAULT_WEBGL": 37444
+};
\ No newline at end of file
diff --git a/gcanvas/context-webgl/GLmethod.js b/gcanvas/context-webgl/GLmethod.js
new file mode 100644
index 0000000..f2659be
--- /dev/null
+++ b/gcanvas/context-webgl/GLmethod.js
@@ -0,0 +1,142 @@
+let i = 1;
+
+const GLmethod = {};
+
+GLmethod.activeTexture = i++;         //1
+GLmethod.attachShader = i++;
+GLmethod.bindAttribLocation = i++;
+GLmethod.bindBuffer = i++;
+GLmethod.bindFramebuffer = i++;
+GLmethod.bindRenderbuffer = i++;
+GLmethod.bindTexture = i++;
+GLmethod.blendColor = i++;
+GLmethod.blendEquation = i++;
+GLmethod.blendEquationSeparate = i++; //10
+GLmethod.blendFunc = i++;
+GLmethod.blendFuncSeparate = i++;
+GLmethod.bufferData = i++;
+GLmethod.bufferSubData = i++;
+GLmethod.checkFramebufferStatus = i++;
+GLmethod.clear = i++;
+GLmethod.clearColor = i++;
+GLmethod.clearDepth = i++;
+GLmethod.clearStencil = i++;
+GLmethod.colorMask = i++;              //20
+GLmethod.compileShader = i++;
+GLmethod.compressedTexImage2D = i++;
+GLmethod.compressedTexSubImage2D = i++;
+GLmethod.copyTexImage2D = i++;
+GLmethod.copyTexSubImage2D = i++;
+GLmethod.createBuffer = i++;
+GLmethod.createFramebuffer = i++;
+GLmethod.createProgram = i++;
+GLmethod.createRenderbuffer = i++;
+GLmethod.createShader = i++;           //30
+GLmethod.createTexture = i++;
+GLmethod.cullFace = i++;
+GLmethod.deleteBuffer = i++;
+GLmethod.deleteFramebuffer = i++;
+GLmethod.deleteProgram = i++;
+GLmethod.deleteRenderbuffer = i++;
+GLmethod.deleteShader = i++;
+GLmethod.deleteTexture = i++;
+GLmethod.depthFunc = i++;
+GLmethod.depthMask = i++;              //40
+GLmethod.depthRange = i++;
+GLmethod.detachShader = i++;
+GLmethod.disable = i++;
+GLmethod.disableVertexAttribArray = i++;
+GLmethod.drawArrays = i++;
+GLmethod.drawArraysInstancedANGLE = i++;
+GLmethod.drawElements = i++;
+GLmethod.drawElementsInstancedANGLE = i++;
+GLmethod.enable = i++;
+GLmethod.enableVertexAttribArray = i++;    //50
+GLmethod.flush = i++;
+GLmethod.framebufferRenderbuffer = i++;
+GLmethod.framebufferTexture2D = i++;
+GLmethod.frontFace = i++;
+GLmethod.generateMipmap = i++;
+GLmethod.getActiveAttrib = i++;
+GLmethod.getActiveUniform = i++;
+GLmethod.getAttachedShaders = i++;
+GLmethod.getAttribLocation = i++;
+GLmethod.getBufferParameter = i++;         //60
+GLmethod.getContextAttributes = i++;
+GLmethod.getError = i++;
+GLmethod.getExtension = i++;
+GLmethod.getFramebufferAttachmentParameter = i++;
+GLmethod.getParameter = i++;
+GLmethod.getProgramInfoLog = i++;
+GLmethod.getProgramParameter = i++;
+GLmethod.getRenderbufferParameter = i++;
+GLmethod.getShaderInfoLog = i++;
+GLmethod.getShaderParameter = i++;         //70
+GLmethod.getShaderPrecisionFormat = i++;
+GLmethod.getShaderSource = i++;
+GLmethod.getSupportedExtensions = i++;
+GLmethod.getTexParameter = i++;
+GLmethod.getUniform = i++;
+GLmethod.getUniformLocation = i++;
+GLmethod.getVertexAttrib = i++;
+GLmethod.getVertexAttribOffset = i++;
+GLmethod.isBuffer = i++;
+GLmethod.isContextLost = i++;              //80
+GLmethod.isEnabled = i++;
+GLmethod.isFramebuffer = i++;
+GLmethod.isProgram = i++;
+GLmethod.isRenderbuffer = i++;
+GLmethod.isShader = i++;
+GLmethod.isTexture = i++;
+GLmethod.lineWidth = i++;
+GLmethod.linkProgram = i++;
+GLmethod.pixelStorei = i++;
+GLmethod.polygonOffset = i++;              //90
+GLmethod.readPixels = i++;
+GLmethod.renderbufferStorage = i++;
+GLmethod.sampleCoverage = i++;
+GLmethod.scissor = i++;
+GLmethod.shaderSource = i++;
+GLmethod.stencilFunc = i++;
+GLmethod.stencilFuncSeparate = i++;
+GLmethod.stencilMask = i++;
+GLmethod.stencilMaskSeparate = i++;
+GLmethod.stencilOp = i++;                  //100
+GLmethod.stencilOpSeparate = i++;
+GLmethod.texImage2D = i++;
+GLmethod.texParameterf = i++;
+GLmethod.texParameteri = i++;
+GLmethod.texSubImage2D = i++;
+GLmethod.uniform1f = i++;
+GLmethod.uniform1fv = i++;
+GLmethod.uniform1i = i++;
+GLmethod.uniform1iv = i++;
+GLmethod.uniform2f = i++;                  //110
+GLmethod.uniform2fv = i++;
+GLmethod.uniform2i = i++;
+GLmethod.uniform2iv = i++;
+GLmethod.uniform3f = i++;
+GLmethod.uniform3fv = i++;
+GLmethod.uniform3i = i++;
+GLmethod.uniform3iv = i++;
+GLmethod.uniform4f = i++;
+GLmethod.uniform4fv = i++;
+GLmethod.uniform4i = i++;                  //120
+GLmethod.uniform4iv = i++;
+GLmethod.uniformMatrix2fv = i++;
+GLmethod.uniformMatrix3fv = i++;
+GLmethod.uniformMatrix4fv = i++;
+GLmethod.useProgram = i++;
+GLmethod.validateProgram = i++;
+GLmethod.vertexAttrib1f = i++; //new
+GLmethod.vertexAttrib2f = i++; //new
+GLmethod.vertexAttrib3f = i++; //new
+GLmethod.vertexAttrib4f = i++; //new       //130
+GLmethod.vertexAttrib1fv = i++; //new
+GLmethod.vertexAttrib2fv = i++; //new
+GLmethod.vertexAttrib3fv = i++; //new
+GLmethod.vertexAttrib4fv = i++; //new
+GLmethod.vertexAttribPointer = i++;
+GLmethod.viewport = i++;
+
+export default GLmethod;
\ No newline at end of file
diff --git a/gcanvas/context-webgl/GLtype.js b/gcanvas/context-webgl/GLtype.js
new file mode 100644
index 0000000..695abcb
--- /dev/null
+++ b/gcanvas/context-webgl/GLtype.js
@@ -0,0 +1,23 @@
+const GLtype = {};
+
+[
+    "GLbitfield",    
+    "GLboolean",
+    "GLbyte",
+    "GLclampf",
+    "GLenum",
+    "GLfloat",
+    "GLint",
+    "GLintptr",
+    "GLsizei",
+    "GLsizeiptr",
+    "GLshort",
+    "GLubyte",
+    "GLuint",
+    "GLushort"
+].sort().map((typeName, i) => GLtype[typeName] = 1 >> (i + 1));
+
+export default GLtype;
+
+
+
diff --git a/gcanvas/context-webgl/Program.js b/gcanvas/context-webgl/Program.js
new file mode 100644
index 0000000..6f5691c
--- /dev/null
+++ b/gcanvas/context-webgl/Program.js
@@ -0,0 +1,21 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLProgram';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLProgram {
+    className = name;
+
+    constructor(id) {
+        this.id = id;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/Renderbuffer.js b/gcanvas/context-webgl/Renderbuffer.js
new file mode 100644
index 0000000..d3182ae
--- /dev/null
+++ b/gcanvas/context-webgl/Renderbuffer.js
@@ -0,0 +1,21 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLRenderBuffer';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLRenderbuffer {
+    className = name;
+
+    constructor(id) {
+        this.id = id;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/RenderingContext.js b/gcanvas/context-webgl/RenderingContext.js
new file mode 100644
index 0000000..5f9608f
--- /dev/null
+++ b/gcanvas/context-webgl/RenderingContext.js
@@ -0,0 +1,1191 @@
+import GLenum from './GLenum';
+import ActiveInfo from './ActiveInfo';
+import Buffer from './Buffer';
+import Framebuffer from './Framebuffer';
+import Renderbuffer from './Renderbuffer';
+import Texture from './Texture';
+import Program from './Program';
+import Shader from './Shader';
+import ShaderPrecisionFormat from './ShaderPrecisionFormat';
+import UniformLocation from './UniformLocation';
+import GLmethod from './GLmethod';
+
+const processArray = (array, checkArrayType = false) => {
+
+    function joinArray(arr, sep) {
+        let res = '';
+        for (let i = 0; i < arr.length; i++) {
+            if (i !== 0) {
+                res += sep;
+            }
+            res += arr[i];
+        }
+        return res;
+    }
+
+    let type = 'Float32Array';
+    if (checkArrayType) {
+        if (array instanceof Uint8Array) {
+            type = 'Uint8Array'
+        } else if (array instanceof Uint16Array) {
+            type = 'Uint16Array';
+        } else if (array instanceof Uint32Array) {
+            type = 'Uint32Array';
+        } else if (array instanceof Float32Array) {
+            type = 'Float32Array';
+        } else {
+            throw new Error('Check array type failed. Array type is ' + typeof array);
+        }
+    }
+
+    const ArrayTypes = {
+        Uint8Array: 1,
+        Uint16Array: 2,
+        Uint32Array: 4,
+        Float32Array: 14
+    };
+    return ArrayTypes[type] + ',' + btoa(joinArray(array, ','))
+}
+
+export default class WebGLRenderingContext {
+
+    // static GBridge = null;
+
+    className = 'WebGLRenderingContext';
+
+    constructor(canvas, type, attrs) {
+        this._canvas = canvas;
+        this._type = type;
+        this._version = 'WebGL 1.0';
+        this._attrs = attrs;
+        this._map = new Map();
+
+        Object.keys(GLenum)
+            .forEach(name => Object.defineProperty(this, name, {
+                value: GLenum[name]
+            }));
+    }
+
+    get canvas() {
+        return this._canvas;
+    }
+
+    activeTexture = function (textureUnit) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.activeTexture + ',' + textureUnit,
+            true
+        );
+    }
+
+    attachShader = function (progarm, shader) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.attachShader + ',' + progarm.id + ',' + shader.id,
+            true
+        );
+    }
+
+    bindAttribLocation = function (program, index, name) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.bindAttribLocation + ',' + program.id + ',' + index + ',' + name,
+            true
+        )
+    }
+
+    bindBuffer = function (target, buffer) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.bindBuffer + ',' + target + ',' + (buffer ? buffer.id : 0),
+            true
+        );
+    }
+
+    bindFramebuffer = function (target, framebuffer) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.bindFramebuffer + ',' + target + ',' + (framebuffer ? framebuffer.id : 0),
+            true
+        )
+    }
+
+    bindRenderbuffer = function (target, renderBuffer) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.bindRenderbuffer + ',' + target + ',' + (renderBuffer ? renderBuffer.id : 0),
+            true
+        )
+    }
+
+    bindTexture = function (target, texture) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.bindTexture + ',' + target + ',' + (texture ? texture.id : 0),
+            true
+        )
+    }
+
+    blendColor = function (r, g, b, a) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.blendColor + ',' + target + ',' + r + ',' + g + ',' + b + ',' + a,
+            true
+        )
+    }
+
+    blendEquation = function (mode) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.blendEquation + ',' + mode,
+            true
+        )
+    }
+
+    blendEquationSeparate = function (modeRGB, modeAlpha) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.blendEquationSeparate + ',' + modeRGB + ',' + modeAlpha,
+            true
+        )
+    }
+
+
+    blendFunc = function (sfactor, dfactor) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.blendFunc + ',' + sfactor + ',' + dfactor,
+            true
+        );
+    }
+
+    blendFuncSeparate = function (srcRGB, dstRGB, srcAlpha, dstAlpha) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.blendFuncSeparate + ',' + srcRGB + ',' + dstRGB + ',' + srcAlpha + ',' + dstAlpha,
+            true
+        );
+    }
+
+    bufferData = function (target, data, usage) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.bufferData + ',' + target + ',' + processArray(data, true) + ',' + usage,
+            true
+        )
+    }
+
+    bufferSubData = function (target, offset, data) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.bufferSubData + ',' + target + ',' + offset + ',' + processArray(data, true),
+            true
+        )
+    }
+
+    checkFramebufferStatus = function (target) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.checkFramebufferStatus + ',' + target
+        );
+        return Number(result);
+    }
+
+    clear = function (mask) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.clear + ',' + mask
+        );
+        this._canvas._needRender = true;
+    }
+
+    clearColor = function (r, g, b, a) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.clearColor + ',' + r + ',' + g + ',' + b,
+            true
+        )
+    }
+
+    clearDepth = function (depth) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.clearDepth + ',' + depth,
+            true
+        )
+    }
+
+    clearStencil = function (s) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.clearStencil + ',' + s
+        );
+    }
+
+    colorMask = function (r, g, b, a) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.colorMask + ',' + r + ',' + g + ',' + b + ',' + a
+        )
+    }
+
+    compileShader = function (shader) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.compileShader + ',' + shader.id,
+            true
+        )
+    }
+
+    compressedTexImage2D = function (target, level, internalformat, width, height, border, pixels) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.compressedTexImage2D + ',' + target + ',' + level + ',' + internalformat + ',' +
+            width + ',' + height + ',' + border + ',' + processArray(pixels),
+            true
+        )
+    }
+
+    compressedTexSubImage2D = function (target, level, xoffset, yoffset, width, height, format, pixels) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.compressedTexSubImage2D + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset + ',' +
+            width + ',' + height + ',' + format + ',' + processArray(pixels),
+            true
+        )
+    }
+
+
+    copyTexImage2D = function (target, level, internalformat, x, y, width, height, border) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.copyTexImage2D + ',' + target + ',' + level + ',' + internalformat + ',' + x + ',' + y + ',' +
+            width + ',' + height + ',' + border,
+            true
+        );
+    }
+
+    copyTexSubImage2D = function (target, level, xoffset, yoffset, x, y, width, height) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.copyTexSubImage2D + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset + ',' + x + ',' + y + ',' +
+            width + ',' + height
+        );
+    }
+
+    createBuffer = function () {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.createBuffer + ''
+        );
+        const buffer = new Buffer(result);
+        this._map.set(buffer.uuid(), buffer);
+        return buffer;
+    }
+
+    createFramebuffer = function () {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.createFramebuffer + ''
+        );
+        const framebuffer = new Framebuffer(result);
+        this._map.set(framebuffer.uuid(), framebuffer);
+        return framebuffer;
+    }
+
+
+    createProgram = function () {
+        const id = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.createProgram + ''
+        );
+        const program = new Program(id);
+        this._map.set(program.uuid(), program);
+        return program;
+    }
+
+    createRenderbuffer = function () {
+        const id = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.createRenderbuffer + ''
+        )
+        const renderBuffer = new Renderbuffer(id);
+        this._map.set(renderBuffer.uuid(), renderBuffer);
+        return renderBuffer;
+    }
+
+    createShader = function (type) {
+        const id = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.createShader + ',' + type
+        )
+        const shader = new Shader(id, type);
+        this._map.set(shader.uuid(), shader);
+        return shader;
+    }
+
+    createTexture = function () {
+        const id = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.createTexture + ''
+        );
+        const texture = new Texture(id);
+        this._map.set(texture.uuid(), texture);
+        return texture;
+    }
+
+    cullFace = function (mode) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.cullFace + ',' + mode,
+            true
+        )
+    }
+
+
+    deleteBuffer = function (buffer) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.deleteBuffer + ',' + buffer.id,
+            true
+        )
+    }
+
+    deleteFramebuffer = function (framebuffer) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.deleteFramebuffer + ',' + framebuffer.id,
+            true
+        )
+    }
+
+    deleteProgram = function (program) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.deleteProgram + ',' + program.id,
+            true
+        )
+    }
+
+    deleteRenderbuffer = function (renderbuffer) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.deleteRenderbuffer + ',' + renderbuffer.id,
+            true
+        )
+    }
+
+    deleteShader = function (shader) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.deleteShader + ',' + shader.id,
+            true
+        )
+    }
+
+    deleteTexture = function (texture) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.deleteTexture + ',' + texture.id,
+            true
+        )
+    }
+
+    depthFunc = function (func) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.depthFunc + ',' + func
+        )
+    }
+
+    depthMask = function (flag) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.depthMask + ',' + Number(flag),
+            true
+        )
+    }
+
+    depthRange = function (zNear, zFar) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.depthRange + ',' + zNear + ',' + zFar,
+            true
+        )
+    }
+
+    detachShader = function (program, shader) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.detachShader + ',' + program.id + ',' + shader.id,
+            true
+        )
+    }
+
+    disable = function (cap) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.disable + ',' + cap,
+            true
+        )
+    }
+
+    disableVertexAttribArray = function (index) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.disableVertexAttribArray + ',' + index,
+            true
+        );
+    }
+
+    drawArrays = function (mode, first, count) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.drawArrays + ',' + mode + ',' + first + ',' + count
+        )
+        this._canvas._needRender = true;
+    }
+
+    drawElements = function (mode, count, type, offset) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.drawElements + ',' + mode + ',' + count + ',' + type + ',' + offset + ';'
+        );
+        this._canvas._needRender = true;
+    }
+
+    enable = function (cap) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.enable + ',' + cap,
+            true
+        );
+    }
+
+    enableVertexAttribArray = function (index) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.enableVertexAttribArray + ',' + index,
+            true
+        )
+    }
+
+
+    flush = function () {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.flush + ''
+        )
+    }
+
+    framebufferRenderbuffer = function (target, attachment, textarget, texture, level) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.framebufferRenderbuffer + ',' + target + ',' + attachment + ',' + textarget + ',' + (texture ? texture.id : 0) + ',' + level,
+            true
+        )
+    }
+
+    framebufferTexture2D = function (target, attachment, textarget, texture, level) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.framebufferTexture2D + ',' + target + ',' + attachment + ',' + textarget + ',' + (texture ? texture.id : 0) + ',' + level,
+            true
+        )
+    }
+
+    frontFace = function (mode) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.frontFace + ',' + mode,
+            true
+        )
+    }
+
+    generateMipmap = function (target) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.generateMipmap + ',' + target,
+            true
+        )
+    }
+
+    getActiveAttrib = function (progarm, index) {
+        const resultString = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getActiveAttrib + ',' + progarm.id + ',' + index
+        )
+        const [type, size, name] = resultString.split(',');
+        return new ActiveInfo({
+            type: Number(type),
+            size: Number(size),
+            name
+        });
+    }
+
+    getActiveUniform = function (progarm, index) {
+        const resultString = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getActiveUniform + ',' + progarm.id + ',' + index
+        );
+        const [type, size, name] = resultString.split(',');
+        return new ActiveInfo({
+            type: Number(type),
+            size: Number(size),
+            name
+        })
+    }
+
+    getAttachedShaders = function (progarm) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getAttachedShaders + ',' + progarm.id
+        );
+        const [type, ...ids] = result;
+        return ids.map(id => this._map.get(Shader.uuid(id)));
+    }
+
+    getAttribLocation = function (progarm, name) {
+        return WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getAttribLocation + ',' + progarm.id + ',' + name
+        )
+    }
+
+    getBufferParameter = function (target, pname) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getBufferParameter + ',' + target + ',' + pname
+        );
+        const [type, res] = getBufferParameter;
+        return res;
+    }
+
+    getError = function () {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getError + ''
+        )
+        return result;
+    }
+
+    getExtension = function (name) {
+        return null;
+    }
+
+    getFramebufferAttachmentParameter = function (target, attachment, pname) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getFramebufferAttachmentParameter + ',' + target + ',' + attachment + ',' + pname
+        )
+        switch (pname) {
+            case GLenum.FRAMEBUFFER_ATTACHMENT_OBJECT_NAME:
+                return this._map.get(Renderbuffer.uuid(result)) || this._map.get(Texture.uuid(result)) || null;
+            default:
+                return result;
+        }
+    }
+
+    getParameter = function (pname) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getParameter + ',' + pname
+        )
+        switch (pname) {
+            case GLenum.VERSION:
+                return this._version;
+            case GLenum.ARRAY_BUFFER_BINDING: // buffer
+            case GLenum.ELEMENT_ARRAY_BUFFER_BINDING: // buffer
+                return this._map.get(Buffer.uuid(result)) || null;
+            case GLenum.CURRENT_PROGRAM: // program
+                return this._map.get(Program.uuid(result)) || null;
+            case GLenum.FRAMEBUFFER_BINDING: // framebuffer
+                return this._map.get(Framebuffer.uuid(result)) || null;
+            case GLenum.RENDERBUFFER_BINDING: // renderbuffer
+                return this._map.get(Renderbuffer.uuid(result)) || null;
+            case GLenum.TEXTURE_BINDING_2D: // texture
+            case GLenum.TEXTURE_BINDING_CUBE_MAP: // texture
+                return this._map.get(Texture.uuid(result)) || null;
+            case GLenum.ALIASED_LINE_WIDTH_RANGE: // Float32Array
+            case GLenum.ALIASED_POINT_SIZE_RANGE: // Float32Array
+            case GLenum.BLEND_COLOR: // Float32Array
+            case GLenum.COLOR_CLEAR_VALUE: // Float32Array
+            case GLenum.DEPTH_RANGE: // Float32Array
+            case GLenum.MAX_VIEWPORT_DIMS: // Int32Array
+            case GLenum.SCISSOR_BOX: // Int32Array
+            case GLenum.VIEWPORT: // Int32Array            
+            case GLenum.COMPRESSED_TEXTURE_FORMATS: // Uint32Array
+            default:
+                const [type, ...res] = result.split(',');
+                if (res.length === 1) {
+                    return Number(res[0]);
+                } else {
+                    return res.map(Number);
+                }
+        }
+    }
+
+    getProgramInfoLog = function (progarm) {
+        return WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getProgramInfoLog + ',' + progarm.id
+        )
+    }
+
+    getProgramParameter = function (program, pname) {
+        const res = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getProgramParameter + ',' + program.id + ',' + pname
+        );
+
+        const [type, result] = res.split(',').map(i => parseInt(i));
+
+        if (type === 1) {
+            return Boolean(result);
+        } else if (type === 2) {
+            return result;
+        } else {
+            throw new Error('Unrecongized program paramater ' + res + ', type: ' + typeof res);
+        }
+    }
+
+
+    getRenderbufferParameter = function (target, pname) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getRenderbufferParameter + ',' + target + ',' + pname
+        )
+        return result;
+    }
+
+
+    getShaderInfoLog = function (shader) {
+        return WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getShaderInfoLog + ',' + shader.id
+        );
+    }
+
+    getShaderParameter = function (shader, pname) {
+        return WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getShaderParameter + ',' + shader.id + ',' + pname
+        )
+    }
+
+    getShaderPrecisionFormat = function (shaderType, precisionType) {
+        const [rangeMin, rangeMax, precision] = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getShaderPrecisionFormat + ',' + shaderType + ',' + precisionType
+        );
+        const shaderPrecisionFormat = new ShaderPrecisionFormat({
+            rangeMin: Number(rangeMin),
+            rangeMax: Number(rangeMax),
+            precision: Number(precision)
+        });
+        return shaderPrecisionFormat;
+    }
+
+    getShaderSource = function (shader) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getShaderSource + ',' + shader.id
+        );
+        return result;
+    }
+
+    getSupportedExtensions = function () {
+        return Object.keys({});
+    }
+
+    getTexParameter = function (target, pname) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getTexParameter + ',' + target + ',' + pname
+        )
+        return result;
+    }
+
+    getUniformLocation = function (program, name) {
+        const id = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getUniformLocation + ',' + program.id + ',' + name
+        );
+        if (id === -1) {
+            return null;
+        } else {
+            return new UniformLocation(Number(id));
+        }
+    }
+
+    getVertexAttrib = function (index, pname) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getVertexAttrib + ',' + index + ',' + pname
+        );
+        switch (pname) {
+            case GLenum.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING:
+                return this._map.get(Buffer.uuid(result)) || null;
+            case GLenum.CURRENT_VERTEX_ATTRIB: // Float32Array
+            default:
+                return result;
+        }
+    }
+
+    getVertexAttribOffset = function (index, pname) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.getVertexAttribOffset + ',' + index + ',' + pname
+        )
+        return Number(result);
+    }
+
+    isBuffer = function (buffer) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.isBuffer + ',' + buffer.id
+        )
+        return Boolean(result);
+    }
+
+    isContextLost = function () {
+        return false;
+    }
+
+    isEnabled = function (cap) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.isEnabled + ',' + cap
+        )
+        return Boolean(result);
+    }
+
+    isFramebuffer = function (framebuffer) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.isFramebuffer + ',' + framebuffer.id
+        )
+        return Boolean(result);
+    }
+
+    isProgram = function (program) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.isProgram + ',' + program.id
+        )
+        return Boolean(result);
+    }
+
+    isRenderbuffer = function (renderBuffer) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.isRenderbuffer + ',' + renderbuffer.id
+        )
+        return Boolean(result);
+    }
+
+    isShader = function (shader) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.isShader + ',' + shader.id
+        )
+        return Boolean(result);
+    }
+
+    isTexture = function (texture) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.isTexture + ',' + texture.id
+        );
+        return Boolean(result);
+    }
+
+    lineWidth = function (width) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.lineWidth + ',' + width,
+            true
+        )
+    }
+
+    linkProgram = function (program) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.linkProgram + ',' + program.id,
+            true
+        );
+    }
+
+
+    pixelStorei = function (pname, param) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.pixelStorei + ',' + pname + ',' + Number(param)
+        )
+    }
+
+    polygonOffset = function (factor, units) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.polygonOffset + ',' + factor + ',' + units
+        )
+    }
+
+    readPixels = function (x, y, width, height, format, type, pixels) {
+        const result = WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.readPixels + ',' + x + ',' + y + ',' + width + ',' + height + ',' + format + ',' + type
+        )
+        return result;
+    }
+
+    renderbufferStorage = function (target, internalFormat, width, height) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.renderbufferStorage + ',' + target + ',' + internalFormat + ',' + width + ',' + height,
+            true
+        )
+    }
+
+    sampleCoverage = function (value, invert) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.sampleCoverage + ',' + value + ',' + Number(invert),
+            true
+        )
+    }
+
+    scissor = function (x, y, width, height) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.scissor + ',' + x + ',' + y + ',' + width + ',' + height,
+            true
+        )
+    }
+
+    shaderSource = function (shader, source) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.shaderSource + ',' + shader.id + ',' + source
+        )
+    }
+
+    stencilFunc = function (func, ref, mask) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.stencilFunc + ',' + func + ',' + ref + ',' + mask,
+            true
+        )
+    }
+
+    stencilFuncSeparate = function (face, func, ref, mask) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.stencilFuncSeparate + ',' + face + ',' + func + ',' + ref + ',' + mask,
+            true
+        )
+    }
+
+    stencilMask = function (mask) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.stencilMask + ',' + mask,
+            true
+        )
+    }
+
+    stencilMaskSeparate = function (face, mask) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.stencilMaskSeparate + ',' + face + ',' + mask,
+            true
+        )
+    }
+
+    stencilOp = function (fail, zfail, zpass) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.stencilOp + ',' + fail + ',' + zfail + ',' + zpass
+        )
+    }
+
+    stencilOpSeparate = function (face, fail, zfail, zpass) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.stencilOp + ',' + face + ',' + fail + ',' + zfail + ',' + zpass,
+            true
+        )
+    }
+
+    texImage2D = function (...args) {
+        WebGLRenderingContext.GBridge.texImage2D(this._canvas.id, ...args);
+    }
+
+
+    texParameterf = function (target, pname, param) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.texParameterf + ',' + target + ',' + pname + ',' + param,
+            true
+        )
+    }
+
+    texParameteri = function (target, pname, param) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.texParameteri + ',' + target + ',' + pname + ',' + param
+        )
+    }
+
+    texSubImage2D = function (...args) {
+        WebGLRenderingContext.GBridge.texSubImage2D(this._canvas.id, ...args);
+    }
+
+    uniform1f = function (location, v0) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform1f + ',' + location.id + ',' + v0
+        )
+    }
+
+    uniform1fv = function (location, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform1fv + ',' + location.id + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniform1i = function (location, v0) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform1i + ',' + location.id + ',' + v0,
+            // true
+        )
+    }
+
+    uniform1iv = function (location, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform1iv + ',' + location.id + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniform2f = function (location, v0, v1) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform2f + ',' + location.id + ',' + v0 + ',' + v1,
+            true
+        )
+    }
+
+    uniform2fv = function (location, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform2fv + ',' + location.id + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniform2i = function (location, v0, v1) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform2i + ',' + location.id + ',' + v0 + ',' + v1,
+            true
+        )
+    }
+
+    uniform2iv = function (location, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform2iv + ',' + location.id + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniform3f = function (location, v0, v1, v2) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform3f + ',' + location.id + ',' + v0 + ',' + v1 + ',' + v2,
+            true
+        )
+    }
+
+    uniform3fv = function (location, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform3fv + ',' + location.id + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniform3i = function (location, v0, v1, v2) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform3i + ',' + location.id + ',' + v0 + ',' + v1 + ',' + v2,
+            true
+        )
+    }
+
+    uniform3iv = function (location, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform3iv + ',' + location.id + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniform4f = function (location, v0, v1, v2, v3) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform4f + ',' + location.id + ',' + v0 + ',' + v1 + ',' + v2 + ',' + v3,
+            true
+        )
+    }
+
+    uniform4fv = function (location, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform4fv + ',' + location.id + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniform4i = function (location, v0, v1, v2, v3) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform4i + ',' + location.id + ',' + v0 + ',' + v1 + ',' + v2 + ',' + v3,
+            true
+        )
+    }
+
+    uniform4iv = function (location, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniform4iv + ',' + location.id + ',' + processArray(value, true),
+            true
+        )
+    }
+
+    uniformMatrix2fv = function (location, transpose, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniformMatrix2fv + ',' + location.id + ',' + Number(transpose) + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniformMatrix3fv = function (location, transpose, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniformMatrix3fv + ',' + location.id + ',' + Number(transpose) + ',' + processArray(value),
+            true
+        )
+    }
+
+    uniformMatrix4fv = function (location, transpose, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.uniformMatrix4fv + ',' + location.id + ',' + Number(transpose) + ',' + processArray(value),
+            true
+        );
+    }
+
+    useProgram = function (progarm) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.useProgram + ',' + progarm.id + '',
+            true
+        )
+    }
+
+
+    validateProgram = function (program) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.validateProgram + ',' + program.id,
+            true
+        )
+    }
+
+    vertexAttrib1f = function (index, v0) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttrib1f + ',' + index + ',' + v0,
+            true
+        )
+    }
+
+    vertexAttrib2f = function (index, v0, v1) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttrib2f + ',' + index + ',' + v0 + ',' + v1,
+            true
+        )
+    }
+
+    vertexAttrib3f = function (index, v0, v1, v2) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttrib3f + ',' + index + ',' + v0 + ',' + v1 + ',' + v2,
+            true
+        )
+    }
+
+    vertexAttrib4f = function (index, v0, v1, v2, v3) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttrib4f + ',' + index + ',' + v0 + ',' + v1 + ',' + v2 + ',' + v3,
+            true
+        )
+    }
+
+    vertexAttrib1fv = function (index, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttrib1fv + ',' + index + ',' + processArray(value),
+            true
+        )
+    }
+
+    vertexAttrib2fv = function (index, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttrib2fv + ',' + index + ',' + processArray(value),
+            true
+        )
+    }
+
+    vertexAttrib3fv = function (index, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttrib3fv + ',' + index + ',' + processArray(value),
+            true
+        )
+    }
+
+    vertexAttrib4fv = function (index, value) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttrib4fv + ',' + index + ',' + processArray(value),
+            true
+        )
+    }
+
+    vertexAttribPointer = function (index, size, type, normalized, stride, offset) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.vertexAttribPointer + ',' + index + ',' + size + ',' + type + ',' + Number(normalized) + ',' + stride + ',' + offset,
+            true
+        )
+    }
+
+    viewport = function (x, y, width, height) {
+        WebGLRenderingContext.GBridge.callNative(
+            this._canvas.id,
+            GLmethod.viewport + ',' + x + ',' + y + ',' + width + ',' + height,
+            true
+        )
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/Shader.js b/gcanvas/context-webgl/Shader.js
new file mode 100644
index 0000000..a763886
--- /dev/null
+++ b/gcanvas/context-webgl/Shader.js
@@ -0,0 +1,22 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLShader';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLShader {
+    className = name;
+
+    constructor(id, type) {
+        this.id = id;
+        this.type = type;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/ShaderPrecisionFormat.js b/gcanvas/context-webgl/ShaderPrecisionFormat.js
new file mode 100644
index 0000000..208d6c1
--- /dev/null
+++ b/gcanvas/context-webgl/ShaderPrecisionFormat.js
@@ -0,0 +1,11 @@
+export default class WebGLShaderPrecisionFormat {
+    className = 'WebGLShaderPrecisionFormat';
+
+    constructor({
+        rangeMin, rangeMax, precision
+    }) {
+        this.rangeMin = rangeMin;
+        this.rangeMax = rangeMax;
+        this.precision = precision;
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/Texture.js b/gcanvas/context-webgl/Texture.js
new file mode 100644
index 0000000..de4d806
--- /dev/null
+++ b/gcanvas/context-webgl/Texture.js
@@ -0,0 +1,22 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLTexture';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLTexture {
+    className = name;
+
+    constructor(id, type) {
+        this.id = id;
+        this.type = type;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/UniformLocation.js b/gcanvas/context-webgl/UniformLocation.js
new file mode 100644
index 0000000..f5e99dc
--- /dev/null
+++ b/gcanvas/context-webgl/UniformLocation.js
@@ -0,0 +1,22 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLUniformLocation';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLUniformLocation {
+    className = name;
+
+    constructor(id, type) {
+        this.id = id;
+        this.type = type;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}
\ No newline at end of file
diff --git a/gcanvas/context-webgl/classUtils.js b/gcanvas/context-webgl/classUtils.js
new file mode 100644
index 0000000..88716be
--- /dev/null
+++ b/gcanvas/context-webgl/classUtils.js
@@ -0,0 +1,3 @@
+export function getTransferedObjectUUID(name, id) {
+    return `${name.toLowerCase()}-${id}`;
+}
\ No newline at end of file
diff --git a/gcanvas/env/canvas.js b/gcanvas/env/canvas.js
new file mode 100644
index 0000000..a8d9bb9
--- /dev/null
+++ b/gcanvas/env/canvas.js
@@ -0,0 +1,74 @@
+import GContext2D from '../context-2d/RenderingContext';
+import GContextWebGL from '../context-webgl/RenderingContext';
+
+export default class GCanvas {
+
+    // static GBridge = null;
+
+    id = null;
+
+    _needRender = true;
+
+    constructor(id, { disableAutoSwap }) {
+        this.id = id;
+
+        this._disableAutoSwap = disableAutoSwap;
+        if (disableAutoSwap) {
+            this._swapBuffers = () => {
+                GCanvas.GBridge.render(this.id);
+            }
+        }
+    }
+
+    getContext(type) {
+
+        let context = null;
+
+        if (type.match(/webgl/i)) {
+            context = new GContextWebGL(this);
+
+            context.componentId = this.id;
+
+            if (!this._disableAutoSwap) {
+                const render = () => {
+                    if (this._needRender) {
+                        GCanvas.GBridge.render(this.id);
+                        this._needRender = false;
+                    }
+                }
+                setInterval(render, 16);
+            }
+
+            GCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
+        } else if (type.match(/2d/i)) {
+            context = new GContext2D(this);
+
+            context.componentId = this.id;
+
+//             const render = ( callback ) => {
+// 
+//                 const commands = context._drawCommands;
+//                 context._drawCommands = '';
+// 
+//                 GCanvas.GBridge.render2d(this.id, commands, callback);
+//                 this._needRender = false;
+//             }
+// 			//draw方法触发
+// 			context._flush = render;
+//             //setInterval(render, 16);
+
+            GCanvas.GBridge.callSetContextType(this.id, 0);
+        } else {
+            throw new Error('not supported context ' + type);
+        }
+
+        return context;
+
+    }
+
+    reset() {
+        GCanvas.GBridge.callReset(this.id);
+    }
+
+
+}
\ No newline at end of file
diff --git a/gcanvas/env/image.js b/gcanvas/env/image.js
new file mode 100644
index 0000000..9499a51
--- /dev/null
+++ b/gcanvas/env/image.js
@@ -0,0 +1,96 @@
+let incId = 1;
+
+const noop = function () { };
+
+class GImage {
+
+    static GBridge = null;
+
+    constructor() {
+        this._id = incId++;
+        this._width = 0;
+        this._height = 0;
+        this._src = undefined;
+        this._onload = noop;
+        this._onerror = noop;
+        this.complete = false;
+    }
+
+    get width() {
+        return this._width;
+    }
+    set width(v) {
+        this._width = v;
+    }
+
+    get height() {
+        return this._height;
+    }
+
+    set height(v) {
+        this._height = v;
+    }
+
+    get src() {
+        return this._src;
+    }
+
+    set src(v) {
+
+        if (v.startsWith('//')) {
+            v = 'http:' + v;
+        }
+
+        this._src = v;
+
+        GImage.GBridge.perloadImage([this._src, this._id], (data) => {
+            if (typeof data === 'string') {
+                data = JSON.parse(data);
+            }
+            if (data.error) {
+                var evt = { type: 'error', target: this };
+                this.onerror(evt);
+            } else {
+                this.complete = true;
+                this.width = typeof data.width === 'number' ? data.width : 0;
+                this.height = typeof data.height === 'number' ? data.height : 0;
+                var evt = { type: 'load', target: this };
+                this.onload(evt);
+            }
+        });
+    }
+
+    addEventListener(name, listener) {
+        if (name === 'load') {
+            this.onload = listener;
+        } else if (name === 'error') {
+            this.onerror = listener;
+        }
+    }
+
+    removeEventListener(name, listener) {
+        if (name === 'load') {
+            this.onload = noop;
+        } else if (name === 'error') {
+            this.onerror = noop;
+        }
+    }
+
+    get onload() {
+        return this._onload;
+    }
+
+    set onload(v) {
+        this._onload = v;
+    }
+
+    get onerror() {
+        return this._onerror;
+    }
+
+    set onerror(v) {
+        this._onerror = v;
+    }
+}
+
+export default GImage;
\ No newline at end of file
diff --git a/gcanvas/env/tool.js b/gcanvas/env/tool.js
new file mode 100644
index 0000000..d3fb398
--- /dev/null
+++ b/gcanvas/env/tool.js
@@ -0,0 +1,24 @@
+
+export function ArrayBufferToBase64 (buffer) {
+    var binary = '';
+    var bytes = new Uint8ClampedArray(buffer);
+    for (var len = bytes.byteLength, i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+}
+	
+export function Base64ToUint8ClampedArray(base64String) {
+	const padding = '='.repeat((4 - base64String.length % 4) % 4);
+	const base64 = (base64String + padding)
+		.replace(/\-/g, '+')
+		.replace(/_/g, '/');
+
+	const rawData = atob(base64);
+	const outputArray = new Uint8ClampedArray(rawData.length);
+
+	for (let i = 0; i < rawData.length; ++i) {
+		outputArray[i] = rawData.charCodeAt(i);
+	}
+	return outputArray;
+}
\ No newline at end of file
diff --git a/gcanvas/index.js b/gcanvas/index.js
new file mode 100644
index 0000000..a34ad58
--- /dev/null
+++ b/gcanvas/index.js
@@ -0,0 +1,39 @@
+import GCanvas from './env/canvas';
+import GImage from './env/image';
+
+import GWebGLRenderingContext from './context-webgl/RenderingContext';
+import GContext2D from './context-2d/RenderingContext';
+
+import GBridgeWeex from './bridge/bridge-weex';
+
+export let Image = GImage;
+
+export let WeexBridge = GBridgeWeex;
+
+export function enable(el, { bridge, debug, disableAutoSwap, disableComboCommands } = {}) {
+
+    const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
+
+    GBridge.callEnable(el.ref, [
+        0,      // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
+        -1,     // hybridLayerType:  0--LAYER_TYPE_NONE 1--LAYER_TYPE_SOFTWARE 2--LAYER_TYPE_HARDWARE
+        false,  // supportScroll
+        false,  // newCanvasMode
+        1,      // compatible
+        'white',// clearColor
+        false   // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
+    ]);
+
+    if (debug === true) {
+        GBridge.callEnableDebug();
+    }
+    if (disableComboCommands) {
+        GBridge.callEnableDisableCombo();
+    }
+
+    var canvas = new GCanvas(el.ref, { disableAutoSwap });
+    canvas.width = el.style.width;
+    canvas.height = el.style.height;
+
+    return canvas;
+};
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 4bf0cc6..c19901b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -20,7 +20,8 @@
         "modules" : {
             "Camera" : {},
             "Push" : {},
-            "VideoPlayer" : {}
+            "VideoPlayer" : {},
+            "Canvas" : "nvue canvas" //使用Canvas模块
         },
         /* 应用发布信息 */
         "distribute" : {
diff --git a/pages/video/index.nvue b/pages/video/index.nvue
index ca5568e..f3c8144 100644
--- a/pages/video/index.nvue
+++ b/pages/video/index.nvue
@@ -1,5 +1,5 @@
 <template>
-	<view class="min-page " :style="comStyle">
+	<view class="min-page " >
 		<!-- <up-button @click="toDetail">toDetail</up-button> -->
 		<my-video-list isCommand isTabbar v-if="state.list.length" @swiperChange="swiperChange" :list="state.list"  @update="update"
 			:info="state"
@@ -25,14 +25,6 @@
 		slice
 	} from 'lodash'
 
-	let height = ref(0)
-	const sysInfo = uni.getSystemInfoSync()
-	height.value = sysInfo.screenHeight - 50
-	const comStyle = computed(() => {
-		return {
-			// height: height.value + 'px'
-		}
-	})
 
 	function toDetail() {
 		uni.navigateTo({
@@ -92,6 +84,7 @@
 		/* #endif */
 		background-color: #000;
 		overflow: hidden;
+		flex: 1;
 	}
 
 	.u-popup {
diff --git a/utils/util.js b/utils/util.js
index 0c16469..a8a453a 100644
--- a/utils/util.js
+++ b/utils/util.js
@@ -1,3 +1,39 @@
 export function isEmpty(val){
 	return val===null||val===undefined||val===''
+}
+
+import {
+	getCurrentInstance,
+} from 'vue';
+export async function getElRect(elClass, instance,option) {
+	instance = instance ? instance : getCurrentInstance();
+	const query = uni.createSelectorQuery().in(instance.proxy);
+	try{
+		const res= await getEle(query,elClass,option)
+		return res
+	}catch(e){
+		console.log(e);
+	}
+}
+async function getEle(query,elClass,option){
+	return new Promise((resolve, reject)=>{
+		query.select('.' + elClass).fields({
+			size: true,
+			...option
+		}, res => {
+			// 如果节点尚未生成，res值为null，循环调用执行
+			if (!res) {
+				return setTimeout(() => {
+					getEle(query,elClass,option);
+				}, 10);
+			}
+			resolve(res);
+		}).exec();
+	})
+	
+}
+
+export async function getSafeBottomHeight(className, height = 16) {
+	const bottomEle = await getElRect(className)
+	return bottomEle.height + height
 }
\ No newline at end of file