LaniakeaSupercluster/webrtc
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

棋子

Browse Source
This commit is contained in:
觉 2023-11-01 20:00:22 +08:00
parent da3b4e19e9
commit 73d895dc2b
1 changed files with 68 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/ChineseChess.js
View File

@ -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()
}
img.src = canvas.toDataURL()
canvas.style.backgroundColor = '#ffeedd'
document.body.appendChild(canvas)
//// 绘制棋子们
//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, '車', 'red', { top: 0, left: 0 })
// 红方棋子
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)
}
// 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()
}
}