s

app.json

@@ -96,7 +96,8 @@
         "pages/made/made",
         "pages/made/madeImg/madeImg",
         "pages/made/madeFont/madeFont",
-        "pages/made/comb/comb"
+        "pages/made/comb/comb",
+        "pages/canvas/canvas"
       ]
     }
   ],

customized/pages/canvas/canvas.js

@@ -0,0 +1,61 @@
+// customized/pages/canvas/canvas.js
+Page({
+  onReady: function (e) {
+    var cxt_rotate = wx.createContext();//创建并返回绘图上下文context对象。
+    var rotate = 0;//默认旋转角度为为0
+    setInterval(function () { //无限循环定时函数    
+      cxt_rotate.translate(150, 100);//设置坐标系坐标
+      rotate++;//旋转角度自增1
+      cxt_rotate.rotate(rotate * Math.PI / 180)//设置旋转的角度
+      cxt_rotate.rect(0, 0, 50, 50)//设置坐标(0,0)，相对于坐标系坐标，边长为为50px的正方形
+      cxt_rotate.stroke();//对当前路径进行描边
+      wx.drawCanvas({
+        canvasId: 'canvasAutoRotate',//画布标识，对应的cavas-id
+        actions: cxt_rotate.getActions()//导出context绘制的直线并显示到页面
+      });
+    }, 1)
+  },
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    
+    let ctx = wx.createCanvasContext('fontBox');
+    ctx.setFontSize(20);
+    let rotate = 0
+    
+    // setInterval(()=>{
+    //   rotate++;
+    // ctx.translate(0, 0)
+      ctx.rotate(rotate * Math.PI / 180);
+      
+      console.log(rotate)
+      ctx.fillText('abcdefg', 0, 0);
+    // },2000)
+    
+    ctx.draw();
+  },
+
+})

customized/pages/canvas/canvas.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

customized/pages/canvas/canvas.wxml

@@ -0,0 +1,5 @@
+
+<canvas canvas-id="fontBox" class="fontBox"></canvas>
+
+
+<canvas canvas-id="canvasAutoRotate" class="fontBox"></canvas>

customized/pages/canvas/canvas.wxss

@@ -0,0 +1,4 @@
+/* customized/pages/canvas/canvas.wxss */
+.fontBox{
+  background:red;
+}

customized/pages/made/comb/comb.js

@@ -211,8 +211,8 @@ Page({
       ctx.setFillStyle(fontTouch.isColor);
       // ctx.translate(0, fontTouch.height / 5 * 4);
       // ctx.save();
-      let movex =  fontTouch.width / 2;
-      let movey = fontTouch.height / 2;
+      let movex = fontTouch.x + fontTouch.width / 2;
+      let movey = fontTouch.y +fontTouch.height / 2;
       ctx.translate(movex, movey);
       ctx.rotate(fontTouch.angle * Math.PI / 180);
       ctx.translate(-movex, -movey);

project.config.json

@@ -28,7 +28,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 4,
+			"current": 5,
 			"list": [
 				{
 					"id": 0,
@@ -59,6 +59,12 @@
 					"name": "合成",
 					"pathName": "customized/pages/made/combination/combination",
 					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "canvas",
+					"pathName": "customized/pages/canvas/canvas",
+					"query": ""
 				}
 			]
 		}