HOW JAVASCRIPT SOURCE CHANGES

Asked

Viewed 61 times

-3

I want to change the font of a text in the javascript language. I want to put the source Digital 7.

Part of the text code:

function text (){
        ctx.font = "40pt Italic";
        ctx.fillText("teste", 100,100);

     }

Complete code:

<!doctype html>
MY GAME canvas { position: Absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; } 
  <script>
     // variáveis do jogo

     var img = new Image();
         img.src = "imagens/marFundo.png"

     var canvas, ctx, ALTURA, LARGURA, frames = 0,




     navio = {
        x: 500,
        y: 400,
        altura: 100,
        largura: 100,
        cor: "#ff4e4e",
        

        desenha: function(){
            ctx.fillStyle = this.cor;
            ctx.fillRect(this.x, this.y, this.largura, this.altura);
        }
     };

     function main() {
        ALTURA  = window.innerHeight;
        LARGURA = window.innerWidth;

        
        LARGURA = 1800;
        ALTURA  = 900;
        

        canvas = document.createElement("canvas");
        canvas.width = LARGURA;
        canvas.height = ALTURA;
        canvas.style.border = "1px solid #000";

        ctx = canvas.getContext("2d");
        document.body.appendChild(canvas);
       
        roda();
     } // main



     function roda(){
        atualiza();
        desenha();
        text();

        window.requestAnimationFrame(roda);
     }


     function text (){
        ctx.font = "40pt Italic";
        ctx.fillText("teste", 100,100);

     }

     function atualiza(){
        frames++;
       }

     function desenha(){
        ctx.fillStyle = "#50beff";
        ctx.fillRect(0, 0, LARGURA, ALTURA);
        
        navio.desenha();
     }

     
     window.addEventListener("keydown", movimenta)
     function movimenta(e){
        var key = e.keyCode;
        if(key === ESQUERDA){
            navio.x -= velocidade
        }
        if(key === DIREITA){
            navio.x += velocidade
        }
        if(key === CIMA){
            navio.y -= velocidade
        }
        if(key === BAIXO){
            navio.y += velocidade
        }
     }
     

     var CIMA = 87, BAIXO = 83, ESQUERDA = 65, DIREITA = 68;
     var velocidade = 20;
     // inicializa o jogo
     


     main();



  </script>
javascript

  • In case you would need to change the fontFamily by applying style directly to the element: The same way you have already applied the other Styles: https://www.w3schools.com/jsref/prop_style_fontfamily.asp

1 answer

0

The way you are coding, applying in Canvas, you can put the font-family in its text function, in ctx.font, as follows:

function text (){
    ctx.font = "40pt Digital-7 Italic";
    ctx.fillText("teste", 100,100);
}

Make sure that this type of font is installed or at least pointing to a destination that provides it.

Reference: https://www.w3schools.com/tags/canvas_font.asp

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.