Olá, tudo bem?
É possível desenhar raios de sol ao redor do círculo no centro da bandeira da Argentina, mas para realizar este objetivo o canvas possui limitações para que o desenho dos raios do sol saiam em um estado similar ao original - através do canvas conseguimos desenhar retas, mas não curvas como os raios da bandeira Argentina. Sendo assim, uma abordagem menos dispendiosa é usar o CSS (Cascading Style Sheets, que em tradução significa Folha de Estilo em Cascata) para sobrepor a imagem do sol na bandeira. O CSS funciona como um definidor de aparências do HTML, através dele conseguiremos mudar posição de elementos, mudar cores, aumentar tamanhos, dentre outros.
Para isso, podemos realizar o seguinte procedimento:
Inicialmente precisamos de uma imagem do sol da bandeira da Argentina. Você pode utilizar a imagem disponibilizada no link abaixo:
Depois iremos trabalhar com a mistura da linguagem HTML(Hyper Text Markup Language em tradução literal, linguagem de marcação de hipertexto), CSS, e JavaScript, no seu editor de código-fonte.
No mundo HTML iremos escrever os comandos:
<canvas width = "600" height = "400"> </canvas>
<img src="https://imgur.com/mRw8zG3.png" width="100 px" class="sol">
<style>
.sol {
position: absolute;
top: 140px;
left: 240px;
}
</style>
Perceba que cada uma das linhas de comando é utilizada para uma finalidade. A primeira cria a tela onde será desenhada a bandeira da Argentina.
A segunda importa a imagem do site para o arquivo HTML, especifica o tamanho dela em pixels por meio da propriedade width e utiliza uma classe para aplicação da linguagem CSS através da propriedade class.
Já a última parte do código usado no mundo HTML, foi a inserção de um código CSS para colocar a imagem do sol sobreposta a imagem da bandeira, onde essa imagem estará posicionada a 140 pixels em relação ao topo da tela e 240 pixels em relação à esquerda da tela.
No mundo JavaScript iremos apagar os comandos referentes ao círculo laranja no centro da bandeira:
pincel.fillStyle = 'orange';
pincel.beginPath();
pincel.arc(300, 185, 60, 0, 2 * 3.14);
pincel.fill();
O código completo com as modificações está abaixo:
<canvas width = "600" height = "400"> </canvas>
<style>
.sol {
position: absolute;
top: 140px;
left: 240px;
}
</style>
<img src="https://imgur.com/mRw8zG3.png" width="100 px" class="sol">
<script>
var tela = document.querySelector ("canvas");
var pincel = tela.getContext('2d');
pincel.fillStyle = 'white';
pincel.fillRect (0, 0, 600, 400);
pincel.fillStroke = 'black';
pincel.strokeRect (0,0, 600, 400);
pincel.fillStyle = 'lightblue';
pincel.fillRect (0, 0, 600, 120);
pincel.fillStroke = 'black';
pincel.strokeRect (0,0, 600, 400);
pincel.fillStyle = 'lightblue';
pincel.fillRect (0, 250, 600, 180);
pincel.fillStroke = 'black';
pincel.strokeRect (0,0, 600, 400);
</script>
O resultado obtido com o código acima é apresentado na imagem abaixo:
A título de curiosidade, caso queira conhecer outras soluções e possibilidades do mundo HTML e CSS, deixo como recomendação um artigo da Alura que trata das diferenças dessas ferramentas é também, um curso sobre esse assunto da Alura, onde você irá aprender sobre a estrutura básica de um documento HTML e também, sobre estilos para os elementos da tela através do CSS:
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição!
Um enorme abraço e bons estudos
Caso este post tenha lhe ajudado, por favor, marcar como solução! ✓.
