微信小程序2D canvas绘制分享海报

效果图：

wxml 

<view>
	<canvas type="2d" id="canvas_box" style="width:260px;height:430px "></canvas>
	<button class='bottom' catchtap="bc" canvas-id="mycanvas"> 保存到相册    </button>
</view>

 type：指定 canvas 类型

id：canvas 组件的唯一标识符

样式根据自己情况自定义

page{
  background: rgb(223, 165, 165);
  
}
canvas{
  margin:20rpx auto;
  border: 1rpx solid #ccc;
  background: #fff;
  color: #fff;
}

js重点   

（完整js代码在最下面）

 

  onReady: function () {
    const query = wx.createSelectorQuery()
    query.select('#canvas_box')
      .fields({
        id: true,
        node: true,
        size: true
      })
      .exec(this.init.bind(this));
  },
 

id:true    是否返回节点 id

node:true    是否返回节点对应的 Node 实例

size:true    是否返回节点尺寸（width height）

 

wx.createSelectorQuery()

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

 

select

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。

selector 语法

selector类似于 CSS 的选择器，但仅支持下列语法。

• ID选择器：#the-id
• class选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
• 多选择器的并集：#a-node, .some-other-nodes

 

fields