HTML Canvas - Aplicando Cores e Estilos de Linha
|
|
|
- Liliana Fonseca Ramalho
- 5 Há anos
- Visualizações:
Transcrição
1 Cores HTML Canvas - Aplicando Cores e Estilos de Linha 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( * i) + ',' + Math.floor( * j) + ',0)'; ctx.fillrect(j * 25, i * 25, 25, 25); </script>
2 </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( * i) + ',' + Math.floor( * j) + ')'; ctx.beginpath(); ctx.arc( j * 25, i * 25, 10, 0, Math.PI * 2, true); ctx.stroke(); O resultado será:
3 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++) {
4 ctx.beginpath(); ctx.arc(75, 75, * 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);
5 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á:
6 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();
7 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) Por exemplo: 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. 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
8 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.
9 NOME DAS CORES Cor Palavra-chave valores hex RGB Resultado black # silver #c0c0c0 gray # white #ffffff maroon # red #ff0000 purple # fuchsia #ff00ff green # lime #00ff00 olive # yellow #ffff00 navy # blue #0000ff teal # aqua #00ffff orange #ffa500 aliceblue #f0f8ff antiquewhite #faebd7 aquamarine #7fffd4
10 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 # darkgrey #a9a9a9 darkkhaki #bdb76b
11 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 # dimgrey # dodgerblue #1e90ff firebrick #b22222 floralwhite #fffaf0 forestgreen #228b22 gainsboro #dcdcdc ghostwhite #f8f8ff
12 Cor Palavra-chave valores hex RGB Resultado gold #ffd700 goldenrod #daa520 greenyellow #adff2f grey # 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
13 Cor Palavra-chave valores hex RGB Resultado lightsalmon #ffa07a lightseagreen #20b2aa lightskyblue #87cefa lightslategray # lightslategrey # 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 # mintcream #f5fffa mistyrose #ffe4e1 moccasin #ffe4b5
14 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
15 Cor Palavra-chave valores hex RGB Resultado sienna #a0522d skyblue #87ceeb slateblue #6a5acd slategray # slategrey # snow #fffafa springgreen #00ff7f steelblue #4682b4 tan #d2b48c thistle #d8bfd8 tomato #ff6347 turquoise #40e0d0 violet #ee82ee wheat #f5deb3 whitesmoke #f5f5f5 yellowgreen #9acd32 rebeccapurple #663399
Programas interativos
Programas interativos Marco A L Barbosa malbarbo.pro.br Departamento de Informática Universidade Estadual de Maringá cba Este trabalho está licenciado com uma Licença Creative Commons - Atribuição-CompartilhaIgual
Manual HiperEditor e HiperNavegador
Manual HiperEditor 2007 Confea/Apla Info Informações obtidas do Manual CNPTIA Apresentação Este tutorial objetiva apresentar as principais funcionalidades das ferramentas computacionais para criação, edição
Manual HiperEditor e HiperNavegador
Manual HiperEditor 2007 Confea/Apla Apresentação Este tutorial objetiva apresentar as principais funcionalidades das ferramentas computacionais para criação, edição e navegação na Web de árvores hiperbólicas.
Apostila de HTML ATRIBUTOS DE <BODY>
Apostila de HTML ATRIBUTOS DE Através de , podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo. Temos então: BGCOLOR - Cor de fundo TEXT - Cor da fonte dos
Apostila HTML básico Professor Rodolfo Nakamura
Prof. Esp. Rodolfo Nakamura 29804396.doc Página 1 de 19 Apostila HTML básico Professor Rodolfo Nakamura Prof. Esp. Rodolfo Nakamura 29804396.doc Página 2 de 19 1. Índice 1. Índice...2 2. Introdução...3
Prof Rafael Guem Murakami
Prof Rafael Guem Murakami São Paulo 2006 Sumário 1. Definições... 4 2. O que é HTML e onde utilizamos?... 4 3. Antes de desenvolver uma página... 4 4. O que significa o WWW?... 4 5. Podemos desenvolver
( Curso Introdutório) Versão 0.2a 6 de abril de 2005
Apostila de C.S.S. ( Curso Introdutório) Versão 0.2a 6 de abril de 2005 Prof. Luís Rodrigo de O. Gonçalves E-mail:luisrodrigoog@yahoo.com.br Site: http://www.lrodrigo.cjb.net OBS: partes deste documento
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/64/51151119.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 15/04/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Lista de tags, atributos
ORDENAMENTO SISTEMAS CORES
ORDENAMENTO SISTEMAS DE DE CORES ESPECIFICAÇÃO DA COR SISTEMAS QUANTITATIVOS Variáveis associadas a trí-estímulos Misturas aditivas de fontes primárias SISTEMAS SEMI-QUANTITATIVOS Base RGB + eixos de percepção
Professor Carlos Correia. 22 de Janeiro de 2007 Formação POEFDS
Professor Carlos Correia 22 de Janeiro de 2007 Formação POEFDS Com Amor pela paciência e dedicação que sempre senti da Ana, minha Mulher e melhor Amiga, que tornou possível este pequeno manual! Índice
Introdução ao HTML5 Canvas
Introdução ao HTML5 Canvas Compilação feita com base nas referências por: Prof. José Cintra http://www.josecintra.com/blog Download dos exemplos disponíveis no GitHub Apresentação O objetivo deste minicurso
HTML. Professor Edgar Caldeira da Cruz. Araras/SP
APOSTILA BÁSICA DE HTML Professor Edgar Caldeira da Cruz Araras/SP 2013 Introdução 1. Conhecendo a HTML: Os conceitos básicos e estrutura da linguagem HTML são apresentados neste capítulo. 2. Formatação
modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha
modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha (helder@) Modelo de apresentação gráfica Objetos em SVG são desenhados em contextos gráficos individuais Grupos,
LINGUAGEM DE PROGRAMAÇÃO HTML. Linguagem de Programação HTML. Autor: Fernanda Sampaio Cavalcante
Linguagem de Programação HTML Autor: Fernanda Sampaio Cavalcante 1 HTML 2 1. Introdução 8 1.1. Internet 8 1.2. Intranet 8 1.3. WWW (World Wide Web) 9 1.4. Web 9 1.5. Hipertexto 10 1.6. Links ou Hyperlinks
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
I. A LINGUAGEM HTML II. TAGS ESTRUTURA BÁSICA DE UM DOCUMENTO HTML
I. A LINGUAGEM HTML A linguagem HTML (Hyper Text Markup Language Linguagem de Marcação de Hipertexto) é uma linguagem utilizada para produzir páginas na Web (WWW World Wide Web), criada por Tim Berners-Lee
Instituto Federal de São Paulo IFSP Prof.a Tânia M. Preto. Gráficos no Dev-C++ usando a bibliteca graphics.h. 1. Dicas de instalação:
Instituto Federal de São Paulo IFSP Prof.a Tânia M. Preto Gráficos no Dev-C++ usando a bibliteca graphics.h Copiar os seguintes arquivos: graphics.h em C:\Dev-Cpp\include libbgi.a em C:\Dev-Cpp\lib 1.
Tinta Para Tecidos Dimensional 37ml PUFFY BLACK Tinta Para Tecidos Dimensional 37ml PUFFY RED
65317 65301 65305 65311 65300 Tinta Para Tecidos Dimensional 37ml MATTE BASIC BLACK 3 3 36 Tinta Para Tecidos Dimensional 37ml MATTE DANDELION YELLOW 3 3 36 Tinta Para Tecidos Dimensional 37ml MATTE REAL
Processamento Digital de Imagens
Processamento Digital de Imagens Aula 03 Prof. Diemesleno Souza Carvalho diemesleno@iftm.edu.br http://www.diemesleno.com.br Na aula passada vimos... Na aula passada vimos... Unidade II - Básico sobre
Folha Prática Nº4 HTML5. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática
Tecnologias Internet - 0/0, 0/0 Folha Prática Nº HTML . NAV UNIVERSIDADE DA BEIRA INTERIOR Tecnologias Internet - 0/0, 0/0 0 NAV: permite que um conjunto de links seja
Animação - Movendo objeto com HTML CANVAS
Animação - Movendo objeto com HTML CANVAS Para executar estes exemplos utilizaremos o site: https://www.tutorialspoint.com Escolha o opção JS (Javascript) Etapas básicas de animação Estas são as etapas
Apresentação na forma de pôster: usando L A TEX
Apresentação na forma de pôster: usando L A TEX Características Classe LATEX para a confecção de pôsteres de diferentes tamanhos. Desenvolvido por Gerlinde Kettl e Matthias Weiser, a partir da classe article.
Figuras e diagramas com TikZ
Figuras e diagramas com TikZ Lenimar N Andrade UFPB 28 de janeiro de 2015 Lenimar N Andrade (UFPB) Figuras e diagramas com TikZ 28 de janeiro de 2015 1 / 54 Sumário 1 Iniciando o TikZ 2 Usando comandos
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Utilização de Cores em HTML Cores primárias Cores secundárias 2 Utilização de Cores em HTML Os comprimentos de onda vermelho, amarelo
Processamento Digital de Imagens
Processamento Digital de Imagens Aula 02 Prof. Diemesleno Souza Carvalho diemesleno@iftm.edu.br http://www.diemesleno.com.br Na aula passada vimos... Na aula passada vimos... Unidade I - Introdução ao
Introdução a Programação de Jogos
Introdução a Programação de Jogos Aula 05 Introdução ao Löve Edirlei Soares de Lima Hello World em Löve function love.draw() love.graphics.print("hello World", 360, 300) end O comando
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
Receita. Introdução HTML & CSS. Neste projeto você aprenderá a criar uma página de internet para sua receita favorita. Lista de atividade
HTML & CSS 1 Receita All Code Clubs must be registered. By registering your club we can measure our impact, and we can continue to provide free resources that help children learn to code. You can register
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser
Introdução à Engenharia ENG1000
Introdução à Engenharia ENG1000 Aula 07 Introdução a Löve2D 2018.1 Prof. Augusto Baffa Hello World em Löve2D function love.draw() love.graphics.print("hello World", 360, 300) end
Ref.: 0709 Cor: branco/amarelo Color: white/ yellow Color: blanco/amarillo Tamanhos/Sizes/Tamaños: 33/4 _ 41/2
HAVAIANAS flat Mix Export: 4130351 Ref.: 0709 Cor: branco/amarelo Color: white/ yellow Color: blanco/amarillo Ref.: 5538 Cor: areia/ pink Color: sand grey/ pink Color: gris arena/ pink HAVAIANAS flat Mix
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 5 : CSS OBJECTIVO: O objetivo desta ficha é familiarizar-se com as folhas de estilos encadeados (Cascade Style Sheets CSS). RECOMENDAÇÕES: Sempre que necessário, procure informação adicional
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/75/71501484.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3. Prof. Dr. Daniel Caetano
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3 Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar os conceitos básicos da linguagem ActionScript 3.0 Capacitar o aluno para criar programas
Home Page, Página HTML ou Página WEB
Colégio São José Curso Técnico 2 3 Home Page, Página HTML ou Página WEB É um arquivo ou documento gravado como um arquivo de texto com a extensão HTM ou HTML, cujo conteúdo é composto de textos e códigos
Programas exemplo Gráficos no Dev-C++ usando a biblioteca BGI
Programas exemplo Gráficos no Dev-C++ usando a biblioteca BGI 1. Informações de instalação Copiar os seguintes arquivos: graphics.h em C:\Dev-Cpp\include libbgi.a em C:\Dev-Cpp\lib Abrir um projeto, ir
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
Criação de Animação com Sprite com HTML CANVAS
Criação de Animação com Sprite com HTML CANVAS Para executar estes exemplos utilizaremos nosso navegador, por causa dos arquivos de imagem. Exemplo 2 Sprites A sequência de Sprite utilizada neste exemplo
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3. Prof. Dr. Daniel Caetano
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3 Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar os conceitos básicos da linguagem ActionScript 3.0 Capacitar o aluno para criar programas
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
TV Digital com Ginga. NCLua Módulo Canvas
NCLua Módulo Canvas Módulo Canvas Um NCLua tem a possibilidade de fazer operações gráficas durante a apresentação de uma aplicação, tais como desenho de linhas, círculos, imagens, etc. Quando um NCLua
Tutorial Básico de HTML
Tutorial Básico de HTML Tutorial Básico de HTML HTML HTML é a abreviação de Hyper Text Markup Language, uma linguagem de marcação/descrição de páginas que utiliza códigos chamados TAG s, que ficam entre
USANDO O PAINT NOÇÕES BÁSICAS
USANDO O PAINT NOÇÕES BÁSICAS Professor: WELSING MOREIRA PEREIRA Sumário Usando o Paint... 3 Desenhando linhas... 3 Ferramenta Lápis... 4 Pincéis... 4 Ferramenta Linha... 4 Ferramenta Curva... 5 Desenhando
IFSC/Florianópolis - prof. Herval Daminelli
Existem cinco pseudoclasses associadas ao estado de um link. São elas: a:link - define o estilo do link no estado inicial; a:visited - define o estilo do link visitado; a:hover - define o estilo do link
SPEEDBALL ART. Gravura e Xilogravura. Tinta Óleo para Xilogravura. Tinta para Xilo Base de Água. Código Marcas e Descrição Emb.
Código Marcas e Descrição Emb. Gravura e Xilogravura #4142 Manchão para arte e gravura Red Baren uni R$ 129,00 #4139 Manchão para arte e gravura Baren uni R$ 242,00 #4117 Rolo para xilogravura arte 10cm
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança, especificidade do seletor e proximidade do elemento estilizado.
F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07
F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos
TOPOGRAFIA NO REVIT TOPOGRAFIA NO REVIT
TOPOGRAFIA NO REVIT Topografia não é o ponto mais forte do Revit. No entanto, é suficiente para básicas operações em projetos de construção. A ferramenta Toposurface define uma superfície topográfica usando
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com
Figura Uso de coordenadas polares
INTRODUÇÃO AO AUTOCAD O CAD trabalha com dois sistemas de coordenadas. O sistema de coordenadas cartesianas (Figura) e o sistema de coordenadas polares (Figura). No sistema de coordenadas cartesianas,
Tutorial Klogo Turtle
Tutorial Klogo Turtle Sumário Introdução...3 Comandos para Tartaruga...4 Movimentar para Frente...4 Movimentar para trás...4 Rotacionar para a Direita...6 Rotacionar para a Esquerda...6 Alterar a Cor do
Imagem e Gráficos. vetorial ou raster?
http://computacaografica.ic.uff.br/conteudocap1.html Imagem e Gráficos vetorial ou raster? UFF Computação Visual tem pelo menos 3 grades divisões: CG ou SI, AI e PI Diferença entre as áreas relacionadas
Cascading Style Sheets CSS
Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1 CSS: O que
08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão
Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior
Imagem ou Desenhos e Gráficos vetorial ou raster?
http://computacaografica.ic.uff.br/conteudocap1.html Imagem ou Desenhos e Gráficos vetorial ou raster? Computação Visual A CG (ou CV) tem pelo menos 3 grades divisões: SI (ou CG), AI e PI Inicialmente
Folha Prática Nº5 CSS. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática. Tecnologias Internet - 2011/2012
Folha Prática Nº CSS / Filipe Quinaz . Folhas de Estilo 0 Internas, delimitadas pela marca style h, h font-family: sans-serif; color: #CC;
Diretrizes de Utilização da Marca Corporativa. Manual de Identidade Visual da CTIS
Diretrizes de Utilização da Marca Corporativa Assinatura Visual O símbolo e o logotipo devem ser sempre usados com tamanho e relação de proporção fixos. Versão vertical Símbolo acima do logotipo. Esta
Estilo em Aplicações Hipermídia na Web
SCC0265 Sistemas Interativos Web Estilo em Aplicações Hipermídia na Web Renata Pontin M. Fortes (renata@icmc.usp.br) PAE: Willian Watanabe (watinha@gmail.com) Instituto de Ciências Matemáticas e de Computação
Cascading Style Sheets
Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,
Ferramentas do Flash CS3
Ferramentas do Flash CS3 Podemos dividir a Tools Bar nas seguintes secções: ferramentas, visionamento, cores e opções. Para mostrar ou ocultar a barra de ferramentas usamos o atalho: cmd+ F2. Ferramentas
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: <?xml?>, <!DOCTYPE>, <html>, <head>, <body>, <body bgcolor>.
MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: , , , , , . Conceitos básicos do funcionamento da Internet Internet
Minicurso L A TEX + Beamer - Aula 7
Minicurso L A TEX + Beamer - Aula 7 Prof. DSc. Bárbara Quintela Cursos de Verão PPGMC - 2016 1 PGF e TIKZ Coordenadas e pontos Caminhos Estilos de linha Escrevendo nomes Plotando 2 Tutorial PGF - Portable
Gráficos Comerciais na WEB com Chart.js
Gráficos Comerciais na WEB com Chart.js Compilação feita com base nas referências por: José Augusto Cintra Professor da Faculdade Sumaré SP Analista de TI da Empresa PRODAM SP josecintra@josecintra.com
Módulo I. Desejamos boa sorte e bom estudo! Em caso de dúvidas, contate-nos pelo site Atenciosamente Equipe Cursos 24 Horas
AutoCad 2D Módulo I Parabéns por participar de um curso dos Cursos 24 Horas. Você está investindo no seu futuro! Esperamos que este seja o começo de um grande sucesso em sua carreira. Desejamos boa sorte
5.2. Clarão em degradê https://docs.gimp.org/2.8/pt_br/plug-in-gflare.html Clarão em degradê. 5. Filtros de luz e sombra
5.2. Clarão em degradê 5. Filtros de luz e sombra Català Dansk Deutsch Ελληνικά English British Español Français Italiano 日本語 (Japanese) 한국어 (Korean) Nederlands Norwegian Português Pусский 中文 5.2. Clarão
Comandos Extras Formatações no CSS
Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro
01. Introdução. Nas próximas páginas, você conhecerá a marca da Fundação Odebrecht.
01. Introdução Nas próximas páginas, você conhecerá a marca da Fundação Odebrecht. Observe as regras de uso e, caso tenha dúvidas na aplicação, mande um e-mail para fundacao@odebrecht.com 02. Logomarca
Introdução 1 PARTE I: A LINGUAGEM DA WEB 5
Sumário Introdução 1 PARTE I: A LINGUAGEM DA WEB 5 Capítulo 1: Introdução a HTML5 7 Criando com tags: um panorama 8 Incorporando os novos elementos de HTML5 9 Usando tags válidas de HTML4 11 Esquecendo
HTML 5 e o desenvolvimento de Jogos Digitais
HTML 5 e o desenvolvimento de Jogos Digitais Marcelo Henrique dos Santos http://www.marcelohsantos.com marcelosantos@outlook.com Mestrando em Educação (em andamento) Negócios em Mídias Digitais (em andamento)
SS 10. Size. Crystal. Crystal HFT (001) Crystal A HF (001) Colors. Plain Colors. Amethyst A HF (204) Aquamarine A HF (202) Black Diamond A HF (215)
Crystal Crystal HFT (001) Crystal A HF (001) Colors Plain Colors Amethyst A HF (204) Aquamarine A HF (202) Black Diamond A HF (215) Blue Zircon A HF (229) Blush Rose A HF (257) Burgundy A HF (515) Capri
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a
A gama de garrafas desportivas H2O Active oferece uma forma refrescante para promover a sua marca. Existem várias possibilidades de personalização:
A gama de garrafas desportivas H2O Active oferece uma forma refrescante para promover a sua marca. Existem várias possibilidades de personalização: Escolha a forma e a capacidade da garrafa Grande variedade
Modelo de formateo visual em CSS
Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar Recordando Atributos das caixas largura borde margen fundo altura recheio Resumo Tipos de posicionamento. Visualização
Manual de Aplicação da Marca do BRB
Manual de Aplicação da Marca do BRB Banco de Brasília Superintendência de Marketing Dezembro de 2011 Redução Para garantir que a marca do BRB esteja sempre legível e não apresente ruídos, foi estabelecido
PCS TEXNUM: Texto e Números em Ponto Flutuante
PCS 2190 - TEXNUM: Texto e Números em Ponto Flutuante Ricardo Nakamura e Romero Tori 2015 1 Introdução Nesta aula vamos ver como utilizar textos e números reais em um programa e como desenhar textos no
Programação 2012/2013 1º Semestre MEEC Laboratório 2 Semana de 22 de Outubro de 2012
Programação 2012/2013 1º Semestre MEEC Laboratório 2 Semana de 22 de Outubro de 2012 1. Implemente os programas cujos fluxogramas foram definidos na aula de problemas da semana passada: Exercício 7- Calculo
CRIAR ILUSTRAÇA O DE ESPAÇO COM PLANETAS
CRIAR ILUSTRAÇA O DE ESPAÇO COM PLANETAS Vamos criar uma ilustração com uma cena do espaço parecida com a dos desenhos animados usando formas vetoriais simplificadas e cores sólidas. Veja como ilustrações
AULA 11. OBJETIVO: Conhecer e desenhar as Formas Geométricas VISÃO GERAL DA GEOMETRIA. Nesta aula vamos aprender a utilizar a classe Geometry.
AULA 11 OBJETIVO: Conhecer e desenhar as Formas Geométricas VISÃO GERAL DA GEOMETRIA Nesta aula vamos aprender a utilizar a classe Geometry. O QUE É UMA GEOMETRIA? A classe Geometry e as classes que derivam
ProE/ Creo Criação e montagem do mecanismo Limpador de para-brisas 1 palheta
ProE/ Creo Criação e montagem do mecanismo Limpador de para-brisas 1 palheta 1 1 Criação da base (Crie no diretório de trabalho uma pasta Montagem_1 para salvar as peças) 1.1 Desenhando a seção no ambiente
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
Comandos básicos do AutoCAD
Curso: Engenharia Ambiental Disciplina: Desenho técnico e Geometria Descritiva Professor: Luiz Antonio do Nascimento Aluno: Período: Manhã Aula: Data: RA: 1. Linhas Comandos básicos do AutoCAD Existem
Tutorial 2 Fireworks CS3. ..: Técnicas básicas para a ferramenta Caneta (Pen-tool) - Parte 1:..
Tutorial 2 Fireworks CS3..: Técnicas básicas para a ferramenta Caneta (Pen-tool) - Parte 1:.. ::Objetivo:: Mostrar algumas técnicas básicas de uso da ferramenta Caneta (Pen-Tool). Nesta primeira parte
Tecnologias para Web Design
Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente
Universidade Aberta da Terceira Idade Sub-Reitoria de Extensão e Cultura
MANUAL DA MARCA iversidade Aberta da Terceira Idade Este manual contém todos os elementos gráficos que representam a padronização visual da marca ati. Aqui são especificados todos os formatos, tamanhos,
Paradigmas de Programação React Native
Paradigmas de Programação React Native : Layout React Native justify-content / align-items / flex-direction Gil Eduardo de Andrade Introdução: O Flexbox (CSS Flexible Box Layout Model) tem como objetivo
ÍNDICE. PowerPoint CAPÍTULO 1... CAPÍTULO 2... CAPÍTULO 3...
ÍNDICE CAPÍTULO 1... Iniciando o PowerPoint 2016...08 Conhecendo a tela...09 Exibir réguas e grades...14 Slide mestre...16 Iniciar uma apresentação em branco...17 Abrir uma apresentação existente...17
Aula 4: Cores e Multimídia
Aula 4: Cores e Multimídia Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos como definir a cor da página e dos textos. Aprenderemos a incluir recursos multimídia de som e vídeo em
TUTORIAL DE MODELAGEM NO RHINOCEROS NESPRESSO. Micaela Benezra Maia Computação Gráfica I Prof. Eduardo Cardoso 2014/1
TUTORIAL DE MODELAGEM NO RHINOCEROS NESPRESSO Micaela Benezra Maia Computação Gráfica I Prof. Eduardo Cardoso 2014/1 1. Inicie com uma linha traçada horizontalmente na vista superior. Essa linha servirá
Relógio de sol Polar
1 The Sundial Primer "Guias de Mostradores" O objetivo dos "Guias de Mostradores" é fornecer um método fácil para estabelecer as linhas horárias para uma série de relógios de sol Polares localizados em
CSS. Karen Frigo Busolin
CSS Karen Frigo Busolin O que é CSS? Significa Cascading Style Sheets Estilos define como mostrar elementos HTML Estilos foram adicionandos no HTML 4.0 Estilos na solução de problemas HTML nunca deve a
Aula 9 Cores backgrounds
Aula 9 Cores backgrounds Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 E como fica a cor? 2 Background color Font color Border color 3 Mod elo R GB Red ue Bl Red: 255 (100%) Green Blue: 255 (100%) Green: