测试旋转

index/drawCanvas.js

@@ -74,9 +74,34 @@ class DrawCanvas {
     img.onload = () => {
       const fillStyle = this._ctx.createPattern(img, 'repeat')
       // 矩阵变化
-      // const svg1 = document.getElementById("svg1");
-      // const matrix = svg1.createSVGMatrix();
       // fillStyle.setTransform(matrix.rotate(-45))
+      // const matrix = new DOMMatrix()
+      fillStyle.setTransform({
+        a: 0.7071067811865476,
+        b: 0.7071067811865476,
+        c: -0.7071067811865476,
+        d: 0.7071067811865476,
+        e: 0,
+        f: 0,
+        is2D: true,
+        isIdentity: false,
+        m11: 0.7071067811865476,
+        m12: 0.7071067811865476,
+        m13: 0,
+        m14: 0,
+        m21: -0.7071067811865476,
+        m22: 0.7071067811865476,
+        m23: 0,
+        m24: 0,
+        m31: 0,
+        m32: 0,
+        m33: 1,
+        m34: 0,
+        m41: 0,
+        m42: 0,
+        m43: 0,
+        m44: 1
+      })
       this._style = { fillStyle, w, h }
     }
     img.src = url