Canvas JavaScript

Você já usou um aplicativo de pintura do Windows? Digamos que você fez, mas e se você quiser desenhar formas, linhas, textos e gráficos 2D ou 3D online em um navegador da web, então o que você faz? Aqui vem a tela HTML 5, que nos permite desenhar gráficos 2D ou 3D em um navegador.

Este artigo o reconhecerá sobre

• O que é uma tela
• Como ativar uma tela usando JavaScript
• Como redimensionar uma tela usando javascript
• Como criar formas em uma tela usando JavaScript

O que é uma tela

A tela é um contêiner, que nos permite desenhar formas, linhas e textos diferentes em um navegador. Por padrão, o contêiner de tela é invisível e não tem fronteira. Então, para torná -lo visível, usamos a tag HTML 5 de tela e a propriedade da fronteira CSS.

Sintaxe:

A sintaxe acima exibe apenas um recipiente simples com uma borda.

Como ativar uma tela usando JavaScript

Basicamente, a tela é uma tag html 5, mas só está operacional com a ajuda de um javascript. O código a seguir é obrigatório para acessar e ativar uma tela.

Código:

const Canvas = documento.QuerySelector ("#Canvas");
const contxt = tela.getContext ("2D");

Neste código, usamos o método QuerySelector () para obter o ID da tela que conectará nosso código JavaScript com a tag de tela. Em seguida, usamos o método getContext () para especificar o ambiente de uma tela (2D ou 3D).

Como redimensionar uma tela usando javascript

Usamos o código JavaScript para fornecer propriedades de altura e largura dos objetos de tela. Se usarmos o CSS para dar altura e largura ao recipiente de tela, ele pixelará o contêiner em vez de redimensioná -lo. Portanto, use o seguinte código JavaScript para redimensionar o contêiner de tela.

Sintaxe:

tela.altura = 200;
tela.largura = 400;

Como criar formas na tela usando JavaScript

Agora vamos ver como podemos criar formas diferentes na tela usando JavaScript.

Retângulo

O código JavaScript a seguir é usado para criar um retângulo na tela.

Sintaxe:

nome variável.strokerect (value_x, value_y, largura, altura)

Aqui o nome da variável representa a variável que criamos para o método getContext (). Enquanto o método strockrect () leva quatro parâmetros onde o valor x e o valor y representam a posição na tela onde você deseja desenhar a forma (retângulo). Enquanto que largura e altura são usados ​​para mencionar o tamanho do retângulo.

Código:

contxt.Strokerect (50.50.250.100)

Neste código, um retângulo é criado com largura de 250px e altura de 100px.

Saída:

Caso você queira alterar a cor do retângulo, basta adicionar o seguinte código antes do seu código de criação do retângulo:

Código:

contxt.Strokestyle = "azul";

Saída:

Retângulo preenchido

O código JavaScript a seguir é usado para criar um retângulo preenchido na tela.

Sintaxe:

nome variável.Fillrect (value_x, value_y, largura, altura)

O método FillRect () também pega os quatro parâmetros e é usado para criar um retângulo preenchido.

Código:

contxt.Fillrect (50.50.250.100)

Saída:

Para alterar a cor do retângulo, basta usar a propriedade FillStyle antes do seu código de criação do retângulo:

Código:

contxt.FillStyle = "Aqua";

Saída:

Círculo

O código JavaScript a seguir é usado para criar um círculo na tela.

Sintaxe:

nome variável.arco (value-x, valor-y, círculo-radio, ângulo inicial, ângulo final);
nome variável.AVC();

Aqui o método arc () leva cinco parâmetros, incluindo o valor x e o valor y representando a posição do círculo, raio do círculo, ângulo de partida e valor do ângulo final. O método Stroke () é usado, desenhe um caminho do círculo que eventualmente exibirá um círculo.

Código:

contxt.arco (180, 100, 80, 0, 2 * matemática.Pi);
contxt.AVC();

Saída:

Linha

O código JavaScript a seguir é usado para criar uma linha na tela.

Sintaxe:

nome variável.BeginPath ();
nome variável.moveto (value-x, valor-y);
nome variável.lineto (ponto inicial, ponto final);
nome variável.AVC();

Nesta sintaxe,

o método BEGNPATH () inicia um caminho,

O método moveto () leva dois valores x e y que move o cursor para o ponto específico.

O método lineto () também leva dois valores, o ponto de partida de onde a linha começa e o ponto final onde a linha termina.

O método Stroke () é usado para desenhar um caminho da linha que eventualmente exibirá uma linha.

Código:

contxt.BeginPath ();
contxt.moveto (50,50);
contxt.Lineto (300.150);
contxt.AVC();

Saída:

Texto

O código JavaScript a seguir é usado para escrever um texto na tela.

Sintaxe:

nome variável.font = "Fontra da fonte da fonte";
nome variável.FillStyle = "Color";
nome variável.FILLTEXT ("Exibindo texto", Value-X, Value-Y);

Primeiro, você precisa mencionar o tamanho da fonte e a família de fontes usando a propriedade Font. Em segundo lugar, forneça a cor se quiser usar a propriedade FillStyle. Por fim, o método de FillText () leva três valores, texto, valor x e valor y.

Código:

contxt.font = "50px Arial";
contxt.FillStyle = "Lightgreen";
contxt.FillText ("Canvas", 110, 120)

Saída:

Texto oco

O código JavaScript a seguir é usado para escrever um texto oco na tela.

Sintaxe:

nome variável.font = "Fontra da fonte da fonte";
nome variável.Strokestyle = "Color";
nome variável.STROKETEXT ("Exibindo texto", Value-X, Value-Y);

Aqui o método STROKETEXT () é usado para escrever texto em estilo oco…

Código:

contxt.font = "50px Arial";
contxt.Strokestyle = "Orange";
contxt.StroKetext ("Canvas", 110, 120)

Saída:

Conclusão

Canvas é uma prancheta para desenhar gráficos 2D ou 3D em um navegador. Neste artigo, aprendemos como podemos desenhar um círculo, retângulo, linha e texto em uma tela através de javascript. Embora o Canvas seja uma tag html5, mas as operações na tela só podem ser executadas com a ajuda de um código JavaScript.