小程序 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' );

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部分：

点击画图

 

js部分：