feat: 添加 createCanvasContextAsync 页面

pages.json

@@ -1091,6 +1091,15 @@
 				"navigationBarTitleText": "createSelectorQuery | 创建 SelectorQuery 实例"
 			}
 		},
+		// #ifdef APP-IOS
+		{
+			"path": "pages/API/create-canvas-context-async/create-canvas-context-async",
+			"group": "1,3,2",
+			"style": {
+				"navigationBarTitleText": "createCanvasContextAsync | 创建 Canvas 实例"
+			}
+		},
+		// #endif
 		{
 			"path": "pages/API/resize-observer/resize-observer",
 			"group": "1,30",
@@ -2084,6 +2093,10 @@
 						{
 							"id": "api.dom.createSelectorQuery",
 							"name": "createSelectorQuery"
+						},
+						{
+							"id": "api.dom.createCanvasContextAsync",
+							"name": "createCanvasContextAsync"
 						}
 					]
 				},

pages/API/create-canvas-context-async/child-canvas.uvue

+<template>
+  <view>
+    <canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        context: null as CanvasRenderingContext2D | null
+      }
+    },
+    getContext() {
+      return {
+        ctx: typeof this.context,
+        hasFillRect: typeof this.context?.fillRect === 'function',
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        uni.createCanvasContextAsync({
+          id: 'canvas',
+          component: this,
+          success: (res : CanvasContext) => {
+            console.log('child component', res);
+            this.context = res.getContext('2d');
+            // 若干绘制调用
+            // 绘制红色正方形
+            this.context.fillStyle = "rgb(200, 0, 0)";
+            this.context.fillRect(10, 10, 50, 50);
+
+            // 绘制蓝色半透明正方形
+            this.context.fillStyle = "rgba(0, 0, 200, 0.5)";
+            this.context.fillRect(30, 30, 50, 50);
+            this.context.draw();
+          },
+          fail: (err : UniError) => {
+          }
+        })
+      })
+    }
+  }
+</script>

pages/API/create-canvas-context-async/create-canvas-context-async.test.js

+const PAGE_PATH = '/pages/API/create-canvas-context-async/create-canvas-context-async'
+
+describe('create-canvas-context-async', () => {
+	if (!process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
+		it('ios only', () => {
+			expect(1).toBe(1)
+		})
+		return
+	}
+	let page
+	beforeAll(async () => {
+		page = await program.reLaunch(PAGE_PATH)
+		await page.waitFor('view')
+	})
+
+	it('page canvas', async () => {
+		await page.waitFor(100)
+		const data = await page.callMethod('getContext')
+		expect(data.ctx).toBe('object')
+		expect(data.hasFillRect).toBe(true)
+	})
+
+	it('component canvas', async () => {
+		// child-canvas
+		await page.waitFor(100)
+		// const element = await page.$('.node-child-component')
+		const element = await page.$('child-canvas')
+		const data = await page.callMethod('getContext')
+		expect(data.ctx).toBe('object')
+		expect(data.hasFillRect).toBe(true)
+	})
+})

pages/API/create-canvas-context-async/create-canvas-context-async.uvue

+<template>
+  <view>
+    <view>create canvas context async</view>
+    <canvas id="canvas" class="canvas-home" style="height: 100px;border: 1px solid blue;"></canvas>
+    <view style="margin-top: 30px;"></view>
+    <child-canvas class="node-child-component" />
+  </view>
+</template>
+
+<script>
+  import childCanvas from './child-canvas.uvue';
+  export default {
+    components: {
+      childCanvas
+    },
+    data() {
+      return {
+        context: null as CanvasRenderingContext2D | null
+      }
+    },
+    methods: {
+      // 自动化测试
+      getContext() {
+        return {
+          ctx: typeof this.context,
+          hasFillRect: typeof this.context?.fillRect === 'function',
+        }
+      },
+      drawImage() {
+        console.log(876);
+        uni.createCanvasContextAsync({
+          id: 'canvas',
+          component: null,
+          success: (res : CanvasContext) => {
+            this.context = res.getContext('2d');
+            // 若干绘制调用
+            // 绘制红色正方形
+            this.context.fillStyle = "rgb(200, 0, 0)";
+            this.context.fillRect(10, 10, 50, 50);
+
+            // 绘制蓝色半透明正方形
+            this.context.fillStyle = "rgba(0, 0, 200, 0.5)";
+            this.context.fillRect(30, 30, 50, 50);
+            this.context.draw();
+          },
+          fail: (err : UniError) => {
+          }
+        })
+      }
+    },
+    onReady() {
+      this.drawImage()
+    }
+  }
+</script>