微信小程序给图片做动态标注的实例分享

<!-- page.wxml -->
<view class="container">
  <image src="{{imagePath}}" mode="aspectFit"></image>
  <canvas canvas-id="myCanvas"></canvas>
  <button bindtap="drawLine">绘制标注</button>
</view>

// page.js
Page({
  data: {
    imagePath: '', // 图片路径
    context: null, // canvas 上下文
  },
  onLoad(options) {
    this.setData({ imagePath: options.imagePath });
  },
  onReady() {
    const context = wx.createCanvasContext('myCanvas');
    this.setData({ context });
  },
  drawLine() {
    const { context } = this.data;
    // 清空画布
    context.clearRect(0, 0, 300, 300);
    // 绘制图片
    context.drawImage(this.data.imagePath, 0, 0, 300, 300);
    // 绘制线条和标注
    context.setStrokeStyle('#FF0000');
    context.setLineWidth(2);
    context.beginPath();
    context.moveTo(50, 50);
    context.lineTo(150, 50);
    context.stroke();
    context.setFontSize(14);
    context.fillText('100px', 100, 40);
    // 绘制其他线条和标注...
    // 将绘制结果显示在画布上
    context.draw();
  },
});

/* page.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
image {
  width: 300px;
  height: 300px;
}
canvas {
  width: 300px;
  height: 300px;
}