From e212aa66257b4589d8c591db153c89ec35b5f66d Mon Sep 17 00:00:00 2001
From: jixinbao <jixinbao@dcloud.io>
Date: Tue, 6 Aug 2024 13:43:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=20canvas=20context?=
 =?UTF-8?q?=20=E6=96=B9=E6=B3=95=E6=BC=94=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/canvas/canvas.test.js |  25 +-
 pages/component/canvas/canvas.uvue    | 905 +++++++++++++++++++++++++-
 2 files changed, 887 insertions(+), 43 deletions(-)

diff --git a/pages/component/canvas/canvas.test.js b/pages/component/canvas/canvas.test.js
index 97580874..890fb836 100644
--- a/pages/component/canvas/canvas.test.js
+++ b/pages/component/canvas/canvas.test.js
@@ -23,21 +23,20 @@ describe('Canvas.uvue', () => {
       expect(true).toBe(true)
     }
   })
-  it("测试异步方式", async () => {
+  it("测试异步创建canvas上下文", async () => {
     await page.callMethod('useAsync');
-    const {
-      testCanvasContext,
-      testToDataURLResult
-    } = await page.data()
-    expect(testCanvasContext).toBe(true)
-    await page.callMethod('canvasToDataURL');
-    expect(testToDataURLResult).toBe(true)
+    const element = await page.$('#testCanvasContext')
+    expect(await element.text()).toBe('true')
+
+  })
+  it("测试同步创建canvas上下文", async () => {
+   await page.callMethod('useAsync');
+   const element = await page.$('#testCanvasContext')
+   expect(await element.text()).toBe('true')
   })
-  it("测试同步方式", async () => {
-    await page.callMethod('useSync');
-    const data = await page.data()
-    expect(data.testCanvasContext).toBe(true)
+  it('测试 canvasToDataURL', async () => {
     await page.callMethod('canvasToDataURL');
-    expect(data.testToDataURLResult).toBe(true)
+    const element = await page.$('#testToDataURLResult')
+    expect(await element.text()).toBe('true')
   })
 })
diff --git a/pages/component/canvas/canvas.uvue b/pages/component/canvas/canvas.uvue
index 10ecb233..0ff092dd 100644
--- a/pages/component/canvas/canvas.uvue
+++ b/pages/component/canvas/canvas.uvue
@@ -1,9 +1,21 @@
 <template>
   <view class="page" id="page-canvas">
+
     <canvas id="canvas" class="canvas-element"></canvas>
     <scroll-view class="scroll-view">
-      <button class="canvas-drawing-button" id="useAsync" @click="useAsync">使用异步方式设置（跨平台推荐)</button>
-      <button class="canvas-drawing-button" id="useSync" @click="useSync">使用同步方式设置</button>
+      <view>
+        <text style="padding: 8px 10px;">获取 CanvasContext</text>
+      </view>
+      <button class="canvas-drawing-button" id="useAsync" @click="useAsync">异步方式获取 CanvasContext</button>
+      <button class="canvas-drawing-button" id="useSync" @click="useSync">同步方式获取 CanvasContext</button>
+      <view class="text-group">
+        <text>获取 CanvasContext 结果：</text>
+        <text id="testCanvasContext">{{testCanvasContext}}</text>
+      </view>
+      <view class="text-group">
+        <text>测试 ToDataURL 结果：</text>
+        <text id="testToDataURLResult">{{testToDataURLResult}}</text>
+      </view>
       <!-- #ifdef WEB -->
       <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
       <view>
@@ -11,20 +23,20 @@
       </view>
       <!-- #endif -->
       <button class="canvas-drawing-button" id="toDataURL" @click="canvasToDataURL">canvasToDataURL</button>
-      <view v-if='dataBase64.length>0' :style="{
-        width: canvasWidth,
-        height: canvasHeight,
-        padding:'10px',
-      }">
-        <text>canvasToDataURL 返回结果：</text>
-        <text>{{dataBase64.slice(0,35)}}...</text>
-        <view>
-          <text>canvasToDataURL 转图片预览：</text>
+      <view class="text-group" v-if="dataBase64.length>0">
+        <text>canvasToDataURL:</text>
+        <text>{{dataBase64.slice(0,22)}}...</text>
+      </view>
+      <view style="padding: 8px 10px;">CanvasContext API 演示</view>
+      <view class="grid-view">
+        <view class="grid-item" v-for="(name, index) in names" :key="index">
+          <button class="canvas-drawing-button" @click="handleCanvasButton(name)">{{name}}</button>
         </view>
