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

棋子

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

71
src/ChineseChess.js
View File

@ -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()
}
}