Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Micilini Roll

Retangulo Curvado com HTML5

Por , em Desenvolvimento frontend

Recommended Posts

Micilini Roll    49

Micilini Roll
Postado

Olá pessoal estou querendo reproduzir essa imagem em html 5, pois ja estou cansado de usar flash e estou vendo que a cada dia que se passa o html 5 toma seu lugar, pois bem a imagem é esta que voces estao vendo abaixo:

 

francophonie1775.jpg

 

Perfeito, primeiramente gostaria de se preocupar somente com um retangulo e tentar reproduzir no html 5 , mais tarde irei meu preocupar em fazer os retangulos em forma de bola...bem necessito da ajuda de voces, alguem sabe como fazer esse retangulo curvado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sinceramente ?

 

Eu não usaria css/html nisso. Eu faria com svg.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Micilini Roll    49

Micilini Roll
Postado

Bem pessoal acabei encontrando um codigo na internet que faz esse tipo de coisa, bem eu consegui estes resultados com este codigo:

 

<!DOCTYPE HTML>
<html>
 <body>
    <canvas id="myCanvas"  width="588" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 110;
      var rectHeight = 110;
      var rectX = 189;
      var rectY = 50;
      var cornerRadius = 100;
      context.strokeStyle="#FF2A2A";
      context.beginPath();
      context.moveTo(rectX, rectY);
      context.lineTo(rectX + rectWidth - cornerRadius, rectY);
      context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
      context.lineTo(rectX + rectWidth, rectY + rectHeight);
      context.lineWidth = 35;
      context.stroke();
    </script>
  </body>
</html>

 

gev1.png

 

 

 

 

 

 

 

 

 

 

Agora chegou a parte mais dificl, que no caso é montar essas canvas em forma arredondada, como?



Agr que voce tocou no assunto bruno... pq svg? qua a diferença de fazer isso pelo comando acima que postei e pelo sgv? irá melhorar alguma coisa? tem mais compatibilidade com outros navegadores? explique..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

A compatibilidade é a mesma: ie8+

 

http://caniuse.com/canvas

http://caniuse.com/svg

 

Eu faria com svg e não com canvas, pq isso é um "desenho" um gráfico.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Micilini Roll    49

Micilini Roll
Postado

Entendi william bruno, eu nao entendo nada de svg e nunca usei, bem no meu caso gostaria de ir seguindo pelo html 5 mesmo, pois ja estou com a mão na massa, bem o que eu to fazendo neste momento é:

 

  1. Assim que passar o mouse na canvas (efeito mouseover do jquery)
  2. Ira surgir um efeito de shadow atras da canas (mas somente quando o mouse estiver em cima da canvas)

 

Bem, o que esta aconteçendo é o seguinte, assim que eu coloco o mouse em cima da canvas envez de aconteçer isso (imagem 01), aconteçe isso (imagem 02).

 

 

9m1u.png

 

    <canvas id="myCanvas"  width="588" height="200"></canvas>
    <script>
	
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 110;
      var rectHeight = 110;
      var rectX = 189;
      var rectY = 50;
      var cornerRadius = 100;
	 canvas.addEventListener("mouseover", doMouseDown, false);

      function doMouseDown(){
	  context.shadowColor = '#7FD4FF';
      context.shadowBlur = 20;
      context.shadowOffsetX = 5;
      context.shadowOffsetY = 5;
      context.fill();
	  }

      context.strokeStyle="#FF2A2A";
      context.beginPath();
      context.moveTo(rectX, rectY);
      context.lineTo(rectX + rectWidth - cornerRadius, rectY);
      context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
      context.lineTo(rectX + rectWidth, rectY + rectHeight);
      context.lineWidth = 35;
      context.stroke();
	  

    </script>

 

 

Ou seja, criou-se um poligono do nada em cima da canvas original na qual recebeu o shadow, porque isso aconteceu, espero que haja uma solução para esse tipo de coisa, pq estou achando que é um erro no proprio html...e pareçe que nao ha suporte para isso, ou estou enganado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mas vc não está usando "html5", vc está usando canvas, que assim como svg é mais uma das "apis" que foram divulgadas junto com ele.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Micilini Roll    49

Micilini Roll
Postado

hm entendi william bruno...me fala uma coisa, eu encontrei um pequeno probleminha na minha canvas, eu nao sei se eu migrar para o svg ira concertar,mas observe o seguinte:

 

http://fiddle.jshell.net/ph4x5/

 

 

Quando eu coloco o mouse em cima, apareçe o shadow, perfeito, e quando eu tiro tb, so que eu percebi uma coisa, o mouseout so funciona quando eu tiro o meu mouse ,nao so de cima do desenho da canvas mas tenho que tirar o mouse fora do quadrado que esta fora da canvas...No meu caso, eu gostaria, assim que eu tirasse o mouse somente de dentro do desenho da canvas executaria a função dot (responsavel pelo mouseout), ha como?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito