Aspeto 2D

A apresentação de um objeto gráfico, além da forma (definida pela geometria) também depende de outras propriedades visuais:

• cores, traços e tintas;
• textos e fontes;

Cores

A especificação numérica de uma cor depende de um espaço numérico.

Conforme a aplicação do modelo gráfico, certos espaços são mais adequados que outros:

• Para ecrãs, onde a cor é emitida, a escolha mais comum é um espaço RGB onde cada cor fica definida por três componentes (r, g, b) correspondentes a vermelho, verde e azul.
• Para impressão, onde a cor é refletida, usam-se espaços CMY (cião, magenta e amarelo) ou CMYK (cião, magenta, amarelo e preto). A adição do preto resulta da dificuldade de se produzir economicamente o preto com as restantes componentes.
• Para certas aplicações a escolha de uma cor em termos de RGB ou CMY (definidos em função do hardware) pode iludir a perceção humana; Um espaço de cor definido em termos de perceção humana é o HSL (de hue=tom, saturation=saturação e luminosity=luminosidade).

No contexto da web o espaço de cor normal é o RGB; Há imensas formas de especificar concretamente uma cor mas a mais comum é da forma #rrggbb em que rr, gg e bb são números entre 0 e 255 representados em notação hexadecimal. Por exemplo:

Além disso, através do CSS, também estão disponível cores por nome (ver as tabelas de cores na norma w3 ou na wikipedia).

Testar cores HSL

Traços

Os traços (isto é, as propriedades visuais das linhas) são inesperadamente complexos.

Uma linha desenhada num dispositivo não é um objeto abstrato (como uma linha matemática, de espessura 0). Na prática as linhas têm formas específicas.

Os traços são definidos por:

• uma espessura.
• um tracejado
• as extremidades.
• as junções com outros traços.
• o corte das junções.

Exemplos de traços	CSS
Espessuras	stroke-width
	0.15, 1, 2, 4, 8
Tracejados	stroke-dasharray
	2 2, 1 2, 2 1 4 1, 1 2 2 1
Extremidades	stroke-linecap
	butt, round, square
Junções	stroke-linejoin
	miter, round, bevel
Cortes	stroke-miterlimit
	1, 4

Testar traços

Tintas

A tinta define como uma forma é pintada. Há várias formas de pintar uma geometria:

• usando uma cor sólida;
• usando um mosaico (uma imagem repetida);
• usando um gradiente de cores (uma variação suave entre cores);

Uma tinta pode ser aplicada apenas ao contorno (stroke) ou encher (fill) o interior da geometria:

Traçar e Pintar um caminho
Traçar x Pintar

Mosaicos

O uso de mosaicos para traçar ou encher o contorno é semelhante à aplicação de uma cor sólida, com a particularidade de que a «cor» é um padrão repetido:

Tinta do tipo "mosaico"
Traçar x Pintar com mosaicos

Gradientes de Cores

Os gradientes mais simples são lineares: uma cor inicial vai mudando suavemente ao longo de uma linha, até chegar a uma cor final. Também podemos definir versões um pouco mais complexas, com várias cores:

Um gradiente linear

A forma de definir gradientes "multi-coloridos" consiste em associar cores a pontos de paragem. Um ponto de paragem fica definido por um certo offset (deslocamento) do caminho entre o ponto mais à esquerda e o ponto mais à direita:

• o ponto mais à esquerda tem offset 0;
• o ponto mais à direita tem offset 1;
• pontos intermédios têm offset entre 0 e 1. Por exemplo, um ponto exatamente a meio tem offset 0.5 e um ponto a um quarto "do início do caminho" tem offset 0.25;

Por exemplo, o gradiente acima está definido com:

1. Uma paragem com offset 0.00 e cor khaki:

2. Uma paragem com offset 0.20 e cor steelblue:

3. Uma paragem com offset 0.75 e cor crimson:

4. Uma paragem com offset 1.00 e cor darkseagreen:

Outra propriedade que controla a aplicação dos gradientes é o prolongamento, que em geral tem três formas:

Finalmente, um gradiente também pode ser circular (em vez de linear):

Um gradiente circular

Texto

Texto e Fonte

O uso de textos envolve selecionar uma fonte e desenhar o texto de acordo com essa fonte.

• Um texto é um tipo especial de objeto geométrico, definido por uma sequência de carateres (letras, dígitos, etc);
• Uma fonte define os desenhos dos carateres;

Letras, Dígitos, Glifos

Tecnicamente, glifo é o termo que designa, em conjunto:

• As letras (a é β etc).
• Os dígitos (0 1 9 etc).
• Símbolos de pontuação (! , . etc).
• As ligaturas (Æ Œ fi etc).
• Outros símbolos (± ∫ → etc).

As propriedades das fontes estão definidas na norma CSS Fonts Module Level 3 e incluem, entre outras: