diff --git a/src/ChineseChess.js b/src/ChineseChess.js index 0141765..4d6e780 100644 --- a/src/ChineseChess.js +++ b/src/ChineseChess.js @@ -23,7 +23,7 @@ class Chessman { } // 单独绘制棋盘 -export function 棋盘(比例, 边距, 背景色='#ffeedd', 线条色='#784518', 线条宽度=2) { +export function 棋盘(比例, 边距, 背景色 = '#ffeedd', 线条色 = '#784518', 线条宽度 = 2) { const 宽度 = (比例 * 8) + (边距 * 2) const 高度 = (比例 * 9) + (边距 * 2) const 画布 = createElement({ width: 宽度, height: 高度 }, 'canvas') @@ -54,7 +54,7 @@ export class Chessboard { this.operation = ''; } // 初始化绘制棋盘 - 绘制棋盘({比例, 边距, 背景色='#ffeedd', 线条色='#784518', 线条宽度=2}) { + 绘制棋盘({ 比例, 边距, 背景色 = '#ffeedd', 线条色 = '#784518', 线条宽度 = 2 }) { const 宽度 = (比例 * 8) + (边距 * 2) const 高度 = (比例 * 9) + (边距 * 2) @@ -132,17 +132,17 @@ export class Chessboard { context.save() // 保存当前状态 context.translate(0, 0) // 移动到要镜像的区域 context.scale(-1, 1) // X轴镜像 - context.drawImage(canvas, 0, 0, 比例*4, 比例*8, -(比例*8), 0, 比例*4, 比例*8) // 将左上角的区域复制并镜像到右上角 + context.drawImage(canvas, 0, 0, 比例 * 4, 比例 * 8, -(比例 * 8), 0, 比例 * 4, 比例 * 8) // 将左上角的区域复制并镜像到右上角 context.restore() // 恢复到上次保存的状态 context.save() // 保存当前状态 context.translate(0, 0) // 移动到要镜像的区域 context.scale(1, -1) // Y轴镜像 - context.drawImage(canvas, 0, 0, 比例*8, 比例*4+(线条宽度/2), 0, -(比例*9), 比例*8, 比例*4+(线条宽度/2)) // 将上半部分镜像到下半部分 + context.drawImage(canvas, 0, 0, 比例 * 8, 比例 * 4 + (线条宽度 / 2), 0, -(比例 * 9), 比例 * 8, 比例 * 4 + (线条宽度 / 2)) // 将上半部分镜像到下半部分 context.restore() // 恢复到上次保存的状态 // 河界 - context.font = `${比例/2.4}px serif` + context.font = `${比例 / 2.4}px serif` context.fillStyle = '#784518' context.fillText('楚', 比例 * 1.5, 比例 * 4.65) context.fillText('河', 比例 * 2.5, 比例 * 4.65) @@ -150,7 +150,7 @@ export class Chessboard { context.fillText('界', 比例 * 6.5, 比例 * 4.65) var img = new Image() - img.onload = function () { + img.onload = () => { context.clearRect(0, 0, canvas.width, canvas.height) context.drawImage(img, 边距, 边距) context.beginPath() // 重新描绘线条 @@ -161,22 +161,77 @@ export class Chessboard { context.lineTo(边距 + (比例 * 8), 边距) context.lineTo(边距, 边距) context.stroke() + + //// 绘制棋子们 + //context.font = '20px serif' + //context.fillStyle = 'red' + //context.fillText('車', 0+边距-(比例/5), 20+边距-(比例/5)) + //context.stroke() + //// 绘制棋子们 + //context.font = '20px serif' + //context.fillStyle = 'red' + //context.fillText('馬', 0+边距-(比例/5) + (比例*1), 20+边距-(比例/5)) + //context.stroke() + + // 单独保存绘制好的棋盘 + const chessboard = canvas.toDataURL() + + // 红方棋子 + this.drawChessman({context, name:'車', color:'#cc1414', position:{x:0, y:0}, 边距, 比例}) + this.drawChessman({context, name:'馬', color:'#cc1414', position:{x:1, y:0}, 边距, 比例}) + this.drawChessman({context, name:'相', color:'#cc1414', position:{x:2, y:0}, 边距, 比例}) + this.drawChessman({context, name:'仕', color:'#cc1414', position:{x:3, y:0}, 边距, 比例}) + this.drawChessman({context, name:'将', color:'#cc1414', position:{x:4, y:0}, 边距, 比例}) + this.drawChessman({context, name:'仕', color:'#cc1414', position:{x:5, y:0}, 边距, 比例}) + this.drawChessman({context, name:'相', color:'#cc1414', position:{x:6, y:0}, 边距, 比例}) + this.drawChessman({context, name:'馬', color:'#cc1414', position:{x:7, y:0}, 边距, 比例}) + this.drawChessman({context, name:'車', color:'#cc1414', position:{x:8, y:0}, 边距, 比例}) + this.drawChessman({context, name:'砲', color:'#cc1414', position:{x:1, y:2}, 边距, 比例}) + this.drawChessman({context, name:'砲', color:'#cc1414', position:{x:7, y:2}, 边距, 比例}) + this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:0, y:3}, 边距, 比例}) + this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:2, y:3}, 边距, 比例}) + this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:4, y:3}, 边距, 比例}) + this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:6, y:3}, 边距, 比例}) + this.drawChessman({context, name:'兵', color:'#cc1414', position:{x:8, y:3}, 边距, 比例}) + + // 绿方棋子 + this.drawChessman({context, name:'車', color:'#14cc14', position:{x:0, y:9}, 边距, 比例}) + this.drawChessman({context, name:'馬', color:'#14cc14', position:{x:1, y:9}, 边距, 比例}) + this.drawChessman({context, name:'象', color:'#14cc14', position:{x:2, y:9}, 边距, 比例}) + this.drawChessman({context, name:'士', color:'#14cc14', position:{x:3, y:9}, 边距, 比例}) + this.drawChessman({context, name:'帥', color:'#14cc14', position:{x:4, y:9}, 边距, 比例}) + this.drawChessman({context, name:'士', color:'#14cc14', position:{x:5, y:9}, 边距, 比例}) + this.drawChessman({context, name:'象', color:'#14cc14', position:{x:6, y:9}, 边距, 比例}) + this.drawChessman({context, name:'馬', color:'#14cc14', position:{x:7, y:9}, 边距, 比例}) + this.drawChessman({context, name:'車', color:'#14cc14', position:{x:8, y:9}, 边距, 比例}) + this.drawChessman({context, name:'炮', color:'#14cc14', position:{x:1, y:7}, 边距, 比例}) + this.drawChessman({context, name:'炮', color:'#14cc14', position:{x:7, y:7}, 边距, 比例}) + this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:0, y:6}, 边距, 比例}) + this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:2, y:6}, 边距, 比例}) + this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:4, y:6}, 边距, 比例}) + this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:6, y:6}, 边距, 比例}) + this.drawChessman({context, name:'卒', color:'#14cc14', position:{x:8, y:6}, 边距, 比例}) + } img.src = canvas.toDataURL() canvas.style.backgroundColor = '#ffeedd' + canvas.style.margin = '1rem' document.body.appendChild(canvas) - - // 单独保存绘制好的棋盘 - const chessboard = canvas.toDataURL() - - this.drawChessman(context, '車', 'red', { top: 0, left: 0 }) } // canvas绘制棋子 - drawChessman(context, name, color, position = { top: 0, left: 0 }) { + drawChessman({context, name, color, position = { x: 0, y: 0 }, 边距, 比例}) { + // 先画圆形象棋子 + context.beginPath() + context.arc(边距+(比例*position.x), 边距+(比例*position.y), 比例/3, 0, 2*Math.PI) + context.fillStyle = '#ffeedd' + context.fill() + context.stroke() + + // 再画文字 context.font = '20px serif' context.fillStyle = color - context.fillText(name, position.left, position.top) + context.fillText(name, 边距+(比例*position.x)-(比例/5), 20+边距-(比例/4) + (比例*position.y)) context.stroke() } }