From e5f0837e0d71f730650866c447639e5e97c85c4d Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Mon, 24 Jun 2024 16:45:54 +0800
Subject: [PATCH] =?UTF-8?q?canvas:=20=E5=A2=9E=E5=8A=A0=E9=AB=98=E6=B8=85?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=EF=BC=8CAPI=20=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E6=8C=87=E5=90=91=20mdn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/canvas.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/component/canvas.md b/docs/component/canvas.md
index b8c63b92..20667066 100644
--- a/docs/component/canvas.md
+++ b/docs/component/canvas.md
@@ -15,3 +15,30 @@
 <!-- UTSCOMJSON.canvas.example -->
 
 <!-- UTSCOMJSON.canvas.reference -->
+
+## API
+
+和 W3C 规范保持一致 [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas)
+
+**注意事项**@hidpi
+
+uni-app 1 canvas 组件内部默认处理了高清逻辑，uni-app x 和 W3C 规范一致，需要开发者根据自己的场景手动处理
+
+```html
+<template>
+  <canvas id="canvas"></canvas>
+</template>
+<script setup>
+// 获取 canvas element
+const canvas = uni.getElementById("canvas") as UniCanvasElement
+const context = canvas.getContext("2d")!;
+
+// 处理高清屏逻辑
+const dpr = uni.getSystemInfoSync().pixelRatio;
+canvas.width = canvas.offsetWidth * dpr;
+canvas.height = canvas.offsetHeight * dpr;
+context.scale(dpr, dpr); // 仅需调用一次，当调用 reset 方法后需要再次 scale
+
+// 省略绘制代码，和 w3c 规范保持一致
+</script>
+```
-- 
GitLab