微信小程序Canvas绘制证件照底色，小程序Canvas绘图

小程序提供了Canvas绘图的API，我们很轻松就可以使用Canvas绘制一张图片并保存下来。本次案例使用绘制证件照的方式演示Canvas的示例。

准备

去掉背景的证件照（宽160px，高230px)

代码

index.wxml

<!-- Canvas 2D组件 -->
<canvas canvas-id="firstCanvas" class="firstCanvas"></canvas>
<!-- 保存按钮 -->
<button bindtap="saveimg" class="saveimg">保存到相册</button>

index.wxss

.firstCanvas{
      width: 160px;
      height: 230px;
      margin:30px auto 0;
}
.saveimg{
      margin-top: 30px;
}

index.js

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')
    // 设置边框颜色
    context.setStrokeStyle("#fff")
    // 设置边框粗细
    context.setLineWidth(0)
    // 设置背景颜色
    c