收藏
回答

OffscreenCanvas 什么时候可以用?

OffscreenCanvas 目前有部分文档接口,但是如何跟 Canvas 一起进行使用,并没有给出任何实例代码,并且接口部分并没有给出任何支持,这块不知道具体有什么规划?

回答关注问题邀请回答
收藏

2 个回答

  • 尸兄 18223147810
    尸兄 18223147810
    2020-08-31

    为什么一定要等 这个 接口啊?自己做个 离屏 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 上的。

    2020-08-31
    有用 1
    回复
  • 灵芝
    灵芝
    2020-02-03

    你好,目前还没有支持离屏和在屏共用,而且 OffscreenCanvas 只支持 webgl

    2020-02-03
    有用
    回复 1
    • Api调用师
      Api调用师
      2020-03-05
      快点支持噢,这样小程序就可以做出炫酷的效果了,要不然现在在主线程上计算渲染,其他任务会阻塞canvas的正常渲染,比如canvas要用到很多图片,图片延迟显示,在加载图片的过程中canvas就会卡住,非常不好
      2020-03-05
      回复
登录 后发表内容
问题标签