Question

let ti11 = document.createElement('input')
function hkRender() {

    window.game.mapSetup = {};
    mapContext = map.getContext('2d')

    // Styling the canvas background (works)

    mapContext.fillStyle = ti9.value

    game.mapSetup.loadMapColor = function(){
        ti9.value = localStorage.getItem('mmc')
        mapContext.fillStyle = ti9.value
    }
    window.game.mapSetup.changeMapColor = function(mapColor){
        let mmc = localStorage.getItem('mmc')
        mapContext.fillStyle = mmc
        localStorage.setItem('mmc', mapColor)
    }

    ti9.className = "jscolor {onFineChange:'window.game.mapSetup.changeMapColor(this.toHEXString())'}"

    ti9.value = localStorage.getItem('ti9val')
    ti9.onchange = function(){
      localStorage.setItem('ti9val', ti9.value)
    }
    game.mapSetup.loadMapColor()

    // Styling player text in canvas (doesnt work)

    for (let player in players) {
        let plr = players[player]


        // player name
        mapContext.fillStyle = ti11.value

        game.mapSetup.loadPlayerNameColor = function(){
            ti11.value = localStorage.getItem('mmn')
            mapContext.fillStyle = ti11.value
        }
        window.game.mapSetup.changePlayerNameColor = function(playerNameColor){
            let mmn = localStorage.getItem('mmn')
            mapContext.fillStyle = mmn
            localStorage.setItem('mmc', playerNameColor)
        }

    }

    ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"


    ti11.value = localStorage.getItem('ti11val')
    ti11.onchange = function(){
        localStorage.setItem('ti11val', ti11.value)
    }
    game.mapSetup.loadPlayerNameColor()
}

我想设置 //玩家名称中定义的属性 mapContext.fillStyle 的样式，但是在调用该函数进行样式设置时，该样式将应用于该样式的mapContext.FillStyle地图背景而不是名称。我该如何区分这两种相似的属性？

Answer 1

在循环上方定义函数：

let ti11 = document.createElement('input')
function changeColour(playerNameColor, mapContext){
 let mmn = localStorage.getItem('mmn')
        mapContext.fillStyle = mmn
        localStorage.setItem('mmc', playerNameColor)
}
function render(){
window.mapSetup = {}
for (let player in players) {
    let plr = players[player]

    // Draw name
    let name = plr.name
    if (!name) return
    mapContext.fillStyle = ti11.value

    game.mapSetup.loadPlayerNameColor = function(){
        ti11.value = localStorage.getItem('mmn')
        mapContext.fillStyle = ti11.value
    }
    window.game.mapSetup.changePlayerNameColor = function(playerNameColor, mapContext){
       changeColour(playerNameColor, mapContext);
    }
}

ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"
ti11.style.width = '60px';
ti11.style.position = 'absolute'
ti11.style.left = '10px'
ti11.style.top = '305px'

ti11.value = localStorage.getItem('ti11val')
ti11.onchange = function(){
    localStorage.setItem('ti11val', ti11.value)
}
game.mapSetup.loadPlayerNameColor()

}

或：

let ti11 = document.createElement('input')
function changeColour(playerNameColor, mapContext){
 let mmn = localStorage.getItem('mmn')
        mapContext.fillStyle = mmn
        localStorage.setItem('mmc', playerNameColor)
}
function render(){
window.mapSetup = {}
for (let player in players) {
    let plr = players[player]

    // Draw name
    let name = plr.name
    if (!name) return
    mapContext.fillStyle = ti11.value

    game.mapSetup.loadPlayerNameColor = function(){
        ti11.value = localStorage.getItem('mmn')
        mapContext.fillStyle = ti11.value
    }
    window.game.mapSetup.changePlayerNameColor = changeColour(playerNameColor, mapContext);
}

ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"
ti11.style.width = '60px';
ti11.style.position = 'absolute'
ti11.style.left = '10px'
ti11.style.top = '305px'

ti11.value = localStorage.getItem('ti11val')
ti11.onchange = function(){
    localStorage.setItem('ti11val', ti11.value)
}
game.mapSetup.loadPlayerNameColor()

}

Answer 2

只需移动变量： ti11.value 在for循环上方将其声明为超出范围。

如何在JavaScript中的for循环中调用函数？

2 个答案: