小程序 canvas旋转文字

最新推荐文章于 2024-07-02 09:23:33 发布

一天一天积累

最新推荐文章于 2024-07-02 09:23:33 发布

阅读量9.4k

点赞数 4

分类专栏：小程序文章标签：小程序文字旋转

本文链接：https://blog.csdn.net/u012011360/article/details/80881112

版权

本文介绍了如何在小程序和H5中利用canvas实现文字的旋转效果。在小程序中，通过save()、translate()、rotate()和fillText()方法实现文字旋转；在H5中，同样运用这些方法，并结合jQuery处理点击事件，动态展示旋转文字。

摘要由CSDN通过智能技术生成

小程序实现：

效果如下图：

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'
 