uni-app使用canvas绘制海报（记录一波）

川长思鸟来 2022-10-20 13:53 259阅读 0赞

这里直接上代码了都有注释

先来张绘制效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

export default{
        data() {
            return {
                backImage: '',        // 背景图
                canvasWidth: 0,
    				canvasHeight: 0,
            }
        },
        methods: {
            async poster{
                // 创建画布对象
    							const ctx = wx.createCanvasContext('myCanvas', this)
    							// 获取图片信息, 要按照原图来绘制, 否则图片会变形
    							uni.getImageInfo({
    								src: this.backImage,
    								success: info => {
    									// 根据 图片的大小 绘制底图 的大小
    									let imgW = info.width - 300;
    									let imgH = info.height - 360;
    									this.canvasWidth = imgW;
    									this.canvasHeight = imgH;
    									ctx.drawImage(info.path, 0, 0, imgW, imgH)
    									
    									// 绘制文本
    									ctx.font = "15px Medium"; // 字体大小
    									ctx.fillStyle = '#FFFFFF'; //字体填充颜色
    									ctx.fillText(res.data.user_nickname, 80, 110);
    									
    									ctx.font = '11px Regular';			// 字体大小
    									ctx.fillStyle = '#FFBFB8',			// 字体填充颜色
    									ctx.fillText('邀请你使用懂体验商城，不仅能体', 80, 130)
    									
    									ctx.font = '11px Regular';			// 字体大小
    									ctx.fillStyle = '#FFBFB8',			// 字体填充颜色
    									ctx.fillText('验产品不踩坑，还能购物领红包！', 80, 146)
    									
                                        // res.data.imgUrl二维码
    									ctx.drawImage(res.data.imgUrl, 84, 200, 115, 115)
    									
    									// 绘制裁剪头像为圆形
    									let radius,diameter
    									let width = 40;			// 头像宽度
    									let height = 40;		// 头像高度
    									let x = 30;			// 头像显示位置
    									let y = 100;			// 头像显示位置
    									if (width > height) {
    										radius = height / 2;
    									} else {
    										radius = width / 2;
    									}
    									diameter = radius * 2;
    									ctx.beginPath();
    									ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2, false);
    									ctx.clip();
    									ctx.strokeStyle = "#ff6352";			// 改变边框颜色
    									ctx.drawImage(this.userInfo.avatar, x, y, diameter, diameter);
    								}
    							})
    							setTimeout(function() {		// uni-app必须加上延迟，不然显示不出来， 亲测 
    								ctx.stroke();
    								ctx.draw() //必须加上  uniapp 没这儿玩意儿 显示不出来不比原生  不加可以显示
    							}, 100)
            }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221020/e6c0d92ed6c647a0b2e7a0899b3e2fae.png