docs: 文档里添加 playground 代码演示 (#1427)

packages/site/docs/tutorial/shape.zh.md

@@ -49,6 +49,10 @@ F2 底层使用了 [G](https://g.antv.vision/zh/docs/api/shape/attrs) 绘图引
 | `shadowOffsetY` | Number | 描述阴影垂直偏移距离的属性，参见 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY)。 |
 | `opacity` | Number | 设置图形和图片透明度的属性，默认值是 1。 数值的范围从 0.0 （完全透明）到 1.0 （完全不透明）。 |
 
+### 演示
+
+<playground path="docs/shape/demo/shape.jsx"></playground>
+
 ## group
 
 包含一组图形
@@ -227,6 +231,8 @@ F2 底层使用了 [G](https://g.antv.vision/zh/docs/api/shape/attrs) 绘图引
 
 | **属性名** | **类型** | **描述** |
 | --- | --- | --- |
+| `x` | Number | 文本位置 |
+| `y` | Number | 文本位置 |
 | `text` | String | 文本内容 |
 | `textAlign` | String | 设置文本内容的当前对齐方式, 支持的属性：'start', 'center', 'end', 'left', 'right' |
 | `textBaseline` | String | 设置在绘制文本时使用的当前文本基线, 支持的属性：'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom' |
@@ -242,7 +248,7 @@ F2 底层使用了 [G](https://g.antv.vision/zh/docs/api/shape/attrs) 绘图引
 ```jsx
 <text
   attrs={{
-    text: '文本内容',
+    text: '文本',
     fontSize: 20,
     fill: '#000',
   }}

packages/site/examples/docs/shape/demo/shape.jsx

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import { jsx, Canvas } from '@antv/f2';
+
+const canvasEl = document.createElement('canvas');
+document.getElementById('container').appendChild(canvasEl);
+const context = canvasEl.getContext('2d');
+
+const Shape = () => {
+  return (
+    <group>
+      <rect
+        attrs={{
+          x: 10,
+          y: 10,
+          width: 40,
+          height: 40,
+          lineWidth: '2px',
+          stroke: '#000',
+          fill: 'red',
+        }}
+      />
+      <circle attrs={{ x: 80, y: 30, r: 20, lineWidth: '2px', stroke: '#000', fill: 'red' }} />
+      <text
+        attrs={{
+          x: 120,
+          y: 30,
+          text: '文本',
+          fontSize: 20,
+          fill: '#000',
+        }}
+      />
+    </group>
+  );
+};
+
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Shape />
+  </Canvas>
+);
+
+const chart = new Canvas(props);
+chart.render();