-        <image mode='aspectFit' :src="dataBase64"></image>
       </view>
+
     </scroll-view>
   </view>
+
 </template>
 
 <script>
@@ -36,23 +48,32 @@
     context.scale(dpr, dpr);
   }
 
+  const API_PATH = ["arc", "arcTo", "bezierCurveTo", "quadraticCurve", "moveTo", "lineTo", "rect", "clip", "pattern"]
+  const API_DRAW = ["stroke", "strokeRect", "strokeText", "fill", "fillRect", "fillText", "drawImage", "drawImageLocal", "clearRect"]
+  const API_STATE = ["beginPath", "closePath", "reset", "transform", "rotate", "resetTransform", "save", "restore", "scale", "translate"]
+  const API_PROPERTIES = ["setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit", "setFillStyle", "setStrokeStyle", "setGlobalAlpha", "setFontSize", "lineDash", "linearGradient", "radialGradient", "textAlign"]
+
   export default {
     data() {
       return {
         title: 'Context2D',
-        // canvas: null as UniCanvasElement | null,
-        // canvasContext: null as CanvasRenderingContext2D | null,
+        canvas: null as UniCanvasElement | null,
+        canvasContext: null as CanvasRenderingContext2D | null,
         canvasWidth: 0,
         canvasHeight: 0,
         dataBase64: '',
         // 仅测试
         testCanvasContext: false,
         testToBlobResult: false,
-        testToDataURLResult: false
+        testToDataURLResult: false,
+        names: [...API_PATH, ...API_DRAW, ...API_STATE, ...API_PROPERTIES, "measureText"] as string[],
+        image: null as Image | null,
+        // 仅测试
+        testCreateCanvasContextAsyncSuccess: false,
       }
     },
     onReady() {
-      // this.useAsync()
+      this.useAsync()
     },
     methods: {
       // #ifdef WEB
@@ -73,18 +94,21 @@
           id: 'canvas',
           component: this,
           success: (context : CanvasContext) => {
-            const canvasContext = context.getContext('2d')!;
-            this.canvasContext = canvasContext
-            this.testCanvasContext = true
-            const canvas = canvasContext.canvas;
-            canvasContext.save()
-            hidpi(canvas);
-            this.canvasWidth = canvas.width;
-            this.canvasHeight = canvas.height;
-            this.drawImage()
+            if (this.canvasContext == null) {
 
-            this.testToDataURLResult = canvas.toDataURL().startsWith('data:image/png;base64')
+              const canvasContext = context.getContext('2d')!;
+              this.canvasContext = canvasContext
+              this.testCanvasContext = true
+              const canvas = canvasContext.canvas;
+              hidpi(canvas);
+              this.canvasWidth = canvas.width;
+              this.canvasHeight = canvas.height;
+              canvasContext.save()
+            }
 
+            this.measureText()
+            const canvas = this.canvasContext.canvas
+            this.testToDataURLResult = canvas.toDataURL().startsWith('data:image/png;base64')
             this.canvas = canvas;
           }
         })
@@ -93,10 +117,11 @@
       useSync() {
 
         let canvas = uni.getElementById("canvas") as UniCanvasElement
+
         this.canvasContext = canvas.getContext("2d")
         this.testCanvasContext = true
         this.canvasContext!.save()
-        hidpi(canvas);
+        // hidpi(canvas);
         this.canvasWidth = canvas.width;
         this.canvasHeight = canvas.height;
         this.arc()
@@ -111,9 +136,142 @@
         this.canvas = canvas;
 
       },
