Gráficos HTML5

Um dos novos elementos implementados pelo HTML5 foi a tag <canvas>, elemento esse que permite, com o uso de javascript, a criação de elementos gráficos dispensando o uso de imagens para isso.

Nesse projeto foi utilizado a Tag <canvas> para substituir todas as imagens, utilizadas inicialmente com CSS, para representar as pequenas setas do botão de direto ao conteúdo, voltar ao todo, no menu principal e breadcrumb. Fazendo isso, além do peso da imagem, temos um ganho em performance por diminuirmos o número de requisições junto ao servidor.

                    	function drawPath3(quem){
                            var canvasElem = document.getElementById(quem);
                            if (canvasElem.getContext) {
                                var context = canvasElem.getContext('2d');
                                context.fillStyle = "#0e66b5";
                                context.beginPath();
                                context.moveTo(0, 0);
                                context.lineTo(5, 2.5);
                                context.lineTo(0, 5);
                                context.lineTo(0, 0);
                                context.fill();
                            }
                        }
                        drawPath3('nav1');
                        drawPath3('nav2');
                        drawPath3('nav3');
                        drawPath3('nav4');
                        drawPath3('nav5');
                    

Conforme novos elementos gráficos utilizando HTML5 forem implementados essa página será atualizada.