微信小程序新版canvas2d海报绘制（教你轻松搞定）

效果

说明：

canvas官方很早已经发声不再维护了，所以很多方法都已经不再适用。目前官方推荐适用canvas2d来绘制生成海报。

---

canvas2d来绘制海报：

canvas2d的优点：

例如：

1. 不需要先预下载网络图片再绘制，前端只需要调用网络图片即可。
2. 新版canvas2d海报，官方文档比较乱，开发起来难度大。
3. anvas2d生成海报效率高，资源开资少，性能强。
4. 普通canvas生成海报比canvas2d稍慢。
5. 通过网上方法，进行大量的开发实现，最后封装成的组件
6.  开发完成后，发现拼多多、淘宝、京东等流行商城都在使用这样子的分享海报。
7. 调用组件，只需要传参数即可，简单高效。
8. 不需要的样式可以调成自己特色。

---

实现的方法：

1、在相应页面json调用

"usingComponents": {
    "share2d": "/Component/share2d/share2d"
  }

2、wxml页面

<share2d id="share2d" bind:canvas_return="canvas_return" goods_data="{{share2d_goods_data}}" goods_img="{{combo.master_img_list[0]}}" share_type="combo"></share2d><!--胶囊固定转发海报-->

3、js页面调用绘制方法

const share2d = that.selectComponent('#share2d');
share2d.getposter();

4、绘制完海报后，返回图片路径

canvas_return(e){
    console.log(e.detail)
    this.setData({
      canvas_return_img:e.detail
    })
 },

---

总结：

喜欢的小伙可以到资源里面下载   资源下载