html canvas - aplicando cores e estilos de linha · html canvas - aplicando cores e estilos de...
TRANSCRIPT
Composição, Projeto e Animação Prof. Andrea Garcia
HTML Canvas - Aplicando Cores e Estilos de Linha
Cores Até agora só vimos métodos do contexto de desenho. Se quisermos aplicar cores a uma forma, existem duas propriedades importantes que podemos utilizar: fillStylee e strokeStyle.
fillStyle = color
Define o estilo usado ao preencher (fill) formas.
strokeStyle = color
Define o estilo para os contornos (strokes) das formas.
color é uma string que representa um CSS <color>, um objeto gradiente, ou um objeto padrão. Examinaremos sobre objetos de gradiente e padrão mais tarde. Por padrão, a cor do contorno (stroke color) e a cor de preenchimento (fill color) estão definidos como preto (valor de cor no CSS é #000000). Cada linha na sequência abaixo descreve a mesma cor. Listagem 1
// these all set the fillStyle to 'orange' ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 165, 0)'; ctx.fillStyle = 'rgba(255, 165, 0, 1)';
Exemplo de fillStyle
No exemplo abaixo, podemos ver dois loopings desenhando uma grade de retângulos de cores
diferentes. Foram utilizadas duas variáveis i e j para gerar uma cor RGB única para cada quadrado,
e somente modificar os valores de vermelho e verde. O canal e tem um valor fixo. Modificando estes
canais você pode gerar vários tipos de paletas de cores.
Listagem 2
<html> <head> <script> function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)'; ctx.fillRect(j * 25, i * 25, 25, 25); } } } </script>
Composição, Projeto e Animação Prof. Andrea Garcia
</head> <body onload="draw();"> <canvas id="canvas" width="350" height="350"></canvas> </body> </html>
O resultado será:
Exemplo de strokeStyle
Neste exemplo similar ao visto acima, usamos a propriedade strokeStyle para mudar as cores dos
desenhos. Foi utilizado o método arc() para desenhar os círculos.
Listagem 3
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ')'; ctx.beginPath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); ctx.stroke(); } } }
O resultado será:
Composição, Projeto e Animação Prof. Andrea Garcia
Transparência Além de desenhar formas opacas (ou preenchidas) no Canvas, podemos desenhar também com cores transparentes ou translúcidas. Isto é feito configurando a propriedade globalAlphaproperty informando que a linha/preenchimento é uma cor semi-transparente. globalAlpha = transparencyValue
Aplicação especifica o valor de transparência de todos os futuros desenhos no Canvas. O valor precisa estar entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco). O valor padrão é 1.0 (totalmente opaco).
A propriedade globalAlpha pode ser utilizada se você quiser desenhar vários objetos no Canvas com transparências similar, mas geralmente é mais utilizada em objetos individualmente com suas configurações próprias. Listagem 4
// Assigning transparent colors to stroke and fill style ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'; ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
A função rgba() é similar a função rgb() mas tem um parâmetro a mais. O último parâmetro configura o valor da transparência desta cor em particular. A faixa do parâmetro fica entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco).
Exemplo globalAlpha
Neste exemplo, foi desenhado um fundo com quarto cores diferentes. No topo deles, configuramos os desenhos como círculos semi-transparentes. A propriedade globalAlpha é configurada com 0.2 e será usada em todas as formas criadas à partir deste ponto. Cada passo no for...loop desenha um conjunto de círculos com um raio crescente. O resultado final é um gradiente radial. Ao sobrepor cada vez mais círculos uns sobre os outros, reduzimos efetivamente a transparência dos círculos que já foram desenhados. Ao aumentar a contagem de passos e, com efeito, desenhar mais círculos, o fundo desapareceria completamente do centro da imagem.
Listagem 5
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // draw background ctx.fillStyle = '#FD0'; ctx.fillRect(0, 0, 75, 75); ctx.fillStyle = '#6C0'; ctx.fillRect(75, 0, 75, 75); ctx.fillStyle = '#09F'; ctx.fillRect(0, 75, 75, 75); ctx.fillStyle = '#F30'; ctx.fillRect(75, 75, 75, 75); ctx.fillStyle = '#FFF'; // set transparency value ctx.globalAlpha = 0.2; // Draw semi transparent circles for (i = 0; i < 7; i++) {
Composição, Projeto e Animação Prof. Andrea Garcia
ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); } }
Exemplo usando rgba()
Neste exemplo, faremos algo similar com o exemplo acima, mas desenharemos círculos no topo de cada outro, foram desenhados pequenos retângulos com opacidade incrementada. Usando rgba() você dá um pequeno controle e flexibilidade porque nós podemos configurar um fill e um stroke individualmente.
Listagem 6
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Draw background ctx.fillStyle = 'rgb(255, 221, 0)'; ctx.fillRect(0, 0, 150, 37.5); ctx.fillStyle = 'rgb(102, 204, 0)'; ctx.fillRect(0, 37.5, 150, 37.5); ctx.fillStyle = 'rgb(0, 153, 255)'; ctx.fillRect(0, 75, 150, 37.5); ctx.fillStyle = 'rgb(255, 51, 0)'; ctx.fillRect(0, 112.5, 150, 37.5); // Draw semi transparent rectangles for (var i = 0; i < 10; i++) { ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')'; for (var j = 0; j < 4; j++) { ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5); } } }
Composição, Projeto e Animação Prof. Andrea Garcia
Estilos de Linhas
Existem várias propriedades que nos permitem estilizar linhas.
lineWidth = value Define a largura das linhas desenhadas no futuro.
lineCap = type Define a aparência das extremidades das linhas.
lineJoin = type Define a aparência dos "cantos" onde as linhas se encontram.
setLineDash(segments)
Define o padrão de traço da linha atual.
Exemplo de lineWidth
Esta propriedade define a espessura atual da linha. Os valores devem ser números positivos. Por
padrão, esse valor é definido como 1,0 unidades. A largura da linha é a espessura do traço
centralizado no caminho dado. Em outras palavras, a área desenhada é estendida para metade da
largura da linha em ambos os lados do caminho. Como as coordenadas da tela não fazem referência
direta aos pixels, deve-se tomar cuidado especial para obter linhas horizontais e verticais nítidas.
No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linha crescentes. A linha na
extrema esquerda tem 1,0 unidade de largura. No entanto, as linhas de espessura de largura inteira
inteira ímpar e todas as outras não aparecem nítidas, devido ao posicionamento do caminho.
Listagem 7
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 10; i++) { ctx.lineWidth = 1 + i; ctx.beginPath(); ctx.moveTo(5 + i * 14, 5); ctx.lineTo(5 + i * 14, 140); ctx.stroke(); } }
O resultado será:
Composição, Projeto e Animação Prof. Andrea Garcia
Exemplo de lineCap
A propriedade lineCap determina como os pontos finais de cada linha são desenhados. Existem
três valores possíveis para essa propriedade e esses são: butt, round and square. Por padrão, essa
propriedade é configurada como butt.
butt
As extremidades das linhas são quadradas nos pontos finais.
round As extremidades das linhas são arredondadas.
square As extremidades das linhas são quadradas adicionando uma caixa com largura igual e metade da
altura da espessura da linha.
Neste exemplo, desenharemos três linhas, cada uma com um valor diferente para a propriedade
lineCap. Eu também adicionei dois guias para ver as diferenças exatas entre os três. Cada uma
dessas linhas começa e termina exatamente nesses guias.
A linha à esquerda usa a opção de butt padrão. Você notará que ele está completamente alinhado
com as guias. O segundo está configurado para usar a opção round. Isso adiciona um semicírculo
ao final que tem um raio de metade da largura da linha. A linha à direita usa a opção quadrada. Isso
adiciona uma caixa com largura igual e metade da altura da espessura da linha.
Listagem 8
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt', 'round', 'square']; // Draw guides ctx.strokeStyle = '#09f'; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(140, 10); ctx.moveTo(10, 140); ctx.lineTo(140, 140); ctx.stroke(); // Draw lines ctx.strokeStyle = 'black'; for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25 + i * 50, 10); ctx.lineTo(25 + i * 50, 140); ctx.stroke(); } }
Composição, Projeto e Animação Prof. Andrea Garcia
Gradientes
Como em qualquer programa de desenho normal, podem preencher e contornar as formas usando gradientes lineares ou radiais. Criamos um objeto canvasGradient pelo uso de um dos seguintes métodos. Podemo assim associar esse objetos às propriedades fillStyle ou strokeStyle.
createLinearGradient(x1, y1, x2, y2)
Crie um objeto de gradiente linear com ponto inicial em (x1, y1) e ponto final em (x2, y2).
createRadialGradient(x1, y1, r1, x2, y2,r2)
Cria um gradiente radial. Os parâmetros representam dois círculos, um com centro em
(x1, y1) e raio r1, e o outro com centro em (x2, y2) com raio em r2.
Por exemplo:
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
Uma vez que tenhamos criado um objeto canvasGradient podemos associar cores a ele usando o método addColorStop().
gradient.addColorStop(position, color)
Cria um novo ponto de cor para o objeto gradient. O parâmetro position é um número entre 0.0 e 1.0 e define a posição relativa da cor no gradiente, e o argumento color precisa ser uma String que represente um código CSS para <color>, indicando a cor que o gradiente deve alcançar no intervalo da transição. Você pode adicionar quantos pontos de cor quiser a um gradiente. Abaixo segue um exemplo bastante simples de gradiente linear da cor branca para a preta.
var lineargradient = ctx.createLinearGradient(0,0,150,150); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, 'black');
Exemplo com createLinearGradient
Nesse exemplo, criaremos dois gradientes diferentes. Como pode ver, tanto a propriedade strokeStyle quanto a propriedade fillStyle aceitam o objeto canvasGradient como entrada válida. Listagem 9
Composição, Projeto e Animação Prof. Andrea Garcia
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Create gradients var lingrad = ctx.createLinearGradient(0,0,0,150); lingrad.addColorStop(0, '#00ABEB'); lingrad.addColorStop(0.5, '#fff'); lingrad.addColorStop(0.5, '#26C000'); lingrad.addColorStop(1, '#fff'); var lingrad2 = ctx.createLinearGradient(0,50,0,95); lingrad2.addColorStop(0.5, '#000'); lingrad2.addColorStop(1, 'rgba(0,0,0,0)'); // assign gradients to fill and stroke styles ctx.fillStyle = lingrad; ctx.strokeStyle = lingrad2; // draw shapes ctx.fillRect(10,10,130,130); ctx.strokeRect(50,50,50,50); }
O primeiro é um gradiente de fundo. Como pode ver, associamos duas cores na mesma posição. Você faz isso para criar transições de cores bastante agudas – nesse caso, do branco para o verde; Normalmente não importa em que ordem você define os pontos de cor, mas nesse caso em especial, importa significativamente; Se você manter as associações na ordem em que quer que elas apareçam, isso não será um problema. No segundo gradiente, não associamos uma cor inicial (na posição 0.0) pois isso não é estritamente necessário, porque será assumida automaticamente a cor do próximo do ponto. Por isso, associando a cor preta à posição 0.5 automaticamente faz o gradiente, do início até esse ponto, preto.
Composição, Projeto e Animação Prof. Andrea Garcia
NOME DAS CORES
Cor Palavra-chave valores hex RGB Resultado
black #000000
silver #c0c0c0
gray #808080
white #ffffff
maroon #800000
red #ff0000
purple #800080
fuchsia #ff00ff
green #008000
lime #00ff00
olive #808000
yellow #ffff00
navy #000080
blue #0000ff
teal #008080
aqua #00ffff
orange #ffa500
aliceblue #f0f8ff
antiquewhite #faebd7
aquamarine #7fffd4
Composição, Projeto e Animação Prof. Andrea Garcia
Cor Palavra-chave valores hex RGB Resultado
azure #f0ffff
beige #f5f5dc
bisque #ffe4c4
blanchedalmond #ffebcd
blueviolet #8a2be2
brown #a52a2a
burlywood #deb887
cadetblue #5f9ea0
chartreuse #7fff00
chocolate #d2691e
coral #ff7f50
cornflowerblue #6495ed
cornsilk #fff8dc
crimson #dc143c
cyan #00ffff
darkblue #00008b
darkcyan #008b8b
darkgoldenrod #b8860b
darkgray #a9a9a9
darkgreen #006400
darkgrey #a9a9a9
darkkhaki #bdb76b
Composição, Projeto e Animação Prof. Andrea Garcia
Cor Palavra-chave valores hex RGB Resultado
darkmagenta #8b008b
darkolivegreen #556b2f
darkorange #ff8c00
darkorchid #9932cc
darkred #8b0000
darksalmon #e9967a
darkseagreen #8fbc8f
darkslateblue #483d8b
darkslategray #2f4f4f
darkslategrey #2f4f4f
darkturquoise #00ced1
darkviolet #9400d3
deeppink #ff1493
deepskyblue #00bfff
dimgray #696969
dimgrey #696969
dodgerblue #1e90ff
firebrick #b22222
floralwhite #fffaf0
forestgreen #228b22
gainsboro #dcdcdc
ghostwhite #f8f8ff
Composição, Projeto e Animação Prof. Andrea Garcia
Cor Palavra-chave valores hex RGB Resultado
gold #ffd700
goldenrod #daa520
greenyellow #adff2f
grey #808080
honeydew #f0fff0
hotpink #ff69b4
indianred #cd5c5c
indigo #4b0082
ivory #fffff0
khaki #f0e68c
lavender #e6e6fa
lavenderblush #fff0f5
lawngreen #7cfc00
lemonchiffon #fffacd
lightblue #add8e6
lightcoral #f08080
lightcyan #e0ffff
lightgoldenrodyellow #fafad2
lightgray #d3d3d3
lightgreen #90ee90
lightgrey #d3d3d3
lightpink #ffb6c1
Composição, Projeto e Animação Prof. Andrea Garcia
Cor Palavra-chave valores hex RGB Resultado
lightsalmon #ffa07a
lightseagreen #20b2aa
lightskyblue #87cefa
lightslategray #778899
lightslategrey #778899
lightsteelblue #b0c4de
lightyellow #ffffe0
limegreen #32cd32
linen #faf0e6
mediumaquamarine #66cdaa
mediumblue #0000cd
mediumorchid #ba55d3
mediumpurple #9370db
mediumseagreen #3cb371
mediumslateblue #7b68ee
mediumspringgreen #00fa9a
mediumturquoise #48d1cc
mediumvioletred #c71585
midnightblue #191970
mintcream #f5fffa
mistyrose #ffe4e1
moccasin #ffe4b5
Composição, Projeto e Animação Prof. Andrea Garcia
Cor Palavra-chave valores hex RGB Resultado
navajowhite #ffdead
oldlace #fdf5e6
olivedrab #6b8e23
orangered #ff4500
orchid #da70d6
palegoldenrod #eee8aa
palegreen #98fb98
paleturquoise #afeeee
palevioletred #db7093
papayawhip #ffefd5
peachpuff #ffdab9
peru #cd853f
pink #ffc0cb
plum #dda0dd
powderblue #b0e0e6
rosybrown #bc8f8f
royalblue #4169e1
saddlebrown #8b4513
salmon #fa8072
sandybrown #f4a460
seagreen #2e8b57
seashell #fff5ee
Composição, Projeto e Animação Prof. Andrea Garcia
Cor Palavra-chave valores hex RGB Resultado
sienna #a0522d
skyblue #87ceeb
slateblue #6a5acd
slategray #708090
slategrey #708090
snow #fffafa
springgreen #00ff7f
steelblue #4682b4
tan #d2b48c
thistle #d8bfd8
tomato #ff6347
turquoise #40e0d0
violet #ee82ee
wheat #f5deb3
whitesmoke #f5f5f5
yellowgreen #9acd32
rebeccapurple #663399