棋子
This commit is contained in:
parent
da3b4e19e9
commit
73d895dc2b
@ -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()
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user