diff --git a/src/ChineseChess.js b/src/ChineseChess.js
index fe34fee..54e3191 100644
--- a/src/ChineseChess.js
+++ b/src/ChineseChess.js
@@ -22,6 +22,28 @@ class Chessman {
     }
 }
 
+// 单独绘制棋盘
+export function 棋盘(比例, 边距, 背景色='#ffeedd', 线条色='#784518', 线条宽度=2) {
+    const 宽度 = (比例 * 8) + (边距 * 2)
+    const 高度 = (比例 * 9) + (边距 * 2)
+    const 画布 = createElement({ width: 宽度, height: 高度 }, 'canvas')
+
+    const ctx = 画布.getContext('2d')
+    ctx.strokeStyle = 线条色
+    ctx.lineWidth = 线条宽度
+
+    // 横线竖线
+    for (let i = 0; i < 10; i++) {
+        ctx.moveTo(边距, 比例 * i + 边距)
+        ctx.lineTo(比例 * 8 + 边距, 比例 * i + 边距)
+        ctx.moveTo(比例 * i + 边距, 边距)
+        ctx.lineTo(比例 * i + 边距, 比例 * 9 + 边距)
+    }
+
+    画布.style.backgroundColor = 背景色
+    document.body.appendChild(画布)
+}
+
 // 棋盘
 export class Chessboard {
     constructor() {
@@ -32,79 +54,77 @@ export class Chessboard {
         this.operation = '';
     }
     // 初始化绘制棋盘
-    draw() {
-        const canvas = createElement({ width: 440, height: 500 }, 'canvas')
+    绘制棋盘({比例, 边距, 背景色='#ffeedd', 线条色='#784518', 线条宽度=2}) {
+        const 宽度 = (比例 * 8) + (边距 * 2)
+        const 高度 = (比例 * 9) + (边距 * 2)
+
+        const canvas = createElement({ width: 宽度, height: 高度 }, 'canvas')
         const context = canvas.getContext('2d')
 
-        // 设置线条颜色
-        context.strokeStyle = '#784518'
-
-        // 设置线条宽度
-        context.lineWidth = 2
-
-        const width = 800 / 4 / 4
+        context.strokeStyle = 线条色
+        context.lineWidth = 线条宽度
 
         // 横线竖线
         for (let i = 0; i < 5; i++) {
-            context.moveTo(0, width * i)
-            context.lineTo(width * 4, width * i)
-            context.moveTo(width * i, 0)
-            context.lineTo(width * i, width * 4)
+            context.moveTo(0, 比例 * i)
+            context.lineTo(比例 * 4, 比例 * i)
+            context.moveTo(比例 * i, 比例 * 0)
+            context.lineTo(比例 * i, 比例 * 4)
         }
 
         // 斜线
-        context.moveTo(width * 3, width * 0)
-        context.lineTo(width * 4, width * 1)
-        context.moveTo(width * 4, width * 1)
-        context.lineTo(width * 3, width * 2)
+        context.moveTo(比例 * 3, 比例 * 0)
+        context.lineTo(比例 * 4, 比例 * 1)
+        context.moveTo(比例 * 4, 比例 * 1)
+        context.lineTo(比例 * 3, 比例 * 2)
 
         // 炮位置
-        context.moveTo(width * 1 - 4, width * 2 - 9)
-        context.lineTo(width * 1 - 4, width * 2 - 4)
-        context.lineTo(width * 1 - 9, width * 2 - 4)
-        context.moveTo(width * 1 + 4, width * 2 - 9)
-        context.lineTo(width * 1 + 4, width * 2 - 4)
-        context.lineTo(width * 1 + 9, width * 2 - 4)
-        context.moveTo(width * 1 - 4, width * 2 + 9)
-        context.lineTo(width * 1 - 4, width * 2 + 4)
-        context.lineTo(width * 1 - 9, width * 2 + 4)
-        context.moveTo(width * 1 + 4, width * 2 + 9)
-        context.lineTo(width * 1 + 4, width * 2 + 4)
-        context.lineTo(width * 1 + 9, width * 2 + 4)
+        context.moveTo(比例 * 1 - 4, 比例 * 2 - 9)
+        context.lineTo(比例 * 1 - 4, 比例 * 2 - 4)
+        context.lineTo(比例 * 1 - 9, 比例 * 2 - 4)
+        context.moveTo(比例 * 1 + 4, 比例 * 2 - 9)
+        context.lineTo(比例 * 1 + 4, 比例 * 2 - 4)
+        context.lineTo(比例 * 1 + 9, 比例 * 2 - 4)
+        context.moveTo(比例 * 1 - 4, 比例 * 2 + 9)
+        context.lineTo(比例 * 1 - 4, 比例 * 2 + 4)
+        context.lineTo(比例 * 1 - 9, 比例 * 2 + 4)
+        context.moveTo(比例 * 1 + 4, 比例 * 2 + 9)
+        context.lineTo(比例 * 1 + 4, 比例 * 2 + 4)
+        context.lineTo(比例 * 1 + 9, 比例 * 2 + 4)
 
         // 兵位置
-        context.moveTo(width * 0 - 4, width * 3 - 9)
-        context.lineTo(width * 0 - 4, width * 3 - 4)
-        context.lineTo(width * 0 - 9, width * 3 - 4)
-        context.moveTo(width * 0 + 4, width * 3 - 9)
-        context.lineTo(width * 0 + 4, width * 3 - 4)
-        context.lineTo(width * 0 + 9, width * 3 - 4)
-        context.moveTo(width * 2 - 4, width * 3 - 9)
-        context.lineTo(width * 2 - 4, width * 3 - 4)
-        context.lineTo(width * 2 - 9, width * 3 - 4)
-        context.moveTo(width * 2 + 4, width * 3 - 9)
-        context.lineTo(width * 2 + 4, width * 3 - 4)
-        context.lineTo(width * 2 + 9, width * 3 - 4)
-        context.moveTo(width * 4 - 4, width * 3 - 9)
-        context.lineTo(width * 4 - 4, width * 3 - 4)
-        context.lineTo(width * 4 - 9, width * 3 - 4)
+        context.moveTo(比例 * 0 - 4, 比例 * 3 - 9)
+        context.lineTo(比例 * 0 - 4, 比例 * 3 - 4)
+        context.lineTo(比例 * 0 - 9, 比例 * 3 - 4)
+        context.moveTo(比例 * 0 + 4, 比例 * 3 - 9)
+        context.lineTo(比例 * 0 + 4, 比例 * 3 - 4)
+        context.lineTo(比例 * 0 + 9, 比例 * 3 - 4)
+        context.moveTo(比例 * 2 - 4, 比例 * 3 - 9)
+        context.lineTo(比例 * 2 - 4, 比例 * 3 - 4)
+        context.lineTo(比例 * 2 - 9, 比例 * 3 - 4)
+        context.moveTo(比例 * 2 + 4, 比例 * 3 - 9)
+        context.lineTo(比例 * 2 + 4, 比例 * 3 - 4)
+        context.lineTo(比例 * 2 + 9, 比例 * 3 - 4)
+        context.moveTo(比例 * 4 - 4, 比例 * 3 - 9)
+        context.lineTo(比例 * 4 - 4, 比例 * 3 - 4)
+        context.lineTo(比例 * 4 - 9, 比例 * 3 - 4)
 
         // 兵位置向上镜像
-        context.moveTo(width * 0 - 4, width * 3 + 9)
-        context.lineTo(width * 0 - 4, width * 3 + 4)
-        context.lineTo(width * 0 - 9, width * 3 + 4)
-        context.moveTo(width * 0 + 4, width * 3 + 9)
-        context.lineTo(width * 0 + 4, width * 3 + 4)
-        context.lineTo(width * 0 + 9, width * 3 + 4)
-        context.moveTo(width * 2 - 4, width * 3 + 9)
-        context.lineTo(width * 2 - 4, width * 3 + 4)
-        context.lineTo(width * 2 - 9, width * 3 + 4)
-        context.moveTo(width * 2 + 4, width * 3 + 9)
-        context.lineTo(width * 2 + 4, width * 3 + 4)
-        context.lineTo(width * 2 + 9, width * 3 + 4)
-        context.moveTo(width * 4 - 4, width * 3 + 9)
-        context.lineTo(width * 4 - 4, width * 3 + 4)
-        context.lineTo(width * 4 - 9, width * 3 + 4)
+        context.moveTo(比例 * 0 - 4, 比例 * 3 + 9)
+        context.lineTo(比例 * 0 - 4, 比例 * 3 + 4)
+        context.lineTo(比例 * 0 - 9, 比例 * 3 + 4)
+        context.moveTo(比例 * 0 + 4, 比例 * 3 + 9)
+        context.lineTo(比例 * 0 + 4, 比例 * 3 + 4)
+        context.lineTo(比例 * 0 + 9, 比例 * 3 + 4)
+        context.moveTo(比例 * 2 - 4, 比例 * 3 + 9)
+        context.lineTo(比例 * 2 - 4, 比例 * 3 + 4)
+        context.lineTo(比例 * 2 - 9, 比例 * 3 + 4)
+        context.moveTo(比例 * 2 + 4, 比例 * 3 + 9)
+        context.lineTo(比例 * 2 + 4, 比例 * 3 + 4)
+        context.lineTo(比例 * 2 + 9, 比例 * 3 + 4)
+        context.moveTo(比例 * 4 - 4, 比例 * 3 + 9)
+        context.lineTo(比例 * 4 - 4, 比例 * 3 + 4)
+        context.lineTo(比例 * 4 - 9, 比例 * 3 + 4)
 
         // 描绘线条
         context.stroke()
@@ -118,51 +138,46 @@ export class Chessboard {
         context.save()                                               // 保存当前状态
         context.translate(0, 0)                                      // 移动到要镜像的区域
         context.scale(1, -1)                                         // Y轴镜像
-        context.drawImage(canvas, 0, 0, 800, 400, 0, -400 - width, 800, 400) // 将上半部分镜像到下半部分
+        context.drawImage(canvas, 0, 0, 800, 400, 0, -400 - 比例, 800, 400) // 将上半部分镜像到下半部分
         context.restore()                                            // 恢复到上次保存的状态
 
         // 河界
         context.font = '20px serif'
         context.fillStyle = '#784518'
-        context.fillText('楚', width * 1.5, width * 4.65)
-        context.fillText('河', width * 2.5, width * 4.65)
-        context.fillText('漢', width * 5.5, width * 4.65)
-        context.fillText('界', width * 6.5, width * 4.65)
+        context.fillText('楚', 比例 * 1.5, 比例 * 4.65)
+        context.fillText('河', 比例 * 2.5, 比例 * 4.65)
+        context.fillText('漢', 比例 * 5.5, 比例 * 4.65)
+        context.fillText('界', 比例 * 6.5, 比例 * 4.65)
 
         var img = new Image()
         img.onload = function () {
-            // 清除原始的canvas
             context.clearRect(0, 0, canvas.width, canvas.height)
-            // 将Image对象的内容绘制回原始的canvas，但是向右和向下偏移20px
-            context.drawImage(img, 20, 20)
-            
-            // 重新描绘线条
-            context.beginPath()
-            
+            context.drawImage(img, 边距, 边距)
+            context.beginPath() // 重新描绘线条
             // 棋盘描边
-            context.moveTo(20, 20)
-            context.lineTo(20, width * 9.4)
-            context.lineTo(width * 8.4, width * 9.4)
-            context.lineTo(width * 8.4, 20)
-            context.lineTo(20, 20)
+            context.moveTo(边距, 边距)
+            context.lineTo(边距, 边距 + (比例 * 9))
+            context.lineTo(边距 + (比例 * 8), 边距 + (比例 * 9))
+            context.lineTo(边距 + (比例 * 8), 边距)
+            context.lineTo(边距, 边距)
             context.stroke()
-        };
+        }
         img.src = canvas.toDataURL()
 
         canvas.style.backgroundColor = '#ffeedd'
         document.body.appendChild(canvas)
+
+        // 单独保存绘制好的棋盘
+        const chessboard = canvas.toDataURL()
+
+        this.drawChessman(context, '車', 'red', { top: 0, left: 0 })
     }
-    // 初始化绘制棋子
-    drawChessman() {
-        const chessman = createElement({
-            style: {
-                backgroundColor: '#f00',
-                width: '50px',
-                height: '50px',
-            },
-            innerText: '棋子',
-        });
-        document.body.appendChild(chessman);
+    // canvas绘制棋子
+    drawChessman(context, name, color, position = { top: 0, left: 0 }) {
+        context.font = '20px serif'
+        context.fillStyle = color
+        context.fillText(name, position.left, position.top)
+        context.stroke()
     }
 }
 
diff --git a/src/main.js b/src/main.js
index 5f82794..cba247b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,11 +11,11 @@ window.Buffer = Buffer
 window.process = process
 import { parseBlob } from 'music-metadata-browser'
 
-import { Chessboard } from './ChineseChess.js'
+import { Chessboard, 棋盘 } from './ChineseChess.js'
 
 // 中国象棋
 const chessboard = new Chessboard()
-chessboard.draw()
+chessboard.绘制棋盘({比例: 50, 边距: 20})
 
 // 缓冲分片发送
 const CHUNK_SIZE = 1024 * 64  // 默认每个块的大小为128KB