How to make a cursor monitored in html?

0

Two screens / two chessboard and each screen with a respective cursor are displayed. This cursor will increase or decrease the number of squares. How do I make the cursor associated with each of the screens work this way (increase or decrease the number of squares)? what code should I use?

I have here the code that I built, but the cursors do not work:

var graf1, graf2, cursor, graf6, graf4, graf5, graf3;
function inic(){
    graf1 = document.getElementById("tela1").getContext("2d");
    graf2 = document.getElementById("tela2").getContext("2d");
    xadrezCentro(graf1, 500, 77, "#ffff33", "#1a53ff", "#0d0d0d", 4, 0.75);
    xadrezCentro(graf2, 500, 77, "#ff6666", "#99ffff", "#ffffff", 3, 0.50);
    document.getElementById("graf6").style.cursor = "pointer";
    document.getElementById("graf5").style.cursor = "pointer";
    act();
}
       
//desenha um padrao de xadrez, com o devido contexto gráfico, as coordenadas do canto superior esquerdo do padrão, numero de linhas(igual ao numero de colunas), a dimensão do lado da quadricula, as cores dos respectivos fundos, a cor e a espessura da linha e por fim a sua opacidade.
function xadrez(graf, cx, cy, n, ladoQuadricula, corF1, corF2, corLinha, espessuraLinha, opac ){
    var i,j;
    graf.strokeStyle = corLinha;
    graf.lineWidth = espessuraLinha;
    graf.globalAlpha = opac;
    for(j=0; j<n; j++){
        for(i=0; i<n; i++){
            if((i+j)%2 == 0)
            graf.fillStyle = corF1;
            else
            graf.fillStyle = corF2;
            graf.beginPath();
            graf.rect(cx+i*ladoQuadricula, cy+j*ladoQuadricula, ladoQuadricula, ladoQuadricula);
            graf.fill();
            graf.stroke();
        }
    }
}
           
//preenche uma tela quadrada com um padrão xadrez, mantendo uma quadrícula no centro, dados: o contexto gráfico, a dimensão do lado da tela, a dimensão do lado da quadrícula, as cores alternadas dos fundos das quadrículas, a cor e a espessura das linhas das quadrículas e a sua opacidade.
function xadrezCentro(graf, ladoTela, ladoQuadricula, corF1, corF2, corLinha, espessuraLinha, opac){
    var cx,cy, n;
    n = Math.ceil(ladoTela/ladoQuadricula);
    if(n%2 == 0)
        n++;
    cx = cy = ladoTela/2 - n*ladoQuadricula/2;
    xadrez(graf, cx, cy, n, ladoQuadricula, corF1, corF2, corLinha, espessuraLinha, opac );

}
           
//ações sobre os cursores
function act() {
    graf4.value = graf6.value;
    graf3.value = graf5.value;

}

window.load = function(){
   inic();
}
 
   <!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="utf-8" />
        <title> xadrezes com cursor monitorizado </title>
        <style>
            #tela1,#tela2{border:1px solid #000;}
            .etk1{font-family:arial; font-size:15px; font-weight:bold;}
           
        </style>
    </head>
    <body>
        <canvas id = "tela1" width = "500" height ="500"></canvas>
        <canvas id = "tela2" width = "500" height ="500"></canvas>
        <span id = "etk1"> Quadrícula: </span>
        <input id = "graf6" type = "range" min = "10" max = "150" step = "1" value = "80" onmousemove = "act()" onchange = "act()"/>
        <input id = "graf4" type="text" size="1" readonly="readonly" /><br />
        <span id = "etk1"> Quadrícula: </span>
        <input id = "graf5" type = "range" min = "10" max = "150" step = "1" value = "80" onmousemove = "act()" onchange = "act()"/>
        <input id = "graf3" type="text" size="1" readonly="readonly" /><br />

    </body>
</html>

link

    
asked by anonymous 28.12.2017 / 02:05

0 answers