小程序 canvas旋转文字

小程序实现：

效果如下图：

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'