棋盘染色

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)
     }
     // 初始化绘制棋子