微信小程序如何使用Canvas绘制图片并实现竖排文字显示？

本文共计1761个文字，预计阅读时间需要8分钟。

前言：闲来无事，抽空画了个三国杀小程序，需求设计包括：组成武将皮肤图、排序的武将称号以及小程序码，最终提供保存图片到相册功能，让用户可分享到朋友圈。

前言

闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让用户可以分享到朋友圈或其他平台。合成图片应该按照 Canvas 的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下。

正文

首先放一张最终保存到相册的图片吧~

自我感觉良好，至少达到了我自己的预期吧~~~

下面让我们一步一步来看看如何实现的吧。

整个图片分为三个部分：

• 武将图片
• 小程序码
• 武将文字信息

先来看一下 wxml 里面的代码，主要是放了一个 canvas 标签，控制了一下高度和宽度属性。