我有一个问题,画布上没有绘制所有图像(只有一些被绘制)在特定设备上。
确切地说移动的Chrome(Samsung),到目前为止,我在任何其他设备上都没有遇到过这个问题。
const drawSymbol = (
ctx: CanvasRenderingContext2D,
symbol: CardSymbol,
image: HTMLImageElement,
) => {
window.requestAnimationFrame(() => {
ctx.drawImage(
image,
symbol.x,
symbol.y,
symbol.width,
symbol.height,
);
});
};
useEffect(() => {
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const symbol of card) {
const image = images[symbol.image.id];
if (image.loadedImg) {
drawSymbol(ctx, symbol, image.loadedImg);
} else {
const img = new Image();
img.onload = () => {
image.loadedImg = img; // Cache loaded image
drawSymbol(ctx, symbol, img);
};
img.src = image.src;
}
}
}
}
}, [card]);
有些图像看起来像是画出来的,而有些则不是。我注意到有时候图像的一部分被画出来,然后被删除,另一部分被画出来,但我不能确认这是否真的发生了,因为很难发现(毫秒)。有人知道为什么会发生这种情况吗?
你认为一个window.requestAnimationFrame
的所有图像可以解决这个问题吗?
1条答案
按热度按时间qyswt5oh1#
好吧,我设法解决了这个问题,首先收集所有的图像,然后只用一个
requestAnimationFrame
来绘制图像。