From 9dfbb9cd2989c1591d1e99b487722f91e571e510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Wed, 1 Nov 2023 00:42:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A3=8B=E7=9B=98=E6=9F=93=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ChineseChess.js | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/ChineseChess.js b/src/ChineseChess.js
index 1799b17..4fdf234 100644
--- a/src/ChineseChess.js
+++ b/src/ChineseChess.js
@@ -33,11 +33,14 @@ export class Chessboard {
     }
     // 初始化绘制棋盘
     draw() {
-        const canvas = createElement({ width: 800, height: 800 }, 'canvas')
+        const canvas = createElement({ width: 440, height: 500 }, 'canvas')
         const context = canvas.getContext('2d')
 
         // 设置线条颜色
-        context.strokeStyle = '#000'
+        context.strokeStyle = '#784518'
+
+        // 设置线条宽度
+        context.lineWidth = 2
 
         const width = 800 / 4 / 4
 
@@ -85,7 +88,7 @@ export class Chessboard {
         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(width * 0 - 4, width * 3 + 9)
         context.lineTo(width * 0 - 4, width * 3 + 4)
@@ -120,11 +123,33 @@ export class Chessboard {
 
         // 河界
         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)
 
+        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.moveTo(10, 10)
+            context.lineTo(10, width * 9.6)
+            context.lineTo(width * 8.6, width * 9.6)
+            context.lineTo(width * 8.6, 10)
+            context.lineTo(10, 10)
+            context.stroke()
+        };
+        img.src = canvas.toDataURL()
+
+        canvas.style.backgroundColor = '#ffeedd'
         document.body.appendChild(canvas)
     }
     // 初始化绘制棋子