小程序 canvas 2d 绘制海报

效果图

canvas api 准备

绘制图片

context.drawImage(image, dx, dy, dWidth, dHeight);
1

image：绘制在Canvas上的元素，可以是各类Canvas图片资源（见CanvasImageSource），如图片，SVG图像，Canvas元素本身等。
dx：在Canvas画布上规划一片区域用来放置图片，dx就是这片区域的左上角横坐标。
dy：在Canvas画布上规划一片区域用来放置图片，dy就是这片区域的左上角纵坐标。
dWidth：在Canvas画布上规划一片区域用来放置图片，dWidth就是这片区域的宽度。
dHeight：在Canvas画布上规划一片区域用来放置图片，dHeight就是这片区域的高度。

绘制文字

context.fillText(text, x, y [, maxWidth]);
1

text：用来填充的文本信息
x：填充文本的起点横坐标。
y：填充文本的起点纵坐标。
maxWidth：填充文本的最大宽度，超出会压缩文本宽度而非换行

绘制圆

context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
1

x：圆弧对应的圆心横坐标。
y：圆弧对应的圆心纵坐标。
radius：圆弧的半径大小。
startAngle：圆弧开始的角度，单位是弧度。
endAngle：圆弧结束的角度，单位是弧度。
anticlockwise：弧度的开始到结束的绘制是按照顺时针来算，还是按时逆时针来算。如何设置为true，则表示按照逆时针方向从startAngle绘制到endAngle。

裁切

context.clip();
1

比例：用来适配不同屏幕

比例 = 可使用窗口宽度 / 设计稿宽度

const ratio = wx.getSystemInfoSync()?.windowWidth / 750;
1

解决 canvas 绘制不清晰

const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = width * dpr;
canvas.height = height * dpr;
context.scale(dpr, dpr);
1
2
3
4

说明绘制圆的参数如何得到

context.arc(122 * ratio, 100 * ratio, 30 * ratio, 0, (Math.PI / 180) * 360);
1

头像半径 30
头像距左边 92
头像距上边 70
x = 92 + 30
y = 70 + 30
r = 30
startAngle = 0
endAngle = (Math.PI / 180) * 360) 弧度转换为角度相对友好

完整代码

html

<canvas type="2d" id="myCanvas">canvas>
1

css

#myCanvas{
  margin: 50rpx auto;
  width: 422rpx;
  height: 338rpx;
}
1
2
3
4
5

js

initCanvas() {
    let that = this;
    const query = wx.createSelectorQuery();
    query
      .select("#myCanvas")
      .fields({ node: true, size: true })
      .exec(async (res) => {
        const width = res[0].width;
        const height = res[0].height;
        const canvas = res[0].node;

        const context = canvas.getContext("2d");
        // 比例
        const ratio = wx.getSystemInfoSync()?.windowWidth / 750;

        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = width * dpr;
        canvas.height = height * dpr;
        context.scale(dpr, dpr);

        that.setData({
          canvas,
        });

        // 绘制背景
        context.beginPath();
        await that.loadImg(
          "/pages/serviceChain/img/auth_share.png",
          canvas,
          context,
          0,
          0,
          422 * ratio,
          338 * ratio
        );

        // 绘制文字
        let name = wx.getStorageSync(
          `${wx.getStorageSync("currentUid")}_userInfo`
        )?.name;
        if (name.length > 5) {
          name = name.slice(0, 5) + "...";
        }
        context.beginPath();
        context.font = `22*${ratio}`;
        context.textAlign = "center";
        context.fillText(name, 60 * ratio, 212 * ratio, 70 * ratio);

        // 绘制圆
        context.beginPath();
        context.arc(
          60 * ratio,
          158 * ratio,
          30 * ratio,
          0,
          (Math.PI / 180) * 360
        );
        context.fill();
        context.clip();

        // 绘制头像
        context.beginPath();
        const avatar = wx.getStorageSync(
          `${wx.getStorageSync("currentUid")}_userInfo`
        )?.image;
        await that.loadImg(
          avatar,
          canvas,
          context,
          30 * ratio,
          128 * ratio,
          60 * ratio,
          60 * ratio
        );
      });
  },

  save() {
    return new Promise((resolve, reject) => {
      wx.canvasToTempFilePath({
        canvas: this.data.canvas,
        success: (res) => {
          return resolve(res.tempFilePath);
          // wx.saveImageToPhotosAlbum({
          //   filePath: res.tempFilePath,
          //   success(res) {
          //     wx.showToast({
          //       title: "保存成功，请在相册中查看",
          //     });
          //   },
          // });
        },
        fail(error) {
          return reject(error);
        },
      });
    });
  },

  loadImg(src, canvas, context, x, y, width, height) {
    return new Promise((resolve, reject) => {
      try {
        const img = canvas.createImage();
        img.src = src;
        img.onload = function () {
          context.drawImage(img, x, y, width, height);
          resolve(canvas.toDataURL("image/png"));
        };
      } catch (error) {
        reject(error);
      }
    });
  },

  async onShareAppMessage() {
    const res = await this.save();
    return {
      path: `/pages/`,
      imageUrl: res,
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121