小程序
小游戏
企业微信
微信支付
扫描小程序码分享
OffscreenCanvas 目前有部分文档接口,但是如何跟 Canvas 一起进行使用,并没有给出任何实例代码,并且接口部分并没有给出任何支持,这块不知道具体有什么规划?
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
为什么一定要等 这个 接口啊?自己做个 离屏 canvas 就行了啊!
上段代码吧。
bee.prototype._init_canvas = function(){
var o = this;
var q = wx.createSelectorQuery();
q.select('#'+o.cid).fields({ node: true, size: true }).exec(function(res){
// o._cvs 获取
o._cvs = res[0].node;
o._cvs.g = o._cvs.getContext('2d');
o._cvs.size = { w:res[0].width, h:res[0].height, scale:1 };
o._cvs.width = o._cvs.size.w;
o._cvs.height = o._cvs.size.h;
// o._cvs_back 获取
var cvs_back = o._cvs._canvasRef.ownerDocument.createElement('canvas');
cvs_back.g = cvs_back.getContext('2d');
cvs_back.size = { w:res[0].width, h:res[0].height, scale:1 };
cvs_back.width = cvs_back.size.w;
cvs_back.height = cvs_back.size.h;
o._cvs_back = cvs_back;
// o._cvs_map 获取
var cvs_map = o._cvs._canvasRef.ownerDocument.createElement('canvas');
cvs_map.g = cvs_map.getContext('2d');
cvs_map.size = { w:res[0].width, h:res[0].height + 2 * o._map_padding , scale:1 };
cvs_map.width = cvs_map.size.w;
cvs_map.height = cvs_map.size.h;
o._cvs_map = cvs_map;
o._state = 'init_canvas_succ';
})
}
1:o._cvs = res[0].node;
这句话是获取 微信封装的 canvas 节点对象(不是原生canvas封装哦,是类似 jquery 的方式做了个外壳包裹),之后,生成自己的 离屏需要这个 对象。这个 o._cvs 是取自 *.wxml 中的 这个节点。
2:var cvs_back = o._cvs._canvasRef.ownerDocument.createElement('canvas');
这句话中 _canvasRef 是获得 原生 canvas 节点对象的引用,然后用 ownerDocument 获得其拥有者 原生DOM对象,这样就可以用 createElement('canvas'); 生成自己的的离屏 canvas 节点了,而且是 原生的 canvas 哦,可以放手施为了,用微信的封装canvas ,总是很别扭的。,比如:如果想做两个 canvas 之间的 图像 粘贴,就会写出这样一个别扭的 代码:
o._cvs.g.drawImage( o._cvs_back. _canvasRef, .......)
以后,可以用原生的 canvas 写出熟悉的代码体验:
o._cvs.g.drawImage( o._cvs_back, .......)
才刚刚开始学习微信向程序 两周,也不知道我这个 是不是就是 所谓的“离屏canvas”哈,我是用这种方式给自己写的canvas小游戏做的 后台canvas 绘图,然后“翻版”到 显示的 canvas 上的。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
你好,目前还没有支持离屏和在屏共用,而且 OffscreenCanvas 只支持 webgl
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
为什么一定要等 这个 接口啊?自己做个 离屏 canvas 就行了啊!
上段代码吧。
bee.prototype._init_canvas = function(){
var o = this;
var q = wx.createSelectorQuery();
q.select('#'+o.cid).fields({ node: true, size: true }).exec(function(res){
// o._cvs 获取
o._cvs = res[0].node;
o._cvs.g = o._cvs.getContext('2d');
o._cvs.size = { w:res[0].width, h:res[0].height, scale:1 };
o._cvs.width = o._cvs.size.w;
o._cvs.height = o._cvs.size.h;
// o._cvs_back 获取
var cvs_back = o._cvs._canvasRef.ownerDocument.createElement('canvas');
cvs_back.g = cvs_back.getContext('2d');
cvs_back.size = { w:res[0].width, h:res[0].height, scale:1 };
cvs_back.width = cvs_back.size.w;
cvs_back.height = cvs_back.size.h;
o._cvs_back = cvs_back;
// o._cvs_map 获取
var cvs_map = o._cvs._canvasRef.ownerDocument.createElement('canvas');
cvs_map.g = cvs_map.getContext('2d');
cvs_map.size = { w:res[0].width, h:res[0].height + 2 * o._map_padding , scale:1 };
cvs_map.width = cvs_map.size.w;
cvs_map.height = cvs_map.size.h;
o._cvs_map = cvs_map;
o._state = 'init_canvas_succ';
})
}
1:o._cvs = res[0].node;
这句话是获取 微信封装的 canvas 节点对象(不是原生canvas封装哦,是类似 jquery 的方式做了个外壳包裹),之后,生成自己的 离屏需要这个 对象。这个 o._cvs 是取自 *.wxml 中的 这个节点。
2:var cvs_back = o._cvs._canvasRef.ownerDocument.createElement('canvas');
这句话中 _canvasRef 是获得 原生 canvas 节点对象的引用,然后用 ownerDocument 获得其拥有者 原生DOM对象,这样就可以用 createElement('canvas'); 生成自己的的离屏 canvas 节点了,而且是 原生的 canvas 哦,可以放手施为了,用微信的封装canvas ,总是很别扭的。,比如:如果想做两个 canvas 之间的 图像 粘贴,就会写出这样一个别扭的 代码:
o._cvs.g.drawImage( o._cvs_back. _canvasRef, .......)
以后,可以用原生的 canvas 写出熟悉的代码体验:
o._cvs.g.drawImage( o._cvs_back, .......)
才刚刚开始学习微信向程序 两周,也不知道我这个 是不是就是 所谓的“离屏canvas”哈,我是用这种方式给自己写的canvas小游戏做的 后台canvas 绘图,然后“翻版”到 显示的 canvas 上的。
你好,目前还没有支持离屏和在屏共用,而且 OffscreenCanvas 只支持 webgl