小程序 canvas旋转文字

末蓝、 2022-05-21 06:28 580阅读 0赞

### **小程序实现：** ###

效果如下图：

![70][]

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

[70]: /images/20220521/0b6fe6f22e0a4902b7902f8ecd3b1262.png

小程序 canvas旋转文字

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 canvas详解04-绘制文字

相关 canvas旋转

相关 canvas渐变文字

相关小程序 canvas旋转文字

相关小程序canvas多行文字

相关小程序 - 实现滚动文字

相关小程序旋转动画

相关微信小程序——复制文字

相关 Canvas--文字

相关 canvas绘制文字