如何解决在画布上重新绘制相同的图像
我正在下棋。我目前的想法是移动一块后,我将重画所有电路板(目前可能不好)
我对重绘图像有问题,一张图像一开始只绘制一次,而从不重绘。
这是我的drawPiece()
函数:
drawPieces() {
const ctx = this.canvas.getContext('2d');
const piecesOnBoard = this.boardStatus.split("_");
for (let key in this.images) {
const image = this.images[key];
image[1].onload = function () {
for (let i = 0; i < piecesOnBoard.length; i++) {
let x = piecesOnBoard[i].charAt(0);
let y = piecesOnBoard[i].charAt(1);
let piece = piecesOnBoard[i].substring(2);
if (image[0] === piece) {
ctx.drawImage(image[1],(Canvas.CELL_SIZE + 1) * y + 1,(Canvas.CELL_SIZE + 1) * x + 1,Canvas.CELL_SIZE,Canvas.CELL_SIZE);
console.log("draw " + image[1] + 'done');
}
}
}
}
}
然后,移动一块后,我通过调用再次画板:
ctx.clearRect(0,canvas.clientWidth,canvas.clientHeight);// clear all canvas
board.drawBlankBoard(); // redraw blank board - This working
board.drawPieces(); // redraw piece image - this NOT working
我有2个问题:
-
如何重绘相同图像(解决我的问题)?
-
哪种解决方案可以改善性能,而不是目前的解决方案?
感谢帮助!
解决方法
除非已更改onload
,否则src
回调将不会在图像加载后再次触发
将功能更改为下面的代码片段。
您使用了一些老式的模式,一些有关代码的指针
- 使用
for of
。不要使用for in
- 通过括号符号访问字符串中的字符。例如
str[idx]
而不是str.charAt(idx)
- 使用
String.slice
而不是String.subString
摘要
const ctx = this.canvas.getContext('2d'); // do once
drawPieces() {
const C_SIZE = Canvas.CELL_SIZE;
const status = this.boardStatus.split("_");
for (const image of Object.values(this.images)) {
for (const pieceOnBoard of status) {
if (image[0] === pieceOnBoard.slice(2)) {
const x = pieceOnBoard[0] * (C_SIZE + 1) + 1;
const y = pieceOnBoard[1] * (C_SIZE + 1) + 1;
ctx.drawImage(image[1],y,x,C_SIZE,C_SIZE);
}
}
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。