uniapp 微信小程序使用canvas

微信小程序基础库大于2.9.0后，canvas(画布)支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护。在这种情况下使用原有接口会报错，报错例如：

1、使用ctx.draw()会报错：draw is not a function，原因：新版 Canvas 2D 接口没有 draw 方法

2、使用ctx.setfillStyle('white')会报错：ctx.setfillStyle is not a function，原因：新版 Canvas 2D 接口没有setfillStyle方法，改用fillStyle

3、使用ctx.setFontSize(20)会报错：ctx.setFontSize is not a function，原因：新版 Canvas 2D 接口没有setFontSize方法，改用font

4、使用wx.canvasToTempFilePath会报错：canvasToTempFilePath: fail canvas is empty，原因：当使用Canvas 2D时，应该使用canvas属性而不是canvasId属性

以上均是使用Canvas 2D之后导致的问题，可以改用新写法，新写法如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

<template>
    <view>
        <uni-nav-bar leftIcon="arrowleft" :status-bar="true" fixed="true" color="#ffffff" bgImage="linear-gradient(45deg, #ec008c, #6739b6)"  title="移动开发框架" />
         
        <view class="drawBtn">生成图片</view>
         
        <!-- 画布 -->
        <canvas type="2d" class='canvas-poster' canvas-id='canvasposter' id="canvasposter"></canvas>
    </view>
</template>
 
<script>
    import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
    export default {
        data() {
            return {
                 
            }
        },
        components: {
            uniNavBar
        },
        onLoad() {
             
        },
        methods: {
            //绘制到canvas
            viewDrawToCanvas: function() {
                let that = this
                const query = uni.createSelectorQuery()
                query.in(this).select('#canvasposter')
                    .fields({
                        node: true,
                        size: true
                    })
                    .exec((res) => {
                        const canvas = res[0].node // 获取画布节点对象
                        const ctx = canvas.getContext('2d')
                        canvas.width = 794  // 画布宽度
                        canvas.height = 1123 // 画布高度
                        ctx.rect(0, 0, canvas.width, canvas.height)
                        ctx.fillStyle = 'white' // 设置样式
                        ctx.fillRect(0, 0, canvas.width, canvas.height)
                        // 画布填充文字
                        ctx.font = '28px SimSun' // 设置文字样式
                        ctx.fillStyle = '#333333'
                        ctx.fillText('文案', 16, 56)              
                        // 图表图片
                        let img = canvas.createImage()
                        img.src = imgBase64
                        img.onload = () => {
                            ctx.drawImage(img, 0, 0, img.width, img.height, 50, 170, img.width * 0.7, img.height * 0.7)
                            uni.canvasToTempFilePath({
                                canvas: canvas,
                                width: canvas.width,
                                height: canvas.height,
                                destWidth: canvas.width,
                                destHeight: canvas.height,
                                fileType: 'png',
                                quality: '1',
                                success: (res) => {
                                    console.log(res.tempFilePath)
                                    that.saveImageToPhotosAlbum(res.tempFilePath)//保存到相册
                                },
                                fail: (err) => {
                                    console.log(err)
                                }
                            })
                        }
                    })
 
            },
            //把生成的图片保存至相册
            saveImageToPhotosAlbum: function(imgUrl) {
                uni.hideLoading();
                if (imgUrl) {
                    uni.saveImageToPhotosAlbum({
                        filePath: imgUrl,
                        success: (res) => {
                            uni.showToast({
                                title: '保存成功',
                                icon: 'success',
                                duration: 2000
                            })
                        },
                        fail: (err) => {
                            uni.showToast({
                                title: '保存失败',
                                icon: 'none',
                                duration: 2000
                            })
                        }
                    })
                } 
                else {
                    uni.showToast({
                        title: '绘制中……',
                        icon: 'loading',
                        duration: 3000
                    })
                }
            },
        }
    }
</script>
 
<style>
    .drawBtn{
        width: 650upx;
        height: 80upx;
        line-height: 80upx;
        text-align: center;
        color: #FFFFFF;
        background-image: linear-gradient(45deg, #ec008c, #6739b6);
        border-radius: 20upx;
        margin: 200upx 50upx;
    }
     
    /* 绘制图片canvas样式 */
    .canvas-poster {
        position: fixed;
        top: 100%;
        left: 100%;
    }
</style>            