wx.createSelectorQuery()

    .select('#myCanvas') // 在 WXML 中填入的 id

    .fields({ node: true, size: true })

    .exec((res) => {

        // Canvas 对象

        const canvas = res[0].node

        // 渲染上下文

        const context = canvas.getContext('2d');

        const text = 'canvas实现';

        const fontsize = 12;

        const fontcolor = 'black';

        const textWidth = context.measureText(text).width;

​

        const { pixelRatio: dpr } = wx.getSystemInfoSync();

        canvas.height = (fontsize + 20) * dpr;

        canvas.width = (textWidth + 12) * dpr;

        //再缩放，解决canvas模糊问题

        context.scale(dpr, dpr);

​

        context.font=fontsize+"px Arial";

        context.lineWidth = 1;

        context.fillStyle = fontcolor;

        context.strokeStyle = 'red';

        context.strokeText(text, 0, fontsize);

        context.fillText(text, 0, fontsize);

        newMarker.customCallout.anchorY = 50 + fontsize + 10;

        const markers = [newMarker];

​

        // 生成图片

        wx.canvasToTempFilePath({

            canvas,

            success: res => {

                // 生成的图片临时文件路径

                this.setData({

                  markers,

                  canvas: {

                    src: res.tempFilePath,

                    width: canvas.width / dpr,

                    height: canvas.height / dpr,

                  }

                })

            },

        })

    })