小程式實現：

效果如下圖：

js部分：

//canvas畫圖片 savedetailCanvas: function () { //['消費者', '知性', '形象力', '形象力', '靚麗', '逛街中', '魅力四射', '小姐姐'] var that = this; const ctx = wx.createCanvasContext('savePic'); ctx.drawImage('../images/picbg.jpg', 0, 0, 750, 1206, 750, 1206);//背景圖 ctx.save(); ctx.translate(0, 0);//設定畫布上的(0,0)位置，也就是旋轉的中心點 ctx.rotate(350 * Math.PI / 180); ctx.setFillStyle('#80c269'); ctx.setFontSize(38.4); ctx.fillText('消費者', 230, 310); ctx.restore();

ctx.save(); ctx.translate(402, 320);//設定畫布上的(0,0)位置，也就是旋轉的中心點 ctx.rotate(295 * Math.PI / 180); ctx.setFillStyle('#a4005b'); ctx.setFontSize(45); ctx.fillText('知性', 0, 0); ctx.restore();
ctx.save(); ctx.translate(355, 382);//設定畫布上的(0,0)位置，也就是旋轉的中心點 ctx.rotate(350 * Math.PI / 180); ctx.setFillStyle('#0068b7'); ctx.setFontSize(33); ctx.fillText('形象力', 0, 0); ctx.restore();
ctx.save(); ctx.translate(320, 430);//設定畫布上的(0,0)位置，也就是旋轉的中心點 ctx.rotate(350 * Math.PI / 180); ctx.setFillStyle('#cfa972'); ctx.setFontSize(33); ctx.fillText('形象力', 0, 0); ctx.restore();
ctx.save(); ctx.translate(310, 470);//設定畫布上的(0,0)位置，也就是旋轉的中心點 ctx.rotate(35 * Math.PI / 180); ctx.setFillStyle('#f63854'); ctx.setFontSize(51); ctx.fillText('靚麗', 0, 0); ctx.restore();
ctx.save(); ctx.translate(255, 510);//設定畫布上的(0,0)位置，也就是旋轉的中心點 ctx.rotate(26 * Math.PI / 180); ctx.setFillStyle('#0075a9'); ctx.setFontSize(35); ctx.fillText('逛街中', 0, 0); ctx.restore();
ctx.save(); ctx.translate(225, 648);//設定畫布上的(0,0)位置，也就是旋轉的中心點 ctx.rotate(340 * Math.PI / 180); ctx.setFillStyle('#e4007f'); ctx.setFontSize(34); ctx.fillText('魅力四射', 0, 0); ctx.restore();

ctx.save(); ctx.translate(230, 705);//設定畫布上的(0,0)位置，也就是旋轉的中心點 ctx.rotate(340 * Math.PI / 180); ctx.setFillStyle('#f63854'); ctx.setFontSize(51); ctx.fillText('小姐姐', 0, 0); ctx.restore();

that.circleImg(ctx, "../images/detail2/detail7.jpg", 60, 20, 40);
ctx.draw(0, 0, 750, 1206); },

注意：

1. 先儲存原來的畫布

ctx.save();

2. 然後旋轉的中心點，這個中心點的座標其實就是文字的座標

ctx.translate(402,320);//設定畫布上的(0,0)位置，也就是旋轉的中心點

3.設定旋轉角度

ctx.rotate(340* Math.PI /180);

4.注意設定過旋轉的中心點位置就是文字位置，這裡要設定成0,0

ctx.fillText('小姐姐',0,0);

H5實現：

html部分：

<button class="btn">點選畫圖</button>

<canvas id="savePic" style="width:750px; height:1206px;"/> 

js部分：

<script type="text/javascript" src="js/jquery.3.3.1.js" ></script>
<script type="text/javascript">
$(".btn").click(function(){
var ctx = document.getElementById("savePic").getContext("2d");
var img  = new Image();
img.src  = "img/picbg.jpg";
img.onload = function(){
ctx.drawImage(img,0,0,75,120);//背景圖

ctx.save();
    ctx.translate(0, 0);//設定畫布上的(0,0)位置，也就是旋轉的中心點
    ctx.rotate(350 * Math.PI / 180);     
    ctx.fillStyle = '#80c269';
    ctx.font = "38px";
    ctx.fillText('消費者', 30,60);      
    ctx.restore();
    
    ctx.save();
    ctx.translate(0, 0);//設定畫布上的(0,0)位置，也就是旋轉的中心點
    ctx.rotate(350 * Math.PI / 180);     
    ctx.fillStyle = '#80c269';
    ctx.font = "38px";
    ctx.fillText('消費者2', 20,90);      
    ctx.restore();
}
});
</script>