我正在使用画布根据用户创建的角色显示故事的各个阶段。画布加载背景,然后在其顶部呈现用户创建的字符。以下是我用来绘制canvas元素的函数(我正在使用react)。它在chrome上可以正常工作,但在Firefox上不显示字符。我已经检查过以确保API能够提供所有正确的响应,因此图像请求不是问题。
这是我编写的用于加载图像然后渲染canvas元素的函数:
const can0 = document.getElementById(props.id)
const ctx0 = can0.getContext('2d', false)
const bg = new Image()
let bgLoaded = false
const char = new Image()
let charLoaded = false
bg.src = 'http://localhost:4000/story/' + props.getStage + '/' + props.bg
bg.onload = () => {
bgLoaded = true
can0.height = bg.height
can0.width = bg.width
if (charLoaded) {
ctx0.drawImage(bg, 0, 0, can0.width, can0.height)
ctx0.drawImage(char, can0.width / 2.5, can0.height / 2.2, char.width * 12, char.height * 12.1)
}
}
char.src =
'http://localhost:4000/character/' +
con.getChar.gender +
'/shihtzu/' +
con.getChar.color +
'/' +
props.pose
char.onload = () => {
charLoaded = true
if (bgLoaded) {
ctx0.drawImage(bg, 0, 0, can0.width, can0.height)
ctx0.drawImage(char, can0.width / 2.5, can0.height / 2.2, char.width * 12, char.height * 12.1)
}
}