如何通过 onclick canvas 更改数组的值？

Question

伙计们，这听起来像是一个简单的问题，但我无法解决它。基本上，函数 desenhaFaceTot() 允许通过一个按钮在三个不同的 canvas 上绘制三个骰子，并将 numArray 值分配给每个骰子，根据出现的数字绘制骰子点数（例如：n = 5 绘制五个点) 然后按升序排列骰子这一切都很好问题是：我想通过按 alterarNumero() 函数中的 canvas 来更改第一个骰子的值（数组中最小的数字）并稍后安排，而不是我的程序更改任何骰子的值。

我希望发生的操作示例

骰子：

1 3 4

按下第一个canvas后onclick：（出来的数字例如是6）

3 4 6

在我的代码中发生了什么，而不是改变第一个骰子的值，改变了案例中的任何骰子，例如，骰子数 3 和数字 6

1 3 6

（一半代码在 canvas 上画东西）

function inic(){
    adqInterf();
    desenhoDado(graf1);
    desenhoDado(graf2);
    desenhoDado(graf3);            
}

function adqInterf(){
    graf1 = document.getElementById("tela1").getContext("2d");
    graf2 = document.getElementById("tela2").getContext("2d");
    graf3 = document.getElementById("tela3").getContext("2d");
}
function desenhaFaceTotal(){
    desenhoDado(graf1);
    desenhoDado(graf2);
    desenhoDado(graf3);             
    
    var numArray = [n, n2, n3];
    
    numArray.sort(function(a, b) {
        return a - b;
    });
                         
    desenhaFace(numArray[0], graf1);
    desenhaFace(numArray[1], graf2);
    desenhaFace(numArray[2], graf3);
}
--------------------------------
function desenhaFaceTot(){
    n = Math.floor(6 * Math.random()) + 1;
    n2 = Math.floor(6 * Math.random()) + 1;
    n3 = Math.floor(6 * Math.random()) + 1;

    numArray = [n, n2, n3];
    desenhaFaceTotal(); 
}


function alterarNumero(){                   
    n = Math.floor(6 * Math.random()) + 1;                  
    desenhaFaceTotal();
}
function desenhaFace(dado, cgrafico){
    if(dado==1){
        desenho1(cgrafico);
    }                   
    if(dado==2){
        desenho2(cgrafico);
    }
    if(dado==3){
        desenho1(cgrafico);
        desenho2(cgrafico);
    }   
    if(dado==4){
        desenho4(cgrafico);
    }
    if(dado==5){
        desenho4(cgrafico);
        desenho1(cgrafico);
    }
    if(dado==6){
        desenho6(cgrafico);
    }                       
}
function pintaRect(cGraf, x1, y1, r, corP, opac, espL){
    cGraf.fillStyle = corP;
    cGraf.globalAlpha = opac;
    cGraf.lineWidth = espL;
    
    cGraf.beginPath();
    cGraf.moveTo(x1-20, y1);
    cGraf.arcTo(x1, y1, x1, x1, r);
    cGraf.arcTo(x1, x1, y1, x1, r);
    cGraf.arcTo(y1, x1, y1, y1, r);
    cGraf.arcTo(y1, y1, x1, y1, r);
    cGraf.closePath();
    cGraf.fill();
}

function pintaCirc(cGraf, x, y, raio, corP, espL){
    cGraf.fillStyle = corP;
    cGraf.lineWidth = espL;
    
    cGraf.beginPath();
    cGraf.arc(x, y, raio, 0, 2*Math.PI);
    cGraf.closePath();
    cGraf.fill();
}

function desenhoDado(cgraf){
    pintaRect(cgraf, 84, 9, 15, "#223322", 1, 1);
}
function desenho1(cgraf){
    pintaCirc(cgraf, 44, 44, 7, "#804000", 5);
}

function desenho2(cgraf){
    pintaCirc(cgraf, 25, 25, 7, "#804000", 5);
    pintaCirc(cgraf, 63, 63, 7, "#804000", 5);
}

function desenho4(cgraf){
    desenho2(cgraf);
    pintaCirc(cgraf, 25, 63, 7, "#804000", 5);
    pintaCirc(cgraf, 63, 25, 7, "#804000", 5);
}

function desenho6(cgraf){
    desenho4(cgraf);
    pintaCirc(cgraf, 25, 44, 7, "#804000", 5);
    pintaCirc(cgraf, 63, 44, 7, "#804000", 5);
}

<body onload="inic()">
      <canvas class="dados" id="tela1" width="88" height="88" onclick="alterarNumero()"></canvas>
            <canvas class="dados" id="tela2" width="88" height="88"></canvas>
            <canvas class="dados" id="tela3" width="88" height="88"></canvas>
      <button class="botao" id="botaoNovaMao" onclick="desenhaFaceTot()">nova<br>mão</button>
</body>

Answer 1

基于评论的新答案。当您更改 n 时，您是在排序之前在原始数组上更改它。排序不会更改其上方的原始数组的顺序。因此，正如您在此控制台日志中看到的那样，我在排序之前和之后记录了 numArray。我还登录了 n，这样您就可以看到发生了什么。

//intial load
"before 1,5,6"
"after 1,5,6"
//clicked dice once and drew a 6
"n 6"
"before 6,5,6" //<---replaced 1 with 6
"after 5,6,6" //now sorted the array
//clicked again and drew a 3
"n 3"
"before 3,5,6"  //but look here the second and third are 5 & 6 NOT 6 & 6 because `numArray` was not mutated by sort. so it is now going to process the array as it was above in the before state not the after one that you see on screen
"after 3,5,6"

如何通过 onclick canvas 更改数组的值？

how to change the value of an array through a onclick canvas?

html

javascript

canvas