+
+      clearCanvasRect() {
+        this.canvasContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+      },
+      handleCanvasButton(name : string) {
+        switch (name) {
+          case "arc":
+            this.arc();
+            break;
+          case "arcTo":
+            this.arcTo();
+            break;
+          case "beginPath":
+            this.beginPath();
+            break;
+          case "bezierCurveTo":
+            this.bezierCurveTo();
+            break;
+          case "clearRect":
+            this.clearRect();
+            break;
+          case "clip":
+            this.clip();
+            break;
+          case "closePath":
+            this.closePath();
+            break;
+          case "pattern":
+            this.pattern()
+            break;
+          case "linearGradient":
+            this.createLinearGradient();
+            break;
+          case "radialGradient":
+            this.createRadialGradient();
+            break;
+          case "fill":
+            this.fill();
+            break;
+          case "fillRect":
+            this.fillRect();
+            break;
+          case "fillText":
+            this.fillText();
+            break;
+          case "lineTo":
+            this.lineTo();
+            break;
+          case "moveTo":
+            this.moveTo();
+            break;
+          case "quadraticCurve":
+            this.quadraticCurveTo();
+            break;
+          case "rect":
+            this.rect();
+            break;
+          case "reset":
+            this.reset();
+            break;
+          case "resetTransform":
+            this.resetTransform();
+            break;
+          case "restore":
+            this.restore();
+            break;
+          case "rotate":
+            this.rotate();
+            break;
+          case "save":
+            this.save();
+            break;
+          case "scale":
+            this.scale();
+            break;
+          case "stroke":
+            this.stroke();
+            break;
+          case "strokeRect":
+            this.strokeRect();
+            break;
+          case "strokeText":
+            this.strokeText();
+            break;
+          case "transform":
+            this.transform();
+            break;
+          case "translate":
+            this.translate();
+            break;
+          case "drawImageLocal":
+            this.drawImageLocal()
+            break;
+          case "drawImage":
+            this.drawImage();
+            break;
+          case "measureText":
+            this.measureText();
+            break;
+          case "setFillStyle":
+            this.setFillStyle();
+            break;
+          case "setStrokeStyle":
+            this.setStrokeStyle();
+            break;
+          case "setGlobalAlpha":
+            this.setGlobalAlpha();
+            break;
+          case "setFontSize":
+            this.setFontSize();
+            break;
+          case "setLineCap":
+            this.setLineCap();
+            break;
+          case "setLineJoin":
+            this.setLineJoin();
+            break;
+          case "lineDash":
+            this.lineDash();
+            break;
+          case "setLineWidth":
+            this.setLineWidth();
+            break;
+          case "setMiterLimit":
+            this.setMiterLimit();
+            break;
+          case "textAlign":
+            this.textAlign();
+          default:
+            break;
+        }
+      },
       arc() {
         const context = this.canvasContext!
 
+        context.save()
         this.clearCanvasRect()
         context.beginPath()
         context.lineWidth = 2
@@ -128,13 +286,686 @@
 
         context.restore()
       },
+      arcTo() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.moveTo(150, 20)
+        context.arcTo(150, 100, 50, 20, 30)
+        context.stroke()
+
+        context.fillStyle = "blue"
+        // base point
+        context.fillRect(150, 20, 10, 10)
+
+        context.fillStyle = "red"
+        // control point one
+        context.fillRect(150, 100, 10, 10)
+        // control point two
+        context.fillRect(50, 20, 10, 10)
+        //
+        context.setLineDash([5, 5])
+        context.moveTo(150, 20)
+        context.lineTo(150, 100)
+        context.lineTo(50, 20)
+        context.stroke()
+        context.beginPath()
+        context.arc(120, 38, 30, 0, 2 * Math.PI, true)
+        context.stroke()
+
+        context.restore()
+      },
+      beginPath() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // First path
+        context.beginPath()
+        context.strokeStyle = "blue"
+        context.moveTo(20, 20)
+        context.lineTo(200, 20)
+        context.stroke()
+
+        // Second path
+        context.beginPath()
+        context.strokeStyle = "green"
+        context.moveTo(20, 20)
+        context.lineTo(120, 120)
+        context.stroke()
+
+        context.restore()
+      },
+      textAlign() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.moveTo(150, 0)
+        context.lineTo(150, 150)
+        context.stroke()
+
+        context.font = "30px serif"
+
+        context.textAlign = "left"
+        context.fillText("left-aligned", 150, 40)
+
+        context.textAlign = "center"
+        context.fillText("center-aligned", 150, 85)
+
+        context.textAlign = "right"
+        context.fillText("right-aligned", 150, 130)
+
+        context.restore()
+      },
+      bezierCurveTo() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.moveTo(50, 20)
+        context.bezierCurveTo(230, 30, 150, 60, 50, 100)
+        context.stroke()
+
+        context.fillStyle = "blue"
+        // start point
+        context.fillRect(50, 20, 10, 10)
+        // end point
+        context.fillRect(50, 100, 10, 10)
+
+        context.fillStyle = "red"
+        // control point one
+        context.fillRect(230, 30, 10, 10)
+        // control point two
+        context.fillRect(150, 70, 10, 10)
+
+        context.restore()
+      },
+      clearRect() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // 绘制黄色背景
+        context.beginPath()
+        context.fillStyle = "#ff6"
+        context.fillRect(0, 0, 300, 150)
+
+        // 绘制蓝色三角形
+        context.beginPath()
+        context.fillStyle = "blue"
+        context.moveTo(20, 20)
+        context.lineTo(180, 20)
+        context.lineTo(130, 130)
+        context.closePath()
+        context.fill()
+
+        // 清除一部分画布
+        context.clearRect(10, 10, 120, 100)
+
+        context.restore()
+      },
+      clip() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // Create circular clipping region
+        context.beginPath();
+        context.arc(100, 75, 50, 0, Math.PI * 2, true)
+        context.clip()
+
+        // Draw stuff that gets clipped
+        context.fillStyle = "blue"
+        context.fillRect(0, 0, 300, 150)
+        context.fillStyle = "orange"
+        context.fillRect(0, 0, 100, 100)
+
+        context.restore()
+      },
+      closePath() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.lineWidth = 10
+        context.moveTo(20, 20)
+        context.lineTo(20, 100)
+        context.lineTo(70, 100)
+        context.closePath()
+        context.stroke()
+
+        context.restore()
+      },
+      pattern() {
+        const context = this.canvasContext!
+
+        const image = new Image(100, 100)
+        image.src = '../../../static/api.png';
+        image.onload = () => {
+          context.save()
+          this.clearCanvasRect()
+          const pattern = context.createPattern(image, "repeat")
+          context.fillStyle = pattern
+          context.fillRect(0, 0, 100, 100)
+          context.restore()
+        };
+      },
+      createLinearGradient() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // Create a linear gradient
+        // The start gradient point is at x=20, y=0
+        // The end gradient point is at x=220, y=0
+        const gradient = context.createLinearGradient(20, 0, 220, 0)
+
+        // Add three color stops
+        gradient.addColorStop(0, "green")
+        gradient.addColorStop(0.5, "cyan")
+        gradient.addColorStop(1, "green")
+
+        // Set the fill style and draw a rectangle
+        context.fillStyle = gradient
+        context.fillRect(20, 20, 200, 100)
+
+        context.restore()
+      },
+      createRadialGradient() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // Create a radial gradient
+        // The inner circle is at x=110, y=90, with radius=30
+        // The outer circle is at x=100, y=100, with radius=70
+        const gradient = context.createRadialGradient(110, 90, 30, 100, 100, 70)
+
+        // Add three color stops
+        gradient.addColorStop(0, "pink")
+        gradient.addColorStop(0.9, "white")
+        gradient.addColorStop(1, "green")
+
+        // Set the fill style and draw a rectangle
+        context.fillStyle = gradient
+        context.fillRect(20, 20, 160, 160)
+
+        context.restore()
+      },
+      fill() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.rect(20, 20, 150, 100)
+        context.strokeStyle = '#00ff00'
+        context.fill()
+
+        context.restore()
+      },
+      fillRect() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.fillStyle = "green"
+        context.fillRect(20, 10, 150, 100)
+
+        context.restore()
+      },
+      fillText() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.strokeStyle = '#ff0000'
+
+        context.beginPath()
+        context.moveTo(0, 10)
+        context.lineTo(300, 10)
+        context.stroke()
+        // context.save()
+        // context.scale(1.5, 1.5)
+        // context.translate(20, 20)
+        // context.setFontSize(10)
+        context.fillText('Hello World', 0, 30, 300)
+        // context.setFontSize(20)
+        context.fillText('Hello World', 100, 30, 300)
+
+        // context.restore()
+
+        context.beginPath()
+        context.moveTo(0, 30)
+        context.lineTo(300, 30)
+        context.stroke()
+
+        context.restore()
+      },
+      moveTo() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.moveTo(0, 0)
+        context.lineTo(300, 150)
+        context.stroke()
+
+        context.restore()
+      },
+      lineTo() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.moveTo(20, 20)
+        context.lineTo(20, 100)
+        context.lineTo(70, 100)
+        context.stroke()
+
+        context.restore()
+      },
+      stroke() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.moveTo(20, 20)
+        context.lineTo(20, 100)
+        context.lineTo(70, 100)
+        context.strokeStyle = '#00ff00'
+        context.stroke()
+
+        context.restore()
+      },
+      strokeRect() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.strokeStyle = "green"
+        context.strokeRect(20, 10, 160, 100)
+
+        context.restore()
+      },
+      strokeText() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.font = "10px serif"
+        context.strokeText("Hello world", 50, 90)
+
+        context.font = "30px serif"
+        context.strokeStyle = "blue"
+        context.strokeText("Hello world", 50, 100)
+
+        context.restore()
+      },
+      rotate() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // Point of transform origin
+        context.arc(0, 0, 5, 0, 2 * Math.PI, true)
+        context.fillStyle = "blue"
+        context.fill()
+
+        // Non-rotated rectangle
+        context.fillStyle = "gray"
+        context.fillRect(100, 0, 80, 20)
+        // Rotated rectangle
+        context.rotate((45 * Math.PI) / 180)
+        context.fillStyle = "red"
+        context.fillRect(100, 0, 80, 20)
+
+        // Reset transformation matrix to the identity matrix
+        context.setTransform(1, 0, 0, 1, 0, 0)
+
+        context.restore()
+      },
+      scale() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // Scaled rectangle
+        context.scale(9, 3)
+        context.fillStyle = "red"
+        context.fillRect(10, 10, 8, 20)
+
+        // Reset current transformation matrix to the identity matrix
+        context.setTransform(1, 0, 0, 1, 0, 0)
+
+        // Non-scaled rectangle
+        context.fillStyle = "gray"
+        context.fillRect(10, 10, 8, 20)
+
+        context.restore()
+      },
+      reset() {
+        const context = this.canvasContext!
+        context.save()
+        this.clearCanvasRect()
+
+        // Set line width
+        context.lineWidth = 10
+        context.strokeStyle = '#00ff00'
+        // Stroke rect outline
+        context.strokeRect(50, 50, 150, 100)
+
+        // Create filled text
+        context.font = "50px serif";
+        context.fillText("Rect!", 70, 110)
+
+
+        context.lineWidth = 5
+
+        // Stroke out circle
+        context.beginPath();
+        context.arc(300, 100, 50, 0, 2 * Math.PI)
+        context.stroke();
+
+        // Create filled text
+        context.font = "25px sans-serif"
+        context.fillText("Circle!", 265, 100)
+        // context.reset()
+
+        hidpi(uni.getElementById("canvas") as UniCanvasElement)
+        context.restore()
+      },
+      translate() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // Moved square
+        context.translate(110, 30)
+        context.fillStyle = "red"
+        context.fillRect(0, 0, 80, 80)
+
+        // Reset current transformation matrix to the identity matrix
+        context.setTransform(1, 0, 0, 1, 0, 0)
+
+        // Unmoved square
+        context.fillStyle = "gray"
+        context.fillRect(0, 0, 80, 80)
+
+        context.restore()
+      },
+      save() {
+        const context = this.canvasContext!
+        this.clearCanvasRect()
+        context.save()
+        context.beginPath()
+        context.strokeStyle = '#00ff00'
+        context.scale(2, 2)
+        context.strokeStyle = '#ff0000'
+        context.rect(0, 0, 100, 100)
+        context.stroke()
+        context.restore()
+
+        context.save()
+        context.rect(0, 0, 50, 50)
+        context.stroke()
+
+        context.restore()
+      },
+      restore() {
+        const context = this.canvasContext!;
+        this.clearCanvasRect();
+        [3, 2, 1].forEach((item) => {
+          context.save()
+          context.beginPath()
+          context.scale(item, item)
+          context.rect(10, 10, 100, 100)
+          context.stroke()
+          context.restore()
+        })
+      },
+      drawImageLocal() {
+        const context = this.canvasContext!
+        this.clearCanvasRect()
+        const image = new Image(100, 100)
+        image.src = '../../../static/uni.png'
+        image.onload = () => {
+          context.drawImage(image, 0, 0, 100, 100)
+        }
+      },
       drawImage() {
         const context = this.canvasContext!
+        this.clearCanvasRect()
+        const image = new Image(100, 100);
+        image.src = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png'
+        image.onload = () => {
+          context.drawImage(image, 0, 0, 100, 100)
+        }
+      },
+      rect() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.beginPath()
+        context.rect(20, 20, 150, 100)
+        context.stroke()
+
+        context.restore()
+      },
+      quadraticCurveTo() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // Quadratic Bézier curve
+        context.beginPath()
+        context.moveTo(50, 20)
+        context.quadraticCurveTo(230, 30, 50, 100)
+        context.stroke()
+
+        // Start and end points
+        context.fillStyle = "blue"
+        context.beginPath()
+        context.arc(50, 20, 5, 0, 2 * Math.PI, true) // Start point
+        context.arc(50, 100, 5, 0, 2 * Math.PI, true) // End point
+        context.fill();
+
+        // Control point
+        context.fillStyle = "red"
+        context.beginPath()
+        context.arc(230, 30, 5, 0, 2 * Math.PI, true)
+        context.fill()
+
+        context.restore()
+      },
+      resetTransform() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        // Draw a rotated rectangle
+        context.rotate((45 * Math.PI) / 180)
+        context.fillRect(60, 0, 100, 30)
+
+        // Reset transformation matrix to the identity matrix
+        context.resetTransform()
+        context.fillStyle = "red"
+        context.fillRect(60, 0, 100, 30)
+
+        context.restore()
+      },
+      transform() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.transform(1, 0.2, 0.8, 1, 0, 0)
+        context.fillRect(0, 0, 100, 100)
+
+        context.restore()
+      },
+      setFillStyle() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect();
+        ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {
+          context.fillStyle = item
+          context.beginPath()
+          context.rect(0 + 75 * index, 0, 50, 50)
+          context.fill()
+        })
+
+        context.restore()
+      },
+      setStrokeStyle() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect();
+        ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {
+          context.strokeStyle = item
+          context.beginPath()
+          context.rect(0 + 75 * index, 0, 50, 50)
+          context.stroke()
+        })
 
+        context.restore()
+      },
+      setGlobalAlpha() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.fillStyle = '#000000';
+        [1, 0.5, 0.1].forEach((item : number, index : number) => {
+          context.globalAlpha = item
+          context.beginPath()
+          context.rect(0 + 75 * index, 0, 50, 50)
+          context.fill()
+        })
+        context.globalAlpha = 1
+
+        context.restore()
+      },
+      setFontSize() {
+        const context = this.canvasContext!
+
+        context.save();
+        [10, 20, 30, 40].forEach((item : number, index : number) => {
+          context.font = item + 'px serif'
+          context.fillText('Hello, world', 20, 20 + 40 * index)
+        })
+
+        context.restore()
+      },
+      setLineCap() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.lineWidth = 10;
+        ['butt', 'round', 'square'].forEach((item : string, index : number) => {
+          context.beginPath()
+          context.lineCap = item
+          context.moveTo(20, 20 + 20 * index)
+          context.lineTo(100, 20 + 20 * index)
+          context.stroke()
+        })
+
+        context.restore()
+      },
+      setLineJoin() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.lineWidth = 10;
+        ['bevel', 'round', 'miter'].forEach((item : string, index : number) => {
+          context.beginPath()
+          context.lineJoin = item
+          context.moveTo(20 + 80 * index, 20)
+          context.lineTo(100 + 80 * index, 50)
+          context.lineTo(20 + 80 * index, 100)
+          context.stroke()
+        })
+
+        context.restore()
+      },
+      setLineWidth() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect();
+        [2, 4, 6, 8, 10].forEach((item : number, index : number) => {
+          context.beginPath()
+          context.lineWidth = item
+          context.moveTo(20, 20 + 20 * index)
+          context.lineTo(100, 20 + 20 * index)
+          context.stroke()
+        })
+
+        context.restore()
+      },
+      lineDash() {
+        const context = this.canvasContext!
+
+        context.save();
+        this.clearCanvasRect()
+        context.setLineDash([4, 16])
+
+        // Dashed line with no offset
+        context.beginPath()
+        context.moveTo(0, 50)
+        context.lineTo(300, 50)
+        context.stroke()
+
+        // Dashed line with offset of 4
+        context.beginPath()
+        context.strokeStyle = "red"
+        context.lineDashOffset = 4
+        context.moveTo(0, 100)
+        context.lineTo(300, 100)
+        context.stroke()
+
+        context.restore()
+      },
+      setMiterLimit() {
+        const context = this.canvasContext!
+
+        context.save()
+        this.clearCanvasRect()
+        context.lineWidth = 4;
+        [2, 4, 6, 8, 10].forEach((item : number, index : number) => {
+          context.beginPath()
+          context.miterLimit = item
+          context.moveTo(20 + 80 * index, 20)
+          context.lineTo(100 + 80 * index, 50)
+          context.lineTo(20 + 80 * index, 100)
+          context.stroke()
+        })
+
+        context.restore()
+      },
+      measureText() {
+        const context = this.canvasContext!
+
+        context.save()
         this.clearCanvasRect()
         const text = "uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎"
 
         context.font = "20px 宋体"
+
         context.fillStyle = "red"
         context.fillText(text, 0, 60)
         const textMetrics = context.measureText(text)
@@ -142,9 +973,6 @@
         context.fillText("measure text width:" + textMetrics.width, 40, 80)
 
         context.restore()
-      },
-      clearCanvasRect() {
-        this.canvasContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
       }
     }
   }
@@ -176,4 +1004,21 @@
   .btn-to-image {
     margin: 10px;
   }
+
+  .grid-item {
+    width: 50%;
+    padding: 5px;
+  }
+
+  .btn-to-image {
+    margin: 10px;
+  }
+
+  .text-group {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 10px;
+  }
 </style>
-- 
GitLab