diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
commit | 68fc8e96a9629e73469ed457abd955e548ec670c (patch) | |
tree | 8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/web/api | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.gz translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.bz2 translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.zip |
unslug pt-br: move
Diffstat (limited to 'files/pt-br/web/api')
89 files changed, 8191 insertions, 1148 deletions
diff --git a/files/pt-br/web/api/audiocontext/currenttime/index.html b/files/pt-br/web/api/baseaudiocontext/currenttime/index.html index 71f3c9c894..71f3c9c894 100644 --- a/files/pt-br/web/api/audiocontext/currenttime/index.html +++ b/files/pt-br/web/api/baseaudiocontext/currenttime/index.html diff --git a/files/pt-br/web/api/battery_status_api/index.html b/files/pt-br/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..603750f72c --- /dev/null +++ b/files/pt-br/web/api/battery_status_api/index.html @@ -0,0 +1,58 @@ +--- +title: Battery Status API +slug: WebAPI/Battery_Status +tags: + - API + - Apps + - Batería + - Firefox OS + - Guia(2) + - Guía + - Mobile + - Obsoleto +translation_of: Web/API/Battery_Status_API +--- +<div>{{obsolete_header}}</div> + +<div>{{DefaultAPISidebar("Battery API")}}</div> + +<p>A <strong>API Battery Status</strong>, mais conhecida como <strong>Battery API</strong>, fornece informações sobre o nível de carga da bateria presente no sistema e permite que você seja notificado por eventos que são enviados quando os níveis sofrem alterações. Isto pode ser usado para ajustar a utilização de recursos do seu aplicativo, reduzindo a quantidade de energia drenada por ele quando a bateria estiver em nível baixo, ou ainda para salvar mudanças antes da bateria acabar, prevenindo a perda de dados.</p> + +<p>A API Battery Status API estende {{domxref("Window.navigator")}} com uma propriedade {{domxref("Navigator.battery")}} que é um objeto {{domxref("BatteryManager")}}, e adiciona alguns novos eventos que você pode receber para monitorar o status da bateria.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Neste exemplo, nós observamos as mudanças em ambos os status de carregamento (se estamos ou não conectados e carregando) e para mudanças no nível da bateria. Isto é feito escutando pelos eventos {{event("chargingchange")}} e {{event("levelchange")}}, respectivamente.</p> + +<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery; + +function updateBatteryStatus() { + console.log("Status da bateria: " + battery.level * 100 + " %"); + + if (battery.charging) { + console.log("A bateria está carregando"); + } +} + +battery.addEventListener("chargingchange", updateBatteryStatus); +battery.addEventListener("levelchange", updateBatteryStatus); +updateBatteryStatus(); +</pre> + +<p>Veja também <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">o exemplo na especificação</a>.</p> + +<h2 id="Especificações">Especificações</h2> + +<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Usando a API Battery API (em inglês)</a></li> + <li>{{domxref("BatteryManager")}}</li> + <li>{{domxref("Navigator.battery","navigator.battery")}}</li> +</ul> diff --git a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html b/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html index 4f5c402588..4f5c402588 100644 --- a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html +++ b/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html diff --git a/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..ca188eb6f9 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,76 @@ +--- +title: A basic ray-caster +slug: Web/HTML/Canvas/A_basic_ray-caster +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +<div>{{CanvasSidebar}}</div> + +<div class="summary"> +<p>Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando <em>ray-casting</em>.</p> +</div> + +<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p> + +<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Abrir em uma nova janela</a></strong></p> + +<h2 id="Why.3F" name="Why.3F">Porquê?</h2> + +<p>Depois de perceber, para meu deleite, que o elemento <canvas> que eu estava <a href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">lendo sobre</a> ele não estava apenas próximo de ser suportado pelo Firefox, mas que <strong>já</strong> estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.</p> + +<p>A <a href="/pt-BR/docs/Web/API/Canvas_API">visão geral do canvas</a> e o <a href="/pt-BR/docs/Canvas_tutorial">tutorial</a> que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.</p> + +<p> </p> + +<h2 id="How.3F" name="How.3F">Como?</h2> + +<p>A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.</p> + +<p>Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. <span id="result_box" lang="pt"><span title="As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall.">Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. </span><span title="The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line. + +">A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.</span><br> + <br> + <span title="The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070), and a java raycaster I found online, filtered through my compulsion to rename everything so it makes sense">O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMothe<em>Tricks</em> do <em>livro de Gurus de Programação de Jogos</em> <sub>(ISBN: 0672305070)</sub>, e um<a href="http://www.shinelife.co.uk/java-maze/"> jaspe raycaster</a> que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido </span><span title="to me, and all the tinkering that had to be done to make things work well. +">Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.</span></span></p> + +<p> </p> + +<h1 id="Resultados"><strong>Resultados</strong></h1> + +<p> </p> + +<p><br> + <span title="The canvas in Safari 2.0.1 performed surprisingly well.">A tela no Safari 2.0.1 apresentou surpreendentemente bem. </span><span title="With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini.">Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. </span><span title="Firefox 1.5 Beta 1 is even faster;">Firefox 1.5 Beta 1 é ainda mais rápido; </span><span title="I can run 320 x 240 at 24 fps with 4 pixel slivers.">Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. </span><span title="Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything.">Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. </span><span title="The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster. + +">O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.</span><br> + <br> + <span title="Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level.">Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. </span><span title="But I'm pretty confident all those things could be added given enough time.">Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. </span><span title="The canvas API supports pixel copying of images, so textures seem feasible.">A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. </span><span title="I'll leave that for another article, probably from another person.">Vou deixar isso para outro artigo, provavelmente de outra pessoa. </span><span title="=) +">=)</span></p> + +<p> </p> + +<h2 id="O_ray-caster"><strong>O ray-caster</strong></h2> + +<p> </p> + +<p><br> + <span title="The nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment I've posted the individual file contents as code listings (see below). + +">As pessoas agradáveis aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).</span><br> + <br> + <span title="So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <canvas> element and enjoy!">Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!</span><br> + <br> + <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> +</ul> diff --git a/files/pt-br/web/api/canvas_api/index.html b/files/pt-br/web/api/canvas_api/index.html new file mode 100644 index 0000000000..821909e726 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/index.html @@ -0,0 +1,134 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - Referência(2) +translation_of: Web/API/Canvas_API +--- +<p>{{CanvasSidebar}}</p> + +<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.</p> + +<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code><canvas></code>, desenha gráficos 2D e 3D acelerados por hardware.</p> + +<h2 id="Exemplo_básico">Exemplo básico</h2> + +<p>Este exemplo simples desenha um retângulo verde para um canvas.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <code><canvas></code>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.</p> + +<p>O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.</p> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 150, 100); +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}</p> + +<h2 id="Referência">Referência</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasImageSource")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("RenderingContext")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}</li> + <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> +</div> + +<p>{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.</p> + +<h2 id="Guias_e_Tutoriais">Guias e Tutoriais</h2> + +<dl> + <dt></dt> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt> + <dd>Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.</dd> + <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Mergulhando no Canvas HTML5</a></dt> + <dd>Uma introdução prática e extensa à API Canvas e WebGL.</dd> + <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Guia Canvas</a></dt> + <dd>Uma referência acessível para a API Canvas.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt> + <dd>Uma demonstração de animação <em>ray-tracing</em> usando canvas.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt> + <dd>Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.</dd> +</dl> + +<h2 id="Bibliotecas">Bibliotecas</h2> + +<p>A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.</p> + +<ul> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a> é uma biblioteca de código aberto que facilita criações de jogos, arte generativa e outras experiências altamente gráficas.</li> + <li><a href="http://fabricjs.com/">Fabric.js</a> é uma biblioteca código aberto em canvas com suporte à SVG.</li> + <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> é uma biblioteca de código aberto para criar mapas de calor (heatmaps) baseados em canvas.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> cria visualizações de dados interativas.</li> + <li><a href="https://konvajs.github.io/">Konva.js</a> é uma biblioteca de canvas 2D para aplicações <em>desktop</em> e móveis.</li> + <li><a href="https://p5js.org/">p5.js </a>tem um conjunto completo de funcionalidades de desenho canvas para artistas, <em>designers</em>, educadores e iniciantes.</li> + <li><a href="http://paperjs.org/">Paper.js</a> é um framework de código-aberto para scripting de vetores gŕaficos que funciona sobre o Canvas HTML5.</li> + <li><a href="https://phaser.io/">Phaser</a> é um framework de código-aberto rápido, grátis e divertido para jogos de navegador desenvolvidos com Canvas e WebGL.</li> + <li><a href="http://processingjs.org/">Processing.js</a> é um conversor da linguagem de visualização Processing.</li> + <li><a href="https://ptsjs.org/">Pts.js</a> é uma biblioteca para codificação criativa e visualização em canvas e SVG.</li> + <li><a href="https://github.com/jeremyckahn/rekapi">Rekapi</a> é uma API de animação <em>key-framing</em> para Canvas.</li> + <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.</li> + <li>O framework <a href="http://zimjs.com/">ZIM</a> provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Veja a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<div class="section"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<p>Aplicações Mozilla ganharam suporte para <code><canvas></code> a partir do Gecko 1.8 (<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code><canvas></code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code><canvas></code>.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li> +</ul> diff --git a/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..23f072420e --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,386 @@ +--- +title: Advanced animations +slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations +tags: + - Animation + - Animations + - Canvas + - animated + - efeitos em animações +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> + +<div class="summary"> +<p>No último capítulo nós fizemos algumas <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animações básicas </a> e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.</p> +</div> + +<h2 id="Desenhe_uma_bola">Desenhe uma bola</h2> + +<p>Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.</p> + +<pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> +</pre> + +<p> Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +var ball = { + x: 100, + y: 100, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +ball.draw();</pre> + +<p>Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de </p> + +<p>{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} method.</p> + +<h2 id="Adicionando_velocidade">Adicionando velocidade</h2> + +<p>Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">último capítulo</a> deste tutorial. Denovo, {{domxref("window.requestAnimationFrame()")}} ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}o canvas para remover velhor círculos da prioridade dos frames.</p> + +<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw(); +</pre> + +<h2 id="Limites">Limites</h2> + +<p>Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():</p> + +<pre class="brush: js">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; +} +if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; +}</pre> + +<h3 id="Primeira_demonstração">Primeira demonstração</h3> + +<p>Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p> + +<h2 id="Aceleração">Aceleração</h2> + +<p>Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:</p> + +<pre class="brush: js">ball.vy *= .99; +ball.vy += .25;</pre> + +<p>Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.</p> + +<div class="hidden"> +<h6 id="Second_demo">Second demo</h6> + +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p> + +<h2 id="Efeito_de_arrastar">Efeito de arrastar</h2> + +<p>Até agora nós temos feito uso do {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} méthodo quando limpar as prioridades do frame.Se você substituir este método com um semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, você pode fácilmente criar um efeito de arrastar.</p> + +<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; +ctx.fillRect(0, 0, canvas.width, canvas.height);</pre> + +<div class="hidden"> +<h6 id="Third_demo">Third demo</h6> + +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e) { + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> + +<h2 id="Adicione_um_controle_de_mouse">Adicione um controle de mouse</h2> + +<p> </p> + +<p>Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento <a href="/en-US/docs/Web/Reference/Events/mousemove">mouseover</a>, por exemplo. O <a href="/en-US/docs/Web/Events/click">clique </a>por exemplo. O evento <code><a href="/en-US/docs/Web/Events/click">clique </a>que</code> libera a bola e deixa seu limite de novo.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +</div> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; +var running = false; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 1, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function clear() { + ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; + ctx.fillRect(0,0,canvas.width,canvas.height); +} + +function draw() { + clear(); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mousemove', function(e) { + if (!running) { + clear(); + ball.x = e.clientX; + ball.y = e.clientY; + ball.draw(); + } +}); + +canvas.addEventListener('click', function(e) { + if (!running) { + raf = window.requestAnimationFrame(draw); + running = true; + } +}); + +canvas.addEventListener('mouseout', function(e) { + window.cancelAnimationFrame(raf); + running = false; +}); + +ball.draw(); +</pre> + +<p>Mova a bola usando seu mouse e libere - o com um clique.</p> + +<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p> + +<h2 id="Sair">Sair</h2> + +<p>Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a>? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.</p> + +<h2 id="Veja_também">Veja também:</h2> + +<ul> + <li>{{domxref("window.requestAnimationFrame()")}}</li> + <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..f711570b9f --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,725 @@ +--- +title: Aplicando estilos e cores +slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> + +<div class="summary"> +<p><span id="result_box" lang="pt"><span>No capítulo sobre</span></span> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">desenhando formas com canvas</a>, <span id="result_box" lang="pt"><span>usamos apenas os estilos padrões de preenchimento e linha.</span> <span>Aqui vamos explorar as opções do canvas que temos à nossa disposição para tornar nossos desenhos um pouco mais atraentes.</span> <span>Você aprenderá a adicionar cores diferentes, estilos de linhas, gradientes, padrões e sombras aos seus desenhos.</span></span></p> +</div> + +<h2 id="Colors" name="Colors">Cores</h2> + +<p><span id="result_box" lang="pt"><span>Até agora só vimos métodos do contexto de desenho.</span> <span>Se quisermos aplicar cores a uma forma, existem duas propriedades importantes que podemos utilizar:</span></span> <code>fillStyle</code> e <code>strokeStyle</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt> + <dd><span class="short_text" id="result_box" lang="pt"><span>Define o estilo usado ao preencher (fill) formas</span></span>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt> + <dd><span class="short_text" id="result_box" lang="pt"><span>Define o estilo para os contornos (strokes) das formas.</span></span></dd> +</dl> + +<p><code>color</code> é uma string que representa um CSS {{cssxref("<color>")}}, um objeto gradiente, ou um objeto padrão. <span id="result_box" lang="pt"><span>Examinaremos sobre objetos de gradiente e padrão mais tarde.</span> <span>Por padrão, a cor do contorno (stroke color) e a cor de preenchimento (fill color) estão definidos como preto</span></span> (valor de cor no CSS é <code>#000000</code>).</p> + +<div class="note"> +<p><strong>Nota:</strong> Quando você definir as propriedades <code>strokeStyle</code> e/ou <code>fillStyle</code> , o novo valor será o padrão para todas as formas desenhadas a partir de então. Para toda forma que você quiser uma cor diferente, você vai precisar alterar o valor da propriedade <code>fillStyle</code> ou <code>strokeStyle</code>.</p> +</div> + +<p>As strings validas que você pode inserir devem, de acordo com a especificação ser valores CSS {{cssxref("<color>")}}. Cada um dos exemplos a seguir, descrevem a mesma cor.</p> + +<pre class="brush: js notranslate">// 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)'; +</pre> + +<h3 id="A_fillStyle_example" name="A_fillStyle_example">Um <code>fillStyle</code> exemplo</h3> + +<p>Neste exemplo, nós vamos mais uma vez utilizar dois <code>for</code> loops para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem do resultado, deve parecer como a captura de tela. Não existe nada de muito espetacular acontecendo aqui. Nós usamos as duas variéveis <code>i</code> and <code>j</code> para gerar uma única cor em RGB para cada quadrado, e apenas modificando os valores vermelho e verde. O canal azul possui um valor fixo. Modificando os canais, você pode gerar todos os tipos de paletas. Aumentando os passos, você pode alcançar algo que se parece com a paleta de cores dos usuários de Photoshop.</p> + +<pre class="brush: js;highlight[5,6] notranslate">function draw() { + var ctx = document.getElementById('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); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>O resultado se parece com isto:</p> + +<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Um <code>strokeStyle</code> exemplo</h3> + +<p>Este exemplo é similar com o anterior, porém utiliza a propriedade <code>strokeStyle</code> para alterar a cor de contorno das formas. Nós usamos o método <code>arc()</code> para desenhar círculos ao invés de quadrados.</p> + +<pre class="brush: js;highlight[5,6] notranslate"> 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(); + } + } + } +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>O resultado se parece com isto:</p> + +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> + +<h5 id="Transparency" name="Transparency">Transparência<br> + Além de desenhar formas opacas na tela, também podemos desenhar formas semi-transparentes (ou translúcidas). Isso é feito definindo a propriedade globalAlpha ou atribuindo uma cor semitransparente ao estilo de stroke e / ou fill style.</h5> + +<dl> + <dt> + <h5 id="domxrefCanvasRenderingContext2D.globalAlpha_globalAlpha_transparencyValue">{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</h5> + </dt> + <dd> + <p>Aplica o valor de transparência especificado a todas as formas futuras desenhadas na tela. O valor deve estar entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Este valor é 1.0 (totalmente opaco) por padrão.<br> + A propriedade globalAlpha pode ser útil se você quiser desenhar muitas formas na tela com transparência semelhante, mas, caso contrário, geralmente é mais útil definir a transparência em formas individuais ao definir suas cores.</p> + + <p>Como as propriedades strokeStyle e fillStyle aceitam os valores de cor CSS rgba, podemos usar a notação a seguir para atribuir uma cor transparente a eles.</p> + </dd> +</dl> + +<pre class="brush: js notranslate">// Assigning transparent colors to stroke and fill style + +ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'; +ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; +</pre> + +<p>A função rgba () é semelhante à função rgb (), mas possui um parâmetro extra. O último parâmetro define o valor da transparência dessa cor específica. O intervalo válido é novamente entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).</p> + +<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Um exemplo globalAlpha</h3> + +<p>Neste exemplo, desenharemos um plano de fundo de quatro quadrados coloridos diferentes. Além disso, desenharemos um conjunto de círculos semi-transparentes. A propriedade globalAlpha é configurada em 0.2, que será usada para todas as formas a partir desse ponto. Cada passo no loop for desenha um conjunto de círculos com um raio crescente. O resultado final é um gradiente radial. Ao sobrepor cada vez mais círculos um sobre o outro, reduzimos efetivamente a transparência dos círculos que já foram desenhados. Ao aumentar a contagem de etapas e, com efeito, desenhar mais círculos, o plano de fundo desapareceria completamente do centro da imagem.</p> + +<pre class="brush: js;highlight[15] notranslate">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++) { + ctx.beginPath(); + ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); + ctx.fill(); + } +}</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> + +<h3 id="An_example_using_rgba" name="An_example_using_rgba()">Um exemplo usando o <code>rgba()</code></h3> + +<p>Neste segundo exemplo, fazemos algo semelhante ao anterior, mas em vez de desenhar círculos uns sobre os outros, desenhei pequenos retângulos com crescente opacidade. O uso de rgba () oferece um pouco mais de controle e flexibilidade, pois podemos definir o estilo de preenchimento e traçado/stroke individualmente.</p> + +<pre class="brush: js;highlight[16] notranslate">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); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> + +<h2 id="Line_styles" name="Line_styles">Line styles</h2> + +<p>Existem várias propriedades que permitem estilizar linhas.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt> + <dd>Define a largura das linhas desenhadas no futuro.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt> + <dd>Define a aparência dos fins das linhas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt> + <dd>Define a aparência dos "cantos" onde as linhas se encontram.</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt> + <dd>Estabelece um limite na mitra quando duas linhas se juntam em um ângulo agudo, para permitir controlar a espessura da junção.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt> + <dd>Retorna a matriz de padrão de traço de linha atual que contém um número par de números não negativos</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt> + <dd><span style="">Define o padrão de traço da linha atual.</span></dd> + <dd><strong style="">{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</strong></dd> + <dd>Especifica onde iniciar uma matriz de traços em uma linha.</dd> +</dl> + +<p>Você entenderá melhor o que eles fazem observando os exemplos abaixo.</p> + +<h3 id="A_lineWidth_example" name="A_lineWidth_example"><span style="">Um exemplo lineWidth</span></h3> + +<p>A largura da linha é a espessura do traçado centralizado no caminho especificado. Em outras palavras, a área desenhada se estende até a metade da largura da linha em ambos os lados do caminho.</p> + +<p> 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.</p> + +<p>No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linhas crescentes. A linha na extrema esquerda tem 1,0 unidades de largura. No entanto, as linhas de espessura à esquerda e todas as outras linhas com número inteiro ímpar não aparecem nítidas, devido ao posicionamento do caminho.</p> + +<pre class="brush: js;highlight[4] notranslate">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(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> + +<p>A obtenção de linhas nítidas requer a compreensão de como os caminhos são traçados. Nas imagens abaixo, a grade representa a grade de coordenadas da tela. Os quadrados entre as linhas de grade são pixels reais na tela. Na primeira imagem da grade abaixo, um retângulo de (2,1) a (5,5) é preenchido. A área inteira entre eles (vermelho claro) cai nos limites dos pixels, portanto, o retângulo preenchido resultante terá bordas nítidas.<br> + <img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p> + +<p>Se você considerar um caminho de (3,1) a (3,5) com uma espessura de linha de 1,0, você terminará com a situação na segunda imagem. A área real a ser preenchida (azul escuro) se estende apenas até a metade dos pixels dos dois lados do caminho. Uma aproximação disso deve ser renderizada, o que significa que esses pixels são sombreados apenas parcialmente e resultam em toda a área (azul claro e azul escuro) sendo preenchida com uma cor apenas metade da escuridão da cor real do traço. É o que acontece com a linha de largura 1.0 no código de exemplo anterior.</p> + +<p>Para corrigir isso, você precisa ser muito preciso na criação do seu caminho. Sabendo que uma linha de largura 1,0 estenderá meia unidade para ambos os lados do caminho, criar o caminho de (3,5,1) a (3,5,5) resulta na situação da terceira imagem - a largura da linha 1,0 termina completamente e preenchendo com precisão uma única linha vertical de pixel.<br> + </p> + +<div class="note"> +<p><strong>Nota: Esteja ciente de que, no nosso exemplo de linha vertical, a posição Y ainda faz referência a uma posição de linha de grade inteira - se não tivesse, veríamos pixels com meia cobertura nos pontos de extremidade (mas observe também que esse comportamento depende do estilo lineCap atual cujo valor padrão é butt; você pode calcular traçados consistentes com coordenadas de meio pixel para linhas de largura ímpar, configurando o estilo lineCap como quadrado, para que a borda externa do traçado ao redor do ponto de extremidade seja estendida automaticamente para cobrir o pixel inteiro exatamente).</strong></p> + +<p>Observe também que apenas os pontos de extremidade inicial e final de um caminho são afetados: se um caminho for fechado com closePath (), não haverá ponto inicial e final; em vez disso, todos os pontos de extremidade no caminho são conectados ao segmento anterior e ao próximo anexado usando a configuração atual do estilo lineJoin, cujo valor padrão é mitra, com o efeito de estender automaticamente as bordas externas dos segmentos conectados ao seu ponto de interseção. que o traçado renderizado cobrirá exatamente os pixels completos centralizados em cada ponto final se esses segmentos conectados forem horizontais e / ou verticais). Veja as próximas duas seções para demonstrações desses estilos de linha adicionais.</p> +</div> + +<p>Para linhas de largura uniforme, cada metade acaba sendo uma quantidade inteira de pixels, portanto, você deseja um caminho entre pixels (ou seja, (3,1) a (3,5)), em vez de no meio dos pixels .</p> + +<p>Embora seja um pouco doloroso ao trabalhar inicialmente com gráficos 2D escalonáveis, prestar atenção à grade de pixels e à posição dos caminhos garante que seus desenhos pareçam corretos, independentemente da escala ou de qualquer outra transformação envolvida. Uma linha vertical de 1,0 largura desenhada na posição correta se tornará uma linha nítida de 2 pixels quando aumentada em 2 e aparecerá na posição correta.</p> + +<h3 id="A_lineCap_example" name="A_lineCap_example">Exemplo lineCap.</h3> + +<p>A propriedade lineCap determina como os pontos finais de cada linha são desenhados. Existem três valores possíveis para essa propriedade e são: bunda, redondo e quadrado. Por padrão, essa propriedade está configurada para butt.<img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>butt</code></dt> + <dd>As extremidades das linhas são quadradas nos pontos finais.</dd> + <dt><code>round</code></dt> + <dd>As extremidades das linhas são arredondadas.<br> + arredondadas.</dd> + <dt><code>square</code></dt> + <dd>As extremidades das linhas são ajustadas ao quadrado, adicionando uma caixa com a mesma largura e metade da altura da espessura da linha.</dd> +</dl> + +<p>Neste exemplo, desenharemos três linhas, cada uma com um valor diferente para a propriedade lineCap. 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.</p> + +<p>A linha à esquerda usa a opção de topo padrão. Você notará que está desenhado completamente alinhado com as guias. O segundo está definido para usar a opção redonda. Isso adiciona um semicírculo ao final que tem um raio com 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.</p> + +<pre class="brush: js;highlight[18] notranslate">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(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h3 id="A_lineJoin_example" name="A_lineJoin_example">Um exemplo de lineJoin</h3> + +<p>A propriedade lineJoin determina como dois segmentos de conexão (de linhas, arcos ou curvas) com comprimentos diferentes de zero em uma forma são unidos (segmentos degenerados com comprimentos zero, cujos pontos finais e pontos de controle especificados são exatamente na mesma posição, são ignorados) .</p> + +<p>Existem três valores possíveis para essa propriedade: round, chanfro e mitra. Por padrão, essa propriedade está configurada para mitra. Observe que a configuração lineJoin não terá efeito se os dois segmentos conectados tiverem a mesma direção, porque nenhuma área de junção será adicionada neste caso.<img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>round</code></dt> + <dd>Arredonda os cantos de uma forma preenchendo um setor adicional de disco centralizado no ponto final comum dos segmentos conectados. O raio desses cantos arredondados é igual à metade da largura da linha.</dd> + <dt><code>bevel</code></dt> + <dd>Preenche uma área triangular adicional entre o ponto final comum dos segmentos conectados e os cantos retangulares externos separados de cada segmento.</dd> + <dt><code>miter</code></dt> + <dd>Os segmentos conectados são unidos estendendo suas bordas externas para se conectarem em um único ponto, com o efeito de preencher uma área adicional em forma de losango. Essa configuração é efetuada pela propriedade miterLimit, explicada abaixo.</dd> +</dl> + +<p>O exemplo abaixo desenha três caminhos diferentes, demonstrando cada uma dessas três configurações de propriedade lineJoin; a saída é mostrada acima.</p> + +<pre class="brush: js;highlight[6] notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineJoin = ['round', 'bevel', 'miter']; + ctx.lineWidth = 10; + for (var i = 0; i < lineJoin.length; i++) { + ctx.lineJoin = lineJoin[i]; + ctx.beginPath(); + ctx.moveTo(-5, 5 + i * 40); + ctx.lineTo(35, 45 + i * 40); + ctx.lineTo(75, 5 + i * 40); + ctx.lineTo(115, 45 + i * 40); + ctx.lineTo(155, 5 + i * 40); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> + +<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Uma demonstração da propriedade miterLimit</h3> + +<p>Como você viu no exemplo anterior, ao unir duas linhas com a opção de esquadria, as bordas externas das duas linhas de junção são estendidas até o ponto em que elas se encontram. Para linhas com ângulos amplos entre si, esse ponto não está longe do ponto de conexão interno. No entanto, à medida que os ângulos entre cada linha diminuem, a distância (comprimento da mitra) entre esses pontos aumenta exponencialmente.</p> + +<p>A propriedade miterLimit determina a que distância o ponto de conexão externo pode ser colocado do ponto de conexão interno. Se duas linhas excederem esse valor, uma junção de chanfro será desenhada. Observe que o comprimento máximo da esquadria é o produto da largura da linha medida no sistema de coordenadas atual, pelo valor dessa propriedade miterLimit (cujo valor padrão é 10.0 no HTML {{HTMLElement ("canvas")}}}), portanto, o O miterLimit pode ser definido independentemente da escala de exibição atual ou de quaisquer transformações afins de caminhos: apenas influencia a forma efetivamente renderizada das arestas da linha.</p> + +<p>Mais exatamente, o limite da mitra é a proporção máxima permitida do comprimento da extensão (na tela HTML, é medida entre o canto externo das arestas unidas da linha e o ponto de extremidade comum dos segmentos de conexão especificados no caminho) pela metade do espessura da linha. Pode ser definido de maneira equivalente como a proporção máxima permitida da distância entre os pontos interno e externo da junção das arestas e a largura total da linha. Em seguida, é igual ao coecante da metade do ângulo interno mínimo dos segmentos de conexão abaixo dos quais nenhuma junção de esquadria será renderizada, mas apenas uma junção de chanfro:</p> + +<ul> + <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li> + <li>O limite padrão de esquadria de 10.0 removerá todos os mitros para ângulos agudos abaixo de 11 graus.</li> + <li>Um limite de esquadria igual a √2 ≈ 1.4142136 (arredondado para cima) retira os mitros para todos os ângulos agudos, mantendo as juntas de esquadria apenas para ângulos obtusos ou retos.</li> + <li>Um limite de mitra igual a 1,0 é válido, mas desativará todos os atenuadores.</li> + <li>Valores abaixo de 1,0 são inválidos para o limite de mitra.</li> +</ul> + +<p>Aqui está uma pequena demonstração na qual você pode definir o mitreLimit dinamicamente e ver como isso afeta as formas na tela. As linhas azuis mostram onde estão os pontos inicial e final de cada uma das linhas no padrão em zigue-zague.</p> + +<p>Se você especificar um valor de miterLimite abaixo de 4.2 nesta demonstração, nenhum dos cantos visíveis poderá ser uma extensão de mitra, mas apenas com um pequeno canal próximo às linhas azuis; com um limite máximo acima de 10, a maioria dos cantos nesta demonstração deve ser levada a uma meia-esquadria das linhas azuis e a altura está diminuindo entre os cantos da esquerda para a direita porque eles estão conectados com ângulos crescentes; com valores intermediários, os cantos do lado esquerdo ou apenas um canto próximo às linhas azuis e os cantos do lado direito com uma extensão de esquadria (também com uma altura decrescente).</p> + +<pre class="brush: js;highlight[18] notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Clear canvas + ctx.clearRect(0, 0, 150, 150); + + // Draw guides + ctx.strokeStyle = '#09f'; + ctx.lineWidth = 2; + ctx.strokeRect(-5, 50, 160, 50); + + // Set line styles + ctx.strokeStyle = '#000'; + ctx.lineWidth = 10; + + // check input + if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { + ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); + } else { + alert('Value must be a positive number'); + } + + // Draw lines + ctx.beginPath(); + ctx.moveTo(0, 100); + for (i = 0; i < 24 ; i++){ + var dy = i % 2 == 0 ? 25 : -25 ; + ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy); + } + ctx.stroke(); + return false; +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><table> + <tr> + <td><canvas id="canvas" width="150" height="150"></canvas></td> + <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> + <form onsubmit="return draw();"> + <label>Miter limit</label> + <input type="text" size="3" id="miterLimit"/> + <input type="submit" value="Redraw"/> + </form> + </td> + </tr> +</table></pre> + +<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p> + +<h3 id="Usando_linhas_tracejadas">Usando linhas tracejadas</h3> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">O método </span></font>setLineDash</code> e a propriedade <code>lineDashOffset</code> especificam o padrão de traço para as linhas. O método <code>setLineDash</code> aceita uma lista de números que especificam distâncias para desenhar alternadamente entre uma linha e uma lacuna. Já a propriedade <code>lineDashOffset</code> define a distância até onde se deve iniciar a linha.</p> + +<p>Neste exemplo, criaremos um efeito de formigas caminhando. É uma técnica de animação frequentemente usada em computação gráfica, pois ajuda o usuário a fazer uma distinção entre a borda e o plano de fundo animando a borda. Mais tarde neste tutorial, você aprenderá como fazer <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animações básicas</a>.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="110" height="110"></canvas></pre> +</div> + +<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d'); +var offset = 0; + +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.setLineDash([4, 2]); + ctx.lineDashOffset = -offset; + ctx.strokeRect(10, 10, 100, 100); +} + +function march() { + offset++; + if (offset > 16) { + offset = 0; + } + draw(); + setTimeout(march, 20); +} + +march();</pre> + +<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p> + +<h2 id="Gradients" name="Gradients">Gradients</h2> + +<p>Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the <code>fillStyle</code> or <code>strokeStyle</code> properties.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt> + <dd>Creates a linear gradient object with a starting point of (<code>x1</code>, <code>y1</code>) and an end point of (<code>x2</code>, <code>y2</code>).</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt> + <dd>Creates a radial gradient. The parameters represent two circles, one with its center at (<code>x1</code>, <code>y1</code>) and a radius of <code>r1</code>, and the other with its center at (<code>x2</code>, <code>y2</code>) with a radius of <code>r2</code>.</dd> +</dl> + +<p>For example:</p> + +<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); +</pre> + +<p>Once we've created a <code>CanvasGradient</code> object we can assign colors to it by using the <code>addColorStop()</code> method.</p> + +<dl> + <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt> + <dd>Creates a new color stop on the <code>gradient</code> object. The <code>position</code> is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the <code>color</code> argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.</dd> +</dl> + +<p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p> + +<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +lineargradient.addColorStop(0, 'white'); +lineargradient.addColorStop(1, 'black'); +</pre> + +<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">A <code>createLinearGradient</code> example</h3> + +<p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p> + +<pre class="brush: js;highlight[5,11] notranslate">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); + +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p> + +<p>In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.</p> + +<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p> + +<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">A <code>createRadialGradient</code> example</h3> + +<p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p> + +<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Create gradients + var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); + radgrad.addColorStop(0, '#A7D30C'); + radgrad.addColorStop(0.9, '#019F62'); + radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)'); + + var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50); + radgrad2.addColorStop(0, '#FF5F98'); + radgrad2.addColorStop(0.75, '#FF0188'); + radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)'); + + var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40); + radgrad3.addColorStop(0, '#00C9FF'); + radgrad3.addColorStop(0.8, '#00B5E2'); + radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)'); + + var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90); + radgrad4.addColorStop(0, '#F4F201'); + radgrad4.addColorStop(0.8, '#E4C700'); + radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)'); + + // draw shapes + ctx.fillStyle = radgrad4; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad3; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad2; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad; + ctx.fillRect(0, 0, 150, 150); +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p> + +<p>The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p> + +<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p> + +<h2 id="Patterns" name="Patterns">Patterns</h2> + +<p>In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the <code>createPattern()</code> method.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> + <dd>Creates and returns a new canvas pattern object. <code>image</code> is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. <code>type</code> is a string indicating how to use the image.</dd> +</dl> + +<p>The type specifies how to use the image in order to create the pattern, and must be one of the following string values:</p> + +<dl> + <dt><code>repeat</code></dt> + <dd>Tiles the image in both vertical and horizontal directions.</dd> + <dt><code>repeat-x</code></dt> + <dd>Tiles the image horizontally but not vertically.</dd> + <dt><code>repeat-y</code></dt> + <dd>Tiles the image vertically but not horizontally.</dd> + <dt><code>no-repeat</code></dt> + <dd>Doesn't tile the image. It's used only once.</dd> +</dl> + +<p>We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the <code>fillStyle</code> or <code>strokeStyle</code> properties. For example:</p> + +<pre class="brush: js notranslate">var img = new Image(); +img.src = 'someimage.png'; +var ptrn = ctx.createPattern(img, 'repeat'); +</pre> + +<div class="note"> +<p><strong>Note:</strong> Like with the <code>drawImage()</code> method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.</p> +</div> + +<h3 id="A_createPattern_example" name="A_createPattern_example">A <code>createPattern</code> example</h3> + +<p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p> + +<pre class="brush: js;highlight[10] notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // create new image object to use as pattern + var img = new Image(); + img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; + img.onload = function() { + + // create pattern + var ptrn = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = ptrn; + ctx.fillRect(0, 0, 150, 150); + + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> + +<p>The result looks like this:</p> +</div> + +<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p> + +<h2 id="Shadows">Shadows</h2> + +<p>Using shadows involves just four properties:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt> + <dd>Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt> + <dd>Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt> + <dd>Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt> + <dd>A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</dd> +</dl> + +<p>The properties <code>shadowOffsetX</code> and <code>shadowOffsetY</code> indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.</p> + +<p>The <code>shadowBlur</code> property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</p> + +<p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p> + +<div class="note"> +<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p> +</div> + +<h3 id="A_shadowed_text_example">A shadowed text example</h3> + +<p>This example draws a text string with a shadowing effect.</p> + +<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 2; + ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; + + ctx.font = '20px Times New Roman'; + ctx.fillStyle = 'Black'; + ctx.fillText('Sample String', 5, 30); +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="80"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> + +<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p> + +<h2 id="Canvas_fill_rules">Canvas fill rules</h2> + +<p>When using <code>fill</code> (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.<br> + <br> + Two values are possible:</p> + +<ul> + <li><code><strong>"nonzero</strong></code>": The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, which is the default rule.</li> + <li><code><strong>"evenodd"</strong></code>: The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a>.</li> +</ul> + +<p>In this example we are using the <code>evenodd</code> rule.</p> + +<pre class="brush: js;highlight[6] notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.beginPath(); + ctx.arc(50, 50, 30, 0, Math.PI * 2, true); + ctx.arc(50, 50, 15, 0, Math.PI * 2, true); + ctx.fill('evenodd'); +}</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><canvas id="canvas" width="100" height="100"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p> diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..125e0874a7 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,331 @@ +--- +title: Basic animations +slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +<p>Já que estamos usando JavaScript para controlar {{HTMLElement("canvas")}} elementos, também é muito fácil criar animações interativas. Fazer animações mais complexas pode levar um tempo extra; esperamos introduzir um novo artigo para auxiliar sobre isso em breve.</p> + +<p>Provavelmente a maior limitação é que uma vez que uma forma é desenhada, ela permanece assim. Se precisarmos mover, temos que redesenhar-lá e tudo que foi desenhado antes. Demora muito tempo pra redesenhar frames complexos e a desempenho depende altamente da velocidade do computador em que está rodando.</p> + +<h2 id="Basic_animation_steps" name="Basic_animation_steps">Passos para animação básica</h2> + +<p>Estes são os passos que você precisa para desenhar um frame:</p> + +<ol> + <li><strong>Limpe o canvas</strong><br> + A menos que a forma que você vai desenhar preencha o canvas completo(por exemplo, uma imagem de fundo), você precisa limpar todas as formas que foram desenhadas anteriormente. O caminho mais fácil para fazer isso é usando o método clearRect().</li> + <li><strong>Salve o estado da tela</strong><br> + Se você estiver mudando alguma configuração(como estilos, transformações, etc.) que afete o estado do canvas e você quer garantir que o estado original seja usado sempre que um quadro é desenhado, você precisa salvar esse estado original.</li> + <li><strong>Desenhe formas animadas</strong><br> + A etapa em que você faz a renderização real do quadro.</li> + <li><strong>Restaure o estado do canvas</strong><br> + Se você salvou o estado, restaure-o antes de desenhar um novo quadro.</li> +</ol> + +<h2 id="Controlling_an_animation" name="Controlling_an_animation">Controlando uma animação</h2> + +<p>Formas são desenhos na tela usando os canvas métodos diretamente ou chamando personalizadas. Em circunstancias normais, nós somente vemos esses resultados aparecerem na tela quando o script termina de ser executado. Por exemplo, não é possível fazer uma animação dentro de um loop for.</p> + +<p>Isso significa que precisamos de um jeito para executar nossas funções de desenho durante um período de tempo. Existem dois jeitos para controlar uma animação como essa.</p> + +<h3 id="Atualizações_agendadas">Atualizações agendadas</h3> + +<p>Primeiramente há as funções {{domxref("window.setInterval()")}} e {{domxref("window.setTimeout()")}}, que podem ser usadas para chamar uma função específica durante um certo período definido de tempo.</p> + +<div class="note"> +<p>Nota: O método {{domxref("window.requestAnimationFrame()")}} agora é a maneira recomendada de programar animações. Vamos atualizar esse tutorial para abortar isso em breve.</p> +</div> + +<dl> + <dt><code>setInterval(<em>função</em>,<em>atraso</em>)</code></dt> + <dd>Inicia repetidamente executando a função específica pela função a cada milissegundo de atraso.</dd> + <dt><code>setTimeout(<em>função</em>,<em>atraso</em>)</code></dt> + <dd>Executa a função especificada pela função em milissegundos de atraso.</dd> +</dl> + +<p>Se você não quer nenhuma interação do usuário, é melhor usar a função setInterval() que executa repeditamente o código fornecido.</p> + +<h3 id="Atualizar_na_interação_do_usuário">Atualizar na interação do usuário</h3> + +<p>O segundo método que nós podemos usar para controlar uma animação é a entrada do usuário. Se nós quiséssimos criar um jogo, nós poderiamos usar os eventos do teclado ou mouse para controlar a animação. Ao definir {{domxref("EventListener")}}s, nós pegamos qualquer interação do usuário e executamos nossas funções da animação. </p> + +<p>Se você quer a interação do usuário, você pode usar uma versão menor ou a versão principal do nosso framework pra animação:</p> + +<pre>var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);</pre> + +<p>ou</p> + +<pre>var myAnimation = new Daemon(null, animateShape, 500, Infinity);</pre> + +<p>Nos exemplos abaixo, no entanto, usamos o método {{domxref("window.setInterval()")}} para controlar a animação. Na parte inferior dessa página há alguns links de exemplos que usam {{domxref("window.setTimeout()")}}.</p> + +<h4 id="Um_sistema_solar_animado">Um sistema solar animado</h4> + +<p>Esse exemplo anima um pequeno modelo do nosso sistema solar.</p> + +<pre class="brush: js">var sun = new Image(); +var moon = new Image(); +var earth = new Image(); +function init(){ + sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; + moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; + earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; + setInterval(draw,100); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.globalCompositeOperation = 'destination-over'; + ctx.clearRect(0,0,300,300); // clear canvas + + ctx.fillStyle = 'rgba(0,0,0,0.4)'; + ctx.strokeStyle = 'rgba(0,153,255,0.4)'; + ctx.save(); + ctx.translate(150,150); + + // Earth + var time = new Date(); + ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); + ctx.translate(105,0); + ctx.fillRect(0,-12,50,24); // Shadow + ctx.drawImage(earth,-12,-12); + + // Moon + ctx.save(); + ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() ); + ctx.translate(0,28.5); + ctx.drawImage(moon,-3.5,-3.5); + ctx.restore(); + + ctx.restore(); + + ctx.beginPath(); + ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit + ctx.stroke(); + + ctx.drawImage(sun,0,0,300,300); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas></pre> + +<pre class="brush: js">init();</pre> +</div> + +<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p> + +<h4 id="Um_relógio_animado">Um relógio animado</h4> + +<p>Esse exemplos desenha um relógio animado, mostrando sua hora atual.</p> + +<pre class="brush: js">function init(){ + clock(); + setInterval(clock,1000); +} + +function clock(){ + var now = new Date(); + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.save(); + ctx.clearRect(0,0,150,150); + ctx.translate(75,75); + ctx.scale(0.4,0.4); + ctx.rotate(-Math.PI/2); + ctx.strokeStyle = "black"; + ctx.fillStyle = "white"; + ctx.lineWidth = 8; + ctx.lineCap = "round"; + + // Hour marks + ctx.save(); + for (var i=0;i<12;i++){ + ctx.beginPath(); + ctx.rotate(Math.PI/6); + ctx.moveTo(100,0); + ctx.lineTo(120,0); + ctx.stroke(); + } + ctx.restore(); + + // Minute marks + ctx.save(); + ctx.lineWidth = 5; + for (i=0;i<60;i++){ + if (i%5!=0) { + ctx.beginPath(); + ctx.moveTo(117,0); + ctx.lineTo(120,0); + ctx.stroke(); + } + ctx.rotate(Math.PI/30); + } + ctx.restore(); + + var sec = now.getSeconds(); + var min = now.getMinutes(); + var hr = now.getHours(); + hr = hr>=12 ? hr-12 : hr; + + ctx.fillStyle = "black"; + + // write Hours + ctx.save(); + ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) + ctx.lineWidth = 14; + ctx.beginPath(); + ctx.moveTo(-20,0); + ctx.lineTo(80,0); + ctx.stroke(); + ctx.restore(); + + // write Minutes + ctx.save(); + ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(-28,0); + ctx.lineTo(112,0); + ctx.stroke(); + ctx.restore(); + + // Write seconds + ctx.save(); + ctx.rotate(sec * Math.PI/30); + ctx.strokeStyle = "#D40000"; + ctx.fillStyle = "#D40000"; + ctx.lineWidth = 6; + ctx.beginPath(); + ctx.moveTo(-30,0); + ctx.lineTo(83,0); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(0,0,10,0,Math.PI*2,true); + ctx.fill(); + ctx.beginPath(); + ctx.arc(95,0,10,0,Math.PI*2,true); + ctx.stroke(); + ctx.fillStyle = "rgba(0,0,0,0)"; + ctx.arc(0,0,3,0,Math.PI*2,true); + ctx.fill(); + ctx.restore(); + + ctx.beginPath(); + ctx.lineWidth = 14; + ctx.strokeStyle = '#325FA2'; + ctx.arc(0,0,142,0,Math.PI*2,true); + ctx.stroke(); + + ctx.restore(); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">init();</pre> +</div> + +<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p> + +<h4 id="Um_panorama_em_loop">Um panorama em loop</h4> + +<p>Nesse exemplos, um panorama é rolado da esquerda pra direita. Nós estamos usando uma imagem do Parque Nacional de Yosemite que tiramos da Wikipedia, mas você pode usar qualquer imagem que fosse maior que a tela.</p> + +<pre class="brush: js">var img = new Image(); + +// User Variables - customize these to change the image being scrolled, its +// direction, and the speed. + +img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg'; +var CanvasXSize = 800; +var CanvasYSize = 200; +var speed = 30; //lower is faster +var scale = 1.05; +var y = -4.5; //vertical offset + +// Main program + +var dx = 0.75; +var imgW; +var imgH; +var x = 0; +var clearX; +var clearY; +var ctx; + +img.onload = function() { + imgW = img.width*scale; + imgH = img.height*scale; + if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas + if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas + else { clearX = CanvasXSize; } + if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas + else { clearY = CanvasYSize; } + //Get Canvas Element + ctx = document.getElementById('canvas').getContext('2d'); + //Set Refresh Rate + return setInterval(draw, speed); +} + +function draw() { + //Clear Canvas + ctx.clearRect(0,0,clearX,clearY); + //If image is <= Canvas Size + if (imgW <= CanvasXSize) { + //reset, start from beginning + if (x > (CanvasXSize)) { x = 0; } + //draw aditional image + if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); } + } + //If image is > Canvas Size + else { + //reset, start from beginning + if (x > (CanvasXSize)) { x = CanvasXSize-imgW; } + //draw aditional image + if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); } + } + //draw image + ctx.drawImage(img,x,y,imgW,imgH); + //amount to move + x += dx; +} +</pre> + +<p>Abaixo é o {{HTMLElement("canvas")}} em que a imagem é rolada. Note que a largura e a altura especificadas aqui devem corresponder aos valores das variáveis CanvasXZSize e CanvasYSize no código JavaScript. </p> + +<pre class="brush: html"><canvas id="canvas" width="800" height="200"></canvas></pre> + +<p><strong>Live sample</strong></p> + +<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p> + +<h2 id="Other_examples" name="Other_examples">Outros exemplos</h2> + +<dl> + <dt><a class="external" href="http://www.gartic.net/" title="http://www.gartic.net/">Gartic</a></dt> + <dd>Jogo de desenho para multiplayers.</dd> + <dt><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Canvascape</a></dt> + <dd>Um jogo de aventura 3D (tiro em primeira pessoa).</dd> + <dt><a href="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt> + <dd>Um bom exemplo de como fazer animações usando os controles do teclado.</dd> + <dt><a class="external" href="http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html">canvas adventure</a></dt> + <dd>Outro bom exemplo que usa controles de teclado.</dd> + <dt><a class="external" href="http://www.blobsallad.se/">An interactive Blob</a></dt> + <dd>Divirta-se com Blob.</dd> + <dt><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through a starfield</a></dt> + <dd>Voe através de estrelas, círculos ou quadrados.</dd> + <dt><a class="external" href="http://igrapher.com/" title="http://igrapher.com/">iGrapher</a></dt> + <dd>Um exemplo que ilustra os dados do mercado de ações.</dd> +</dl> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li> + <li><a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework"><code>setInterval</code> – A little framework</a></li> + <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">JavaScript Daemons Management</a></li> + <li><a href="/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li> +</ul> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}</p> diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..767a5ff97c --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,153 @@ +--- +title: Utilização básica do Canvas +slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica +tags: + - Canvas + - HTML + - Intermediário + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> + +<div class="summary"><span id="result_box" lang="pt"><span>Vamos começar este tutorial olhando para o elemento </span></span> {{HTMLElement("canvas")}} {{Glossary("HTML")}} <span lang="pt"><span> em si.</span> <span>No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.</span></span></div> + +<h2 id="O_elemento_<canvas>">O elemento <code><canvas></code></h2> + +<p>Vamos começar esse tutorial olhando o elemento {{HTMLElement("canvas")}} em si.</p> + +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> +</pre> + +<p>Se parece muito com o elemento <code><img> </code>com a diferença de não possuir os atributos <code>src</code> e <code>alt</code>. O elemento <code><canvas></code> tem apenas dois atributos - <em><strong>width</strong> </em>e <em><strong>height</strong>. </em>Ambos são opcionais e podem ser aplicados utilizando as propriedades <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a> respectivas. Se não forem especificados, o canvas será iniciado com <strong>300 <em>pixels</em></strong><em> </em>de largura por <strong>150 <em>pixels</em></strong><em> </em>de altura. O elemento pode ser redimensionado por <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.</p> + +<div class="note"> +<p><strong>Nota:</strong> Se as suas renderizações parecerem distorcidas, tente especificar os atributos <code>width</code> e <code>height</code> no <code><canvas></code> e não usando CSS.</p> +</div> + +<p>O atributo <code>id</code> não é específico do elemento <code><canvas></code> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o <em><code>class</code> </em>por exemplo). É sempre uma boa ideia inserir um <code>id</code> pois fica muito mais fácil de capturar o elemento no seu <em>script.</em></p> + +<p>O elemento <code><canvas></code> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.</p> + +<div id="section_2"> +<h3 id="Conteúdo_alternativo">Conteúdo alternativo</h3> + +<p>Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.</p> + +<p>Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <code><canvas></code>. Navegadores que não suportam o <code><canvas></code> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <code><canvas></code> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.</p> + +<p>Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:</p> + +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> + preço das ações: $3.15 +0.15 +</canvas> + +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +</pre> + +<h3 id="Tag_<canvas>_é_necessária">Tag <code></canvas></code> é necessária</h3> + +<p>Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;"></canvas></code><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;"> é necessária</span><span style="line-height: 1.5;">.</span></p> + +<div class="note"> +<p><strong>Nota:</strong> Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para <span style="line-height: 1.5;">que haja maior compatibilidade, </span><span style="line-height: 1.5;">portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.</span></p> +</div> + +<p>Se o conteúdo alternativo não for necessário, um simples <code><canvas id="foo" ...></canvas></code> é totalmente compatível com todos os navegadores que suportam canvas.</p> + +<h2 id="O_contexto_de_renderização">O contexto de renderização</h2> + +<p>{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, <a href="/pt-BR/docs/Web/WebGL" style="line-height: 1.5;" title="/en-US/docs/Web/WebGL">WebGL</a> <span style="line-height: 1.5;">usa um contexto 3D ("experimental-WebGL") baseado em </span><a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a><span style="line-height: 1.5;">.</span></p> + +<p>Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um <em>script </em>precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods">método</a> chamado <code>getContext()</code>, usado para obter o contexto de renderização e suas funções de desenho. <code>getContext()</code> recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); +var ctx = canvas.getContext('2d'); +</pre> + +<p>A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método <code>getContext()</code>.</p> + +<div id="section_5"> +<h2 id="Verificação_de_suporte">Verificação de suporte</h2> + +<p>O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um <em>script</em> simplesmente testando a presença do método <code>getContext():</code></p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); + +if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + // codigo de desenho aqui +} else { + // codigo para quando o canvas nao for suportado aqui +} +</pre> +</div> +</div> + +<h2 id="Um_modelo_de_estrutura">Um modelo de estrutura</h2> + +<p>Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:</p> + +<div class="note"> +<p><strong>Nota:</strong> <span id="result_box" lang="pt"><span>não é uma boa prática incorporar um script dentro do HTML.</span> <span>Nós fazemos isso aqui para manter o exemplo conciso</span></span>.</p> +</div> + +<pre class="brush: html"><html> + <head> + <title>Canvas tutorial</title> + <script type="text/javascript"> + function draw(){ + var canvas = document.getElementById('tutorial'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + } + } + </script> + <style type="text/css"> + canvas { border: 1px solid black; } + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>O <em>script </em>inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento <em>onload </em>do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.</p> + +<p>{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}</p> + +<h2 id="Um_simples_exemplo">Um simples exemplo</h2> + +<p>Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.</p> + +<pre class="brush: html"><html> + <head> + <script type="application/javascript"> + function draw() { + var canvas = document.getElementById("canvas"); + if (canvas.getContext) { + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); + } + } + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html></pre> + +<p>Este exemplo parece assim:</p> + +<p>{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p> diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..87de5aa19d --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html @@ -0,0 +1,294 @@ +--- +title: Exemplo de Composição +slug: Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo +tags: + - Canvas + - Example + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +<div>{{CanvasSidebar}}</div> + +<p>Esse exemplo demonstra várias <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">operações de composição</a>. A saída se parece assim:</p> + +<p>{{ EmbedLiveSample('Exemplo_de_composição', '', '7240px', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}</p> + +<h2 id="Exemplo_de_composição">Exemplo de composição</h2> + +<p><span id="result_box" lang="pt"><span>Este código configura os valores globais usados pelo restante do programa.</span></span></p> + +<pre class="brush: js">var canvas1 = document.createElement("canvas"); +var canvas2 = document.createElement("canvas"); +var gco = [ 'Source-over','Source-in','Source-out','Source-atop', + 'Destination-over','Destination-in','Destination-out','Destination-atop', + 'Lighter', 'Copy','XOR', 'Multiply', 'Screen', 'Overlay', 'Darken', + 'Lighten', 'Color-dodge', 'Color-burn', 'Hard-light', 'Soft-light', + 'Difference', 'Exclusion', 'HUE', 'Saturation', 'Color', 'Luminosity' + ].reverse(); +var gcoText = [ +'<span id="result_box" lang="pt"><span>Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente</span></span>.', +'<span id="result_box" lang="pt"><span class="alt-edited">A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem.</span> <span class="alt-edited">Todo o resto é transparente.</span></span> ', +'A nova forma é desenhada onde ela não sobrepõe o conteúdo da tela (canvas) existente.', +'A nova forma é somente desenahda onde ela sobrepõe o conteúdo da tela (canvas) existente.', +'Novas formas são desenhadas por trás do conteúdo da tela (canvas) existente.', +'O conteúdo da tela (canvas) existente é mantido onde ambos, a nova forma e o conteúdo da tela (canvas) existente, se sobrepõe. Todo o resto é transparente.', +'O conteúdo existente é mantido onde ele não sobrepõe a nova forma.', +'A tela (canvas) existente só é mantida onde ela sobrepõe a nova forma. A nova forma é desenahda por trás do conteúdo canvas.', +'Onde ambas formas se sebrepõem a cor é determinada adicionando seus respectivos valores de cores.', +'Somente a nova forma é mostrada.', +'Formas são feitas transparentes onde ambos se sobrepõem e todo o resto é desenhado normalmente.', +'<span id="result_box" lang="pt"><span>Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior.</span> <span>Uma imagem mais escura é o resultado.</span></span> ', +'<span id="result_box" lang="pt"><span>Os pixels são invertidos, multiplicados e invertidos novamente.</span> <span>Uma imagem mais clara é o resultado (oposto de multiplicar)</span></span>', +'<span id="result_box" lang="pt"><span>Uma combinação de multiplicação e tela.</span> <span>As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.</span></span>', +'Mantêm os pixels mais escuro de ambas camadas.', +'Mantêm os pixels mais claro de ambas camadas.', +'<span id="result_box" lang="pt"><span>Divide a camada inferior pela camada superior invertida.</span></span>', +'<span id="result_box" lang="pt"><span>Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.</span></span>', +'<span id="result_box" lang="pt"><span>Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.</span></span>', +'<span id="result_box" lang="pt"><span>Uma versão mais suave da luz.</span> <span>Preto ou branco puro não resulta em preto ou branco puro.</span></span>', +'<span id="result_box" lang="pt"><span>Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.</span></span>', +'<span class="short_text" id="result_box" lang="pt"><span>Como diferença, mas com menor contraste.</span></span>', +'<span id="result_box" lang="pt"><span>Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.</span></span>', +'<span id="result_box" lang="pt"><span>Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.</span></span>', +'<span id="result_box" lang="pt"><span>Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.</span></span>', +'<span id="result_box" lang="pt"><span>Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.</span></span>' + ].reverse(); +var width = 320; +var height = 340;</pre> + +<h3 id="Programa_principal">Programa principal</h3> + +<p><span id="result_box" lang="pt"><span>Quando a página é carregada, esse código é executado para configurar e executar o exemplo:</span></span></p> + +<pre class="brush: js">window.onload = function() { + // lum em sRGB + var lum = { + r: 0.33, + g: 0.33, + b: 0.33 + }; + // redimensiona canvas + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix(); + colorSphere(); + runComposite(); + return; +}; +</pre> + +<p><span id="result_box" lang="pt"><span>E esse código, <code>runComposite ()</code>, manipula a maior parte do trabalho, contando com várias funções utilitárias para fazer as partes difíceis.</span></span></p> + +<pre class="brush: js">function createCanvas() { + var canvas = document.createElement("canvas"); + canvas.style.background = "url("+op_8x8.data+")"; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width/2; + canvas.height = height/2; + return canvas; +} + +function runComposite() { + var dl = document.createElement("dl"); + document.body.appendChild(dl); + while(gco.length) { + var pop = gco.pop(); + var dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + var dd = document.createElement("dd"); + var p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); + + var canvasToDrawOn = createCanvas(); + var canvasToDrawFrom = createCanvas(); + var canvasToDrawResult = createCanvas(); + + var ctx = canvasToDrawResult.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height/2 - 5); + ctx.restore(); + + var ctx = canvasToDrawOn.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width/2, height/2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText('Conteúdo existente', 5, height/2 - 5); + ctx.restore(); + + var ctx = canvasToDrawFrom.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas2, 0, 0, width/2, height/2); + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText('Novo conteúdo', 5, height/2 - 5); + ctx.restore(); + + dd.appendChild(canvasToDrawOn); + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); + + dl.appendChild(dd); + } +}; +</pre> + +<h3 id="Funções_Utilitárias">Funções Utilitárias</h3> + +<p><span id="result_box" lang="pt"><span>O programa depende de várias funções utilitárias.</span></span></p> + +<pre class="brush: js">var lightMix = function() { + var ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI*2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0,0,30,30) + ctx.fill(); +}; +</pre> + +<pre class="brush: js">var colorSphere = function(element) { + var ctx = canvas1.getContext("2d"); + var width = 360; + var halfWidth = width / 2; + var rotate = (1 / 360) * Math.PI * 2; // per degree + var offset = 0; // scrollbar offset + var oleft = -20; + var otop = -20; + for (var n = 0; n <= 359; n ++) { + var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); + var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); + gradient.addColorStop(1, "rgba(255,255,255,1)"); + ctx.beginPath(); + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; + ctx.fill(); + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15,15,30,30) + ctx.fill(); + return ctx.canvas; +}; +</pre> + +<pre class="brush: js">// HSV (1978) = H: Hue (tom) +// S: Saturation (Saturação) +// V: Value (Valor) +Color = {}; +Color.HSV_RGB = function (o) { + var H = o.H / 360, + S = o.S / 100, + V = o.V / 100, + R, G, B; + var A, B, C, D; + if (S == 0) { + R = G = B = Math.round(V * 255); + } else { + if (H >= 1) H = 0; + H = 6 * H; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - (S * D))); + C = Math.round(255 * V * (1 - (S * (1 - D)))); + V = Math.round(255 * V); + switch (Math.floor(H)) { + case 0: + R = V; + G = C; + B = A; + break; + case 1: + R = B; + G = V; + B = A; + break; + case 2: + R = A; + G = V; + B = C; + break; + case 3: + R = A; + G = B; + B = V; + break; + case 4: + R = C; + G = A; + B = V; + break; + case 5: + R = V; + G = A; + B = B; + break; + } + } + return { + R: R, + G: G, + B: B + }; +}; + +var createInterlace = function (size, color1, color2) { + var proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // top-left + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // top-right + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // bottom-left + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // bottom-right + proto.fillRect(size, size, size, size); + var pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; +}; + +var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre> diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html new file mode 100644 index 0000000000..6d9ff5c33d --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html @@ -0,0 +1,112 @@ +--- +title: Compositing and clipping +slug: Web/Guide/HTML/Canvas_tutorial/Compositing +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div> + +<div class="summary"> +<p>Em todo os nossos <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemplos prévios</a>, formas estavam sempre desenhadas uma em cima das outras. Este é mais do que adequado para a maioria das situações, mas é limita a ordem no qual a composição das formas são construídas.</p> + +<p>Nós podemos, no entanto, mudar este comportamento por configurar a propriedade <code>globalCompositeOperation</code>. Além disto, a propriedade clipe permite-nos esconder indesejáveis partes da forma.</p> +</div> + +<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2> + +<p>Nós podemos somente desenhar novas formas atrás das existentes formas mas nós podemos também usar isto para mascarar certas áreas, limpar seções do canvas(não limitado para retângulos como o {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} métodos faz) e mais.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt> + <dd>Este conjunto de operações compostas para aplicar quando desenha novas formas, onde type é uma string identificando quais das 12 operações compostas usar.</dd> +</dl> + +<p>Veja os seguintes <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">exemplos de composição</a> para o código dos seguintes exemplos.</p> + +<p>{{ EmbedLiveSample('Exemplo_de_composição', '', '', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}</p> + +<h2 id="Clipping_paths" name="Clipping_paths">Caminhos de recorte (Clipping path)</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Um caminho de recorte (Clipping path) é como uma forma normal canvas mas isto age como uma máscara para esconder indesejáveis partes de formas. Isto é visualizado na imagem na direita. A forma da estrela vermelha é nosso caminho de recorte. Tudo que cai do lado de fora deste caminho não sai desenhado no canvas.</p> + +<p>Se nós compararmos caminho de recorte para a propriedade <code>globalCompositeOperation</code> nós temos visto acima, nós veremos dois modelos de composição que alcança mais ou menos o mesmo efeito no source-in e source-atop. A mais importante diferença entre os dois é que o caminho de recorte nunca desenha algo na tela e o caminho de recorte nunca afeta por adicionar novas formas. Isto faz o caminho do recorte ideal para desenhar múltiplos na área restrita.</p> + +<p>No capítulo sobre <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">formas de desenho (drawing shapes)</a> eu somente mencionei os métodos stroke() e fill(), mas há um método que nós podemos usar com caminhos chamado clip().</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt> + <dd>Volta o caminho atualmente sendo construído no caminho de recorte atual.</dd> +</dl> + +<p>Você usou clip() em vez de closePath() para fechar um caminho e voltar para dentro de um caminho de recorte em vez de contornar (stroking) ou completar (filling) o caminho.</p> + +<p>Por padrão o elemento {{HTMLElement("canvas")}} tem um caminho de recorte que é exatamente o mesmo tamanho do canvas em si. Em outras palavras, nenhum recorte ocorreu.</p> + +<h3 id="A_clip_example" name="A_clip_example">Um exemplo do recorte</h3> + +<p>Neste exemplo, Nós usaremos um recorte circular para restringir o desenho do conjunto de inícios randômicos para uma região particular</p> + +<pre class="brush: js;highlight[9]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.fillRect(0, 0, 150, 150); + ctx.translate(75, 75); + + // Create a circular clipping path + ctx.beginPath(); + ctx.arc(0, 0, 60, 0, Math.PI * 2, true); + ctx.clip(); + + // draw background + var lingrad = ctx.createLinearGradient(0, -75, 0, 75); + lingrad.addColorStop(0, '#232256'); + lingrad.addColorStop(1, '#143778'); + + ctx.fillStyle = lingrad; + ctx.fillRect(-75, -75, 150, 150); + + // draw stars + for (var j = 1; j < 50; j++) { + ctx.save(); + ctx.fillStyle = '#fff'; + ctx.translate(75 - Math.floor(Math.random() * 150), + 75 - Math.floor(Math.random() * 150)); + drawStar(ctx, Math.floor(Math.random() * 4) + 2); + ctx.restore(); + } + +} + +function drawStar(ctx, r) { + ctx.save(); + ctx.beginPath(); + ctx.moveTo(r, 0); + for (var i = 0; i < 9; i++) { + ctx.rotate(Math.PI / 5); + if (i % 2 === 0) { + ctx.lineTo((r / 0.525731) * 0.200811, 0); + } else { + ctx.lineTo(r, 0); + } + } + ctx.closePath(); + ctx.fill(); + ctx.restore(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html">canvas id="canvas" width="150" height="150" /canvas</pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>Nas primeiras linhas de código, nós desenhamos um retângulo negro do tamanho do canvas como um pano de fundo, então traduzido da origem para o centro. Próximo, nós criamos o recorte circular do caminho recortado para desenhar um arco e chamá-lo clip(). Caminho de recortes são também parte do canvas com estado salvo. Se nós procuramos guardar o caminho do recorte original nós podemos ter salvo o estado do canvas antes de criar mais um.</p> + +<p>Tudo que for desenhado depois de criado o caminho de recorte somente aparecerá dentro daquele caminho. Você pode ver isto claramente no gradiente linear que está desenhado adiante. Depois deste conjunto de de 50 randomicamente posicionadas e escaladas estrelas for desenhada. Usando a função customizada drawStar(). De novo as estrelas somente aparecerão dentro do caminho de recorte definido.</p> + +<p>Um exemplo de recorte:</p> + +<p><img src="https://mdn.mozillademos.org/files/208/Canvas_clip.png"></p> + +<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p> diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..f54fca780e --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,581 @@ +--- +title: Desenhando formas com canvas +slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes +tags: + - Canvas + - Gráficos(2) + - HTML + - HTML Canvas + - HTML5 + - Intermediário + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> + +<div class="summary"> +<p>Agora que criamos nosso <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API/Tutorial/Basic_usage">ambiente em canvas</a>, podemos entrar nos detalhes de como desenhar no canvas. No final deste artigo, você terá aprendido a desenhar retângulos, triângulos, linhas, arcos e curvas, proporcionando familiaridade com algumas das formas básicas. Trabalhar com caminhos (<em>shapes</em>) é essencial ao desenhar objetos na tela e veremos como isso pode ser feito.</p> +</div> + +<h2 id="A_grade">A grade</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Antes que possamos começar a desenhar, precisamos falar sobre a grade de tela ou <strong>espaço de coordenadas</strong>. O modelo HTML na página anterior tinha um elemento canvas de 150 pixels de largura e 150 pixels de altura. À direita, você verá este canvas com a grade padrão sobreposta. Normalmente 1 unidade na grade corresponde a um pixel na tela. A origem desta grade está posicionada no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a esta origem. Assim, a posição do canto superior esquerdo do quadrado azul, se torna x pixels dos pixels da esquerda e y a partir do topo (coordenadas (x,y)). Mais tarde nesse tutorial vamos ver como podemos traduzir a origem para uma posição diferente, girar a grade e até mesmo escaloná-la. Por enquanto vamos ficar com o padrão.</p> + +<h2 id="Desenhando_retângulos">Desenhando retângulos</h2> + +<p>Diferente do {{Glossary("SVG")}} , o {{HTMLElement("canvas")}} suporta somente formas primitivas: retângulos. Todas as outras formas são criadas a partir da combinação de um ou mais caminhos (<em>paths</em>), lista de pontos conectados por uma linha. Felizmente, temos uma variedade de funções de desenho que tornam possíveis criar formas muito complexas.</p> + +<p>Primeiramente vamos olhar o retângulo. Aqui está listado três funções para desenhar retângulos pelo canvas:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt> + <dd>Desenha um retângulo preenchido.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt> + <dd>Desenha a borda do retângulo.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt> + <dd>Limpa um retângulo específico, tornando-o totalmente transparente.</dd> +</dl> + +<p>Cada umas das funções recebem os mesmos parâmetros. <code>x</code> e <code>y</code> determinam a posição no canvas (em relação a origem) no canto superior esquerdo do retângulo. O <code>width</code> (largura) e o <code>height</code> (altura) definem o tamanho do retângulo.</p> + +<p>Abaixo esta listado a função <code>draw()</code> da página anterior, porém utilizando as três funções.</p> + +<h3 id="Exemplo_de_forma_retangular">Exemplo de forma retangular</h3> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100); + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } +}</pre> + +<p>O resultado desse exemplo é mostrado abaixo.</p> + +<p>{{EmbedLiveSample('Exemplo_de_forma_retangular', 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> + +<p>A função <code>fillRect()</code> desenha um grande quadrado preto de 100 pixels. A função <code>clearRect()</code> por sua vez apaga um quadrado de 60x60 pixels a partir do centro, por fim, a função <code>strokeRect()</code> é chamada para criar uma borda de 50x50 pixels em volta do quadrado apagado.</p> + +<p>Posteriormente veremos duas alternativas à função <code>clearRect()</code>, nós também aprenderemos como alterar a cor e o estilo das linhas nas camadas renderizadas.</p> + +<p>Ao contrário das funções de <em>paths</em> que veremos na próxima seção, todas as três funções de retângulo desenham imediatamente no canvas.</p> + +<h2 id="Desenhando_caminhosregiões_paths">Desenhando caminhos/regiões (paths)</h2> + +<p>Para criar uma camada usando caminhos (regiões ou <em>paths</em>) é necessário alguns passos extras. Primeiro, cria-se a região de desenho. Depois usa-se comandos de desenho para desenhar nesta região. Por fim, você limita a região (path). Uma vez que a região de desenho está criada, você pode traçar ou preencher o caminho para que seja renderizado. Aqui estão as funções utilizadas para isso:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt> + <dd>Cria um novo path. Uma vez criado, futuros comandos de desenho são direcionados do path atual para a construção de um novo path no canvas.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/CanvasRenderingContext2D#Paths">Métodos de Caminhos (Path)</a></dt> + <dd>Métodos para manipuliar diferentes paths para objetos.</dd> +</dl> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt> + <dd>Finaliza o path para futuros comandos de desenho, fazendo com que voltem a ser direcionados ao contexto.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt> + <dd>Desenha uma borda na camada.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt> + <dd>Desenha uma forma sólida através de preenchimento.</dd> +</dl> + +<p>O primeiro passo para criar um caminho é chamar o <code>beginPath()</code>. Internamente, caminhos são armazenados como uma lista de sub-caminhos (linhas, arcos, etc.) que juntos formam uma forma (<em>shape</em>). Sempre que esse método é chamado, a lista é redefinida e podemos começar a desenhar novas formas.</p> + +<div class="note"><strong>Nota:</strong> Quando o caminho atual está vazio, assim como imediatamente depois de chamar <code>beginPath()</code>, ou em uma tela recém-criada, o primeiro comando de construção de caminho é sempre tratado como um <code>moveTo()</code>, independentemente do que ele seja realmente. Por essa razão, você quase sempre vai precisar definir especificamente sua posição inicial após redefinir um caminho.</div> + +<p>A segunda etapa é chamar os métodos que realmente especificam os caminhos a serem desenhados. Vamos ver isso em breve.</p> + +<p><br> + O terceiro, e um passo opcional, é chamar <code>closePath()</code>. Este método tenta fechar a forma desenhando uma linha reta do ponto atual para o início. Se a forma (<em>shape</em>) já foi fechada ou existe apenas um ponto na lista, esta função não faz nada.</p> + +<div class="note"><strong>Nota:</strong> Quando você chama <code>fill()</code>, todas as formas abertas são fechadas automaticamente, assim você não precisa chamar <code>closePath()</code>. Isso <strong>não acontece</strong> quando você chamar <code>stroke()</code>.</div> + +<h3 id="Desenhando_um_triângulo">Desenhando um triângulo</h3> + +<p>Por exemplo, o código para desenhar um triângulo seria algo parecido com isto:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.moveTo(75,50); + ctx.lineTo(100,75); + ctx.lineTo(100,25); + ctx.fill(); + } +} +</pre> + +<p>O resultado se parece com isso:</p> + +<p>{{EmbedLiveSample('Desenhando_um_triângulo', 160, 160, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p> + +<h3 id="Desenhando">Desenhando</h3> + +<p>Uma função muito útil, que na verdade não desenha nada, mas torna-se parte da lista de caminhos descritos acima, é a função <code>moveTo()</code>. Você provavelmente pode imaginar melhor isso como se fosse o levantar uma caneta ou lápis de um ponto em um pedaço de papel e colocá-lo no próximo ponto.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt> + <dd>Move a caneta (<em>pen</em>) para as coordenadas especificadas por <code>x</code> e <code>y</code>.</dd> +</dl> + +<p>Quando o canvas é inicializado ou <code>beginPath()</code> é chamado, você normalmente vai querer usar a função <code>moveTo()</code> para colocar o ponto inicial em outro lugar. Poderíamos também usar <code>moveTo()</code> para desenhar caminhos não conectados. Dê uma olhada no rosto sorridente abaixo. Eu marquei os lugares onde eu usei o método <code>moveTo()</code> (as linhas vermelhas).</p> + +<p>Caso queira tentar fazer isso, você pode usar o snippet de código abaixo. Basta colá-lo na função <code>draw()</code> que vimos anteriormente.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Círculo exterior + ctx.moveTo(110, 75); + ctx.arc(75, 75, 35, 0, Math.PI, false); // Boca (sentido horário) + ctx.moveTo(65, 65); + ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Olho esquerdo + ctx.moveTo(95, 65); + ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Olho direito + ctx.stroke(); + } +} +</pre> + +<p>O resultado aparece como:</p> + +<p>{{EmbedLiveSample("Desenhando", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> + +<p>Se você não gosta de ver linhas conectadas, você pode remover as linhas que chamam a função <code>moveTo()</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Para aprender mais sobre a função <code>arc()</code>, veja sobre {{anch("Arcos")}}.</p> +</div> + +<h3 id="Linhas">Linhas</h3> + +<p>Para desenhar linhas retas, use o método <code>lineTo().</code></p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt> + <dd>Desenha uma linha do ponto atual a até a posição especificada por <code>x</code> e <code>y</code>.</dd> +</dl> + +<p>Esse método recebe dois argumentos, <code>x</code> e <code>y</code>, que são as coordenadas do ponto final da linha. O ponto inicial é dependente de caminhos previamente desenhados, onde o ponto final do caminho anterior é o ponto inicial para o seguinte, e assim por diante. O ponto inicial também pode ser alterado usando o método <code>moveTo()</code>.<br> + <br> + O exemplo abaixo desenha dois triângulos, um preenchido e um delineado.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25,25); + ctx.lineTo(105,25); + ctx.lineTo(25,105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125,125); + ctx.lineTo(125,45); + ctx.lineTo(45,125); + ctx.closePath(); + ctx.stroke(); + } +} +</pre> + +<p>Isso começa chamando o método <code>beginPath()</code> para iniciar um novo <em>shape path</em>. Em seguida, usamos o método <code>moveTo()</code> para mover o ponto inicial para a posição desejada. Logo abaixo, duas linhas, que compõem os dois lados do triângulo, são desenhadas.</p> + +<p>{{EmbedLiveSample("Linhas", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> + +<p>Você notará a diferença entre o triângulo preenchido (<em>filled</em>) e não prenchido (<em>stroked</em>). Isto ocorre, como mencionado acima, porque as formas são automaticamente fechadas quando um caminho é preenchido, mas não quando são não preenchidos. Se deixássemos de fora o <code>closePath()</code> para os triângulos não preenchidos, apenas duas linhas teriam sido desenhadas, não um triângulo completo.</p> + +<h3 id="Arcos">Arcos</h3> + +<p>Para desenhar arcos, nós usamos os métodos <code>arc()</code> ou <code>arcTo()</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt> + <dd>Desenha um arco centralizado na posição <em>(x, y)</em> com um raio <em>r</em> iniciando em <em>startAngle e</em> terminando em <em>endAngle</em> apontando na direção indicada pelo sentido anti-horário (padronizando para o sentido horário).</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt> + <dd>Desenha um arco com os pontos de controle e raio, conectados ao ponto anterior por uma linha reta.</dd> +</dl> + +<p>Vamos dar uma olhada mais detalhada sobre o método <code>arc</code>, que tem seis parâmetros: <code>x</code> e <code>y</code> são as coordenadas do centro do círculo em que o arco deve ser desenhado. <code>radius</code> é o raio. Os parâmetros <code>startAngle</code> e <code>endAngle</code> definem os pontos inicial e final do arco em radianos, ao longo da curva do círculo. Estes são medidos a partir do eixo <code>x</code>. O parâmetro <code>anticlockwise</code> é um valor Booleano que, quando verdadeiro, desenha o arco no sentido anti-horário; Caso contrário, o arco é desenhado no sentido horário.</p> + +<div class="note"> +<p><strong>Nota</strong>: Os ângulos na função <code>arc</code> são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte expressão JavaScript: <code>radians = (Math.PI/180)*degrees</code>.</p> +</div> + +<p>O exemplo a seguir é um pouco mais complexo do que os que vimos anteriormente. Ele desenha 12 arcos diferentes, todos com diferentes ângulos e preenchimentos.</p> + +<p>Os dois laços <code>for</code> são para iterar através das linhas e colunas de arcos. Para cada arco, é criado um novo caminho chamando <code>beginPath()</code>. No código, cada um dos parâmetros para o arco estão em uma variável somente para demonstração, assim você não precisa fazer isso na vida real.</p> + +<p>As coordenadas <code>x</code> e <code>y</code> devem ser suficientemente claras. O parâmetros <code>radius</code> e <code>startAngle</code> são fixos. O <code>endAngle</code> começa em 180 graus (metade de um círculo) na primeira coluna e aumenta gradualmente em 90 graus, culminando em um círculo completo na última coluna.</p> + +<p>A manipulação do parâmetro <code>clockwise</code> faz com que a primeira e terceira linhas sejam desenhadas como arcos no sentido horário, e a segunda e quarta linhas como arcos no sentido anti-horário. Finalmente, a instrução <code>if</code> faz com que a metade superior dos arcos não sejam preenchidos e a metade inferior dos arcos sejam.</p> + +<div class="note"> +<p><strong>Note:</strong> Este exemplo requer um canvas um pouco maior que as outras desta página: 150 x 200 pixels.</p> +</div> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="200"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + for(var i=0;i<4;i++){ + for(var j=0;j<3;j++){ + ctx.beginPath(); + var x = 25+j*50; // coordenada x + var y = 25+i*50; // coordenada y + var radius = 20; // Raio do Arco + var startAngle = 0; // Ponto inicial no círculo + var endAngle = Math.PI+(Math.PI*j)/2; // Ponto final no círculo + var anticlockwise = i%2==0 ? false : true; // horário ou anti-horário + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); + + if (i>1){ + ctx.fill(); + } else { + ctx.stroke(); + } + } + } + } +} +</pre> + +<p>{{EmbedLiveSample("Arcos", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p> + +<h3 id="Curvas_de_Bézier_Cúbicas_e_Quadráticas">Curvas de Bézier Cúbicas e Quadráticas</h3> + +<p>O próximo tipo de caminhos disponíveis são as Curvas de Bézier, disponíveis nas variedades cubícas e quadráticas. Elas são geralmente usadas para desenhar complexas formas orgânicas.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt> + <dd>Desenha uma curva de Bézier quadrática da posição atual indicada pelo cursor, até a posição final especificada por <code>x</code> e <code>y</code>, usando o controle de pontos guiados por <code>cp1x</code> <code>e cp1y</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt> + <dd>Desenha uma curva de Bézier cúbica partindo da posição atual indicada pelo cursor, até a posição final especificada por <code>x</code> e <code>y</code>, usando o controle de pontos guiados por (<code>cp1x</code>, <code>cp1y</code>) e (cp2x, cp2y).</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">A diferença entre estes métodos pode ser descrita de forma melhor usando a imagem à direita. Uma curva quadrática de Bézier tem um ponto inicial e final (pontos azuis) e apenas um ponto de controle (indicado pelo ponto vermelho) enquanto que uma curva cúbica de Bézier utiliza dois pontos de controles.</p> + +<p>Os parâmetros <code>x</code> e <code>y</code> em ambos os métodos são as coordenadas do ponto final. <code>cp1x</code> e<code> cp1y</code> são as coordenadas do primeiro ponto de controle, e <code>cp2x</code> e <code>cp2y</code> são as coordenadas do segundo ponto de controle.</p> + +<p>Usando curvas de Bézier quadráticas e cúbicas pode ser algo bastante desafiador, porque ao contrário de um software de desenho vetorial, como o Adobe Illustrator, não temos resultados visuais imediatos sobre o que estamos fazendo. Isso torna bastante difícil desenhar formas complexas. No exemplo a seguir, vamos desenhar algumas formas orgânicas simples, mas se você tiver tempo e, acima de tudo, paciência, formas muito mais complexas podem ser criadas.</p> + +<p>Não há nada muito difícil nestes exemplos. Em ambos os casos vemos uma sucessão de curvas sendo desenhadas, resultando no fim, em uma forma (<em>shape</em>) completa.</p> + +<h4 id="Curvas_de_Bézier_Quadráticas">Curvas de Bézier Quadráticas</h4> + +<p>Este exemplo usa múltiplas curvas de Bézier quadráticas para renderizar um balão de fala.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Exemplo de curvas de Bézier quadráticas + ctx.beginPath(); + ctx.moveTo(75,25); + ctx.quadraticCurveTo(25,25,25,62.5); + ctx.quadraticCurveTo(25,100,50,100); + ctx.quadraticCurveTo(50,120,30,125); + ctx.quadraticCurveTo(60,120,65,100); + ctx.quadraticCurveTo(125,100,125,62.5); + ctx.quadraticCurveTo(125,25,75,25); + ctx.stroke(); + } +} +</pre> + +<p>{{EmbedLiveSample('Curvas_de_Bézier_Quadráticas', 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> + +<h4 id="Curvas_de_Bézier_Cúbicas">Curvas de Bézier Cúbicas</h4> + +<p>Este exemplo desenha um coração usando curvas de Bézier cúbicas.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + // Exemplo de curvas de Bézier cúbicas + ctx.beginPath(); + ctx.moveTo(75,40); + ctx.bezierCurveTo(75,37,70,25,50,25); + ctx.bezierCurveTo(20,25,20,62.5,20,62.5); + ctx.bezierCurveTo(20,80,40,102,75,120); + ctx.bezierCurveTo(110,102,130,80,130,62.5); + ctx.bezierCurveTo(130,62.5,130,25,100,25); + ctx.bezierCurveTo(85,25,75,37,75,40); + ctx.fill(); + } +} +</pre> + +<p>{{EmbedLiveSample('Curvas_de_Bézier_Cúbicas', 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> + +<h3 id="Retângulos">Retângulos</h3> + +<p>Além dos três métodos que vimos em {{anch("Desenhando retângulos")}}, que desenham formas retangulares diretamente no canvas, há também o método <code>rect()</code>, que adiciona uma forma retangular a um caminho (<em>path</em>) atualmente aberto.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt> + <dd> + <p>Desenha um retângulo cujo canto superior esquerdo é especificado por (<code>x</code>, <code>y</code>) com base em uma largura (<code>width</code>) e uma altura (<code>height</code>).</p> + </dd> +</dl> + +<p>Quando este método é executado, o método <code>moveTo()</code> é automaticamente chamado com os parâmetros (0,0). Em outras palavras, a posição atual do cursor é automaticamente redefinida para as coordenadas padrões.</p> + +<h3 id="Combinando_Elementos">Combinando Elementos</h3> + +<p>Até agora, em cada exemplo dessa página foi usada apenas um tipo de função de caminho (<em>path</em>) para cada forma (<em>shape</em>). No entanto, não há nenhuma limitação para o número ou tipos de caminhos que você pode usar para criar um <em>shape</em>. Então, neste exemplo final, vamos combinar todas as funções de caminho para fazer um conjunto de personagens de jogo muito conhecido.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + + roundedRect(ctx,12,12,150,150,15); + roundedRect(ctx,19,19,150,150,9); + roundedRect(ctx,53,53,49,33,10); + roundedRect(ctx,53,119,49,16,6); + roundedRect(ctx,135,53,49,33,10); + roundedRect(ctx,135,119,25,49,10); + + ctx.beginPath(); + ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); + ctx.lineTo(31,37); + ctx.fill(); + + for(var i=0;i<8;i++){ + ctx.fillRect(51+i*16,35,4,4); + } + + for(i=0;i<6;i++){ + ctx.fillRect(115,51+i*16,4,4); + } + + for(i=0;i<8;i++){ + ctx.fillRect(51+i*16,99,4,4); + } + + ctx.beginPath(); + ctx.moveTo(83,116); + ctx.lineTo(83,102); + ctx.bezierCurveTo(83,94,89,88,97,88); + ctx.bezierCurveTo(105,88,111,94,111,102); + ctx.lineTo(111,116); + ctx.lineTo(106.333,111.333); + ctx.lineTo(101.666,116); + ctx.lineTo(97,111.333); + ctx.lineTo(92.333,116); + ctx.lineTo(87.666,111.333); + ctx.lineTo(83,116); + ctx.fill(); + + ctx.fillStyle = "white"; + ctx.beginPath(); + ctx.moveTo(91,96); + ctx.bezierCurveTo(88,96,87,99,87,101); + ctx.bezierCurveTo(87,103,88,106,91,106); + ctx.bezierCurveTo(94,106,95,103,95,101); + ctx.bezierCurveTo(95,99,94,96,91,96); + ctx.moveTo(103,96); + ctx.bezierCurveTo(100,96,99,99,99,101); + ctx.bezierCurveTo(99,103,100,106,103,106); + ctx.bezierCurveTo(106,106,107,103,107,101); + ctx.bezierCurveTo(107,99,106,96,103,96); + ctx.fill(); + + ctx.fillStyle = "black"; + ctx.beginPath(); + ctx.arc(101,102,2,0,Math.PI*2,true); + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89,102,2,0,Math.PI*2,true); + ctx.fill(); + } +} + +// Uma função útil para desenhar um retângulo com cantos arredondados. + +function roundedRect(ctx,x,y,width,height,radius){ + ctx.beginPath(); + ctx.moveTo(x,y+radius); + ctx.lineTo(x,y+height-radius); + ctx.quadraticCurveTo(x,y+height,x+radius,y+height); + ctx.lineTo(x+width-radius,y+height); + ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); + ctx.lineTo(x+width,y+radius); + ctx.quadraticCurveTo(x+width,y,x+width-radius,y); + ctx.lineTo(x+radius,y); + ctx.quadraticCurveTo(x,y,x,y+radius); + ctx.stroke(); +} +</pre> + +<p>O resultado é:</p> + +<p>{{EmbedLiveSample("Combinando_Elementos", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p> + +<p>Não vamos discutir isso em detalhes, uma vez que é realmente muito simples. As coisas mais importantes a serem observadas são o uso da propriedade <code>fillStyle</code> no contexto de desenho e o uso de uma função auxiliar (neste caso <code>roundedRect()</code>). Usando funções auxiliares para construir um desenho frequentemente pode ser muito útil, além de reduzir a quantidade de código que você precisa, bem como a sua complexidade.</p> + +<p>Vamos dar uma nova olhada em <code>fillStyle</code>, em mais detalhes, mais adiante neste tutorial. Aqui, tudo o que estamos fazendo é apenas usando-o para alterar sucessivamente a cor de preenchimento dos caminhos (<em>paths</em>) de cor preta (padrão) para branca.</p> + +<h2 id="Path2D">Path2D</h2> + +<p>Como vimos no último exemplo, pode haver uma série de <em>paths</em> e comandos de desenho para desenhar objetos em sua tela. Para simplificar o código e melhorar o desempenho, o objeto {{domxref("Path2D")}}, disponível em versões recentes dos navegadores, permite armazenar em cache ou gravar esses comandos de desenho. Com ele, você pode construir seus <em>paths</em> rapidamente.<br> + Vamos ver como podemos construir um objeto de <code>Path2D</code>:</p> + +<dl> + <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt> + <dd> + <p>O construtor de <code><strong>Path2D()</strong></code> retorna um objeto <code>Path2D</code> instanciado recentemente, opcionalmente através de um outro objeto <code>Path2D</code> como argumento (cria uma cópia) ou, opcionalmente, com uma <em>string</em> que representam dados de <a href="/en-US/docs/Web/SVG/Tutorial/Paths"><em>paths</em> em SVG</a>.</p> + </dd> +</dl> + +<pre class="brush: js notranslate">new Path2D(); // objeto vazio de Path2D +new Path2D(path); // cópia de outro objeto de Path2D +new Path2D(d); // objeto criado a partir de <em>paths</em> em SVG</pre> + +<p>Todos os <a href="/pt_BR/docs/Web/API/CanvasRenderingContext2D#Paths">métodos de caminho (path methods)</a> como <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que temos de saber acima, estão disponíveis em <code>Path2D</code>.</p> + +<p>A API <code>Path2D</code> também adiciona uma maneira de combinar caminhos usando o método <code>addPath</code>. Isso pode ser útil quando você deseja criar objetos com vários componentes, por exemplo.</p> + +<dl> + <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt> + <dd>Adiciona um <code>path</code> para o <code>path</code> atual através de uma matriz de transformação opcional.</dd> +</dl> + +<h3 id="Exemplo_de_Path2D">Exemplo de Path2D</h3> + +<p>Neste exemplo, estamos criando um retângulo e um círculo. Ambos são armazenados como um objeto de <code>Path2D</code>, de modo que eles estão disponíveis para uso posterior. Com a nova API <code>Path2D</code>, vários métodos foram atualizados como, por exemplo, opcionalmente usar um objeto <code>Path2D</code> em vez do <code>path</code> atual. Aqui, os métodos <code>stroke</code> e <code>fill</code> são usados, com um argumento de <em>path</em>, para desenhar ambos os objetos na tela, por exemplo.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><html> + <body onload="draw();"> + <canvas id="canvas" width="130" height="100"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[6,9] notranslate">function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + var rectangle = new Path2D(); + rectangle.rect(10, 10, 50, 50); + + var circle = new Path2D(); + circle.moveTo(125, 35); + circle.arc(100, 35, 25, 0, 2 * Math.PI); + + ctx.stroke(rectangle); + ctx.fill(circle); + } +} +</pre> + +<p>{{EmbedLiveSample("Exemplo_de_Path2D", 140, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p> + +<h3 id="Usando_paths_em_SVG">Usando <em>paths</em> em SVG</h3> + +<p>Outro recurso poderoso da nova API de Path2D é a utilização de dados de <em>path</em> em SVG para inicializar caminhos (<em>paths</em>) no canvas. Isso permite que você crie dados de <em>paths </em>que possam ser utilizados tanto no SVG como no canvas.</p> + +<p>O caminho se moverá para o ponto <code>(M10 10)</code> e então se moverá horizontalmente 80 pontos para a direita <code>(h 80)</code>, depois 80 pontos para baixo <code>(v 80)</code>, então 80 pontos para a esquerda (h -80) e, por fim, volta para o início (<code>z</code>). Você pode ver este exemplo na página do <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">construtor do Path2D</a>.</p> + +<pre class="brush: js; notranslate">var p = new Path2D('M10 10 h 80 v 80 h -80 Z');</pre> + +<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..550719e627 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,169 @@ +--- +title: Drawing text +slug: Web/Guide/HTML/Canvas_tutorial/Drawing_text +tags: + - Canvas + - Intermediário + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> + +<div class="summary"> +<p>Após entender como <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">aplicar estilos e cores</a> no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.</p> +</div> + +<h2 id="Desenhando_texto">Desenhando texto</h2> + +<p>O context de renderização da canvas fornece dois métodos para renderização textual: </p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> + <dd>Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> + <dd>Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.</dd> +</dl> + +<h3 id="Um_exemplo_com_fillText">Um exemplo com <code>fillText</code></h3> + +<p>O texto a seguir é rederizado utilizando <code>fillStyle</code>.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.fillText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> + +<h3 id="Um_exemplo_com_strokeText">Um exemplo com <code>strokeText</code></h3> + +<p> </p> + +<p dir="ltr" id="tw-target-text">O texto é preenchido usando o strokeStyle atual.</p> + +<p> </p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.strokeText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> + +<h2 id="Estilo_de_Texto"><strong>Estilo de Texto</strong></h2> + +<p>Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> + <dd>The current text style being used when drawing text. This string uses the same syntax as the <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}} property. The default font is 10px sans-serif.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt> + <dd>Text alignment setting. Possible values: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>. The default value is <code>start</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt> + <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. The default value is <code>alphabetic</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt> + <dd>Directionality. Possible values: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. The default value is <code>inherit</code>.</dd> +</dl> + +<p>Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.</p> + +<p>O diagrama seguinte do <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> demonstra as várias baselines suportadas pela propriedade do <code>textBaseline</code><img alt="The top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p> + +<h3 id="O_exemplo_de_uma_textBaseline">O exemplo de uma textBaseline</h3> + +<p>Edite o código abaixo e veja as atualizações em tempo real no canvas.</p> + +<pre class="brush: js;highlight[2]">ctx.font = '48px serif'; +ctx.textBaseline = 'hanging'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = "48px serif"; +ctx.textBaseline = "hanging"; +ctx.strokeText("Hello world", 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Advanced_text_measurements">Advanced text measurements</h2> + +<p>In the case you need to obtain more details about the text, the following method allows you to measure it.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> + <dd>Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.</dd> +</dl> + +<p>The following code snippet shows how you can measure a text and get its width.</p> + +<pre class="brush: js;highlight[3]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var text = ctx.measureText('foo'); // TextMetrics object + text.width; // 16; +} +</pre> + +<h2 id="Notas_específicas_-_Gecko">Notas específicas - Gecko</h2> + +<p>No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p> diff --git a/files/pt-br/web/api/canvas_api/tutorial/finale/index.html b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html new file mode 100644 index 0000000000..9cd393b652 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html @@ -0,0 +1,49 @@ +--- +title: Conclusão +slug: Web/Guide/HTML/Canvas_tutorial/Conclusão +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div> + +<div class="summary"> +<p>Parabéns! Você terminou o <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>! Este conhecimento ajudará você a fazer ótimos gráficos 2D na web.</p> +</div> + +<h2 id="Mais_exemplos_e_tutoriais">Mais exemplos e tutoriais</h2> + +<p>Há uma variedade de demonstrações e mais explicações sobre canvas nesses sites:</p> + +<dl> + <dt><a href="http://codepen.io/search?q=canvas">Codepen.io</a></dt> + <dd>Front End Developer Playground & Code Editor no navegador.</dd> + <dt><a href="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></dt> + <dd>Exemplos para a maioria das APIs canvas.</dd> + <dt><a href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of Canvas tutorials</a></dt> + <dd><span id="result_box" lang="pt"><span>Uma ótima fundação para codificação visual em JavaScript</span></span> .</dd> + <dt><a href="/en-US/docs/Games">Game development</a></dt> + <dd><span id="result_box" lang="pt"><span>O jogo é uma das atividades de computador mais populares.</span> <span>Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.</span></span></dd> +</dl> + +<h2 id="Outras_Web_APIs">Outras Web APIs</h2> + +<p>Essas APIs podem ser úteis, quando trabalhando mais com canvas e gráficos:</p> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>API para renderização interativa de gráficos 3D.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd><span id="result_box" lang="pt"><span>Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.</span></span></dd> + <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt> + <dd><span id="result_box" lang="pt"><span>A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.</span></span></dd> +</dl> + +<h2 id="Questions">Questions</h2> + +<dl> + <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stackoverflow</a></dt> + <dd>Perguntas marcadas como "canvas".</dd> + <dt><a href="/en-US/docs/MDN">Comentários sobre esse tutorial – A comunidade MDN de documentação</a></dt> + <dd><span id="result_box" lang="pt"><span>Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!</span></span></dd> +</dl> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p> diff --git a/files/pt-br/web/api/canvas_api/tutorial/index.html b/files/pt-br/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..2f9dbab7df --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,56 @@ +--- +title: Canvas tutorial +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +<p> {{CanvasSidebar}} <a href="/pt-BR/docs/Web/HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p> + +<p class="summary"><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> é um elemento <a href="/en-US/docs/HTML" title="HTML">HTML</a> que pode ser usado para desenhar usando linguagem de "script" (normalmente <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">não tão simples</a>) animações. As imagens à direita mostram exemplos de implementações <strong><code><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><canvas></a></code></strong> que serão parte deste tutorial.</p> + +<p><span class="seoSummary">Este tutorial descreve como utilizar o elemento <code><canvas></code> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. </span></p> + +<p>Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o <code><canvas></code>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.</p> + +<h2 id="Before_you_start" name="Before_you_start">Antes de começar</h2> + +<p>Usar o elemento <code><canvas> </code>não é muito difícil, mas você precisa de um conhecimento básico sobre <a href="/en-US/docs/HTML" title="HTML">HTML</a> e <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. O elemento <code><canvas></code> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades <code>width</code> e <code>height</code> do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">Nesse tutorial</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica" title="Canvas_tutorial/Basic_usage">Utilização básica</a></li> + <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Desenhando formas</a></li> + <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Aplicando estilos e cores</a></li> + <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_text">Desenhando texto</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Usando imagens (em inglês)</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformações</a></li> + <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Composição e recorte</a></li> + <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Animações básicas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Animações avançadas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulação de pixel</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Regiões e acessibilidade</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Otimizando o canvas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Conclusão</a></li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/HTML/Canvas" title="HTML/Canvas">Canvas</a></li> + <li><a class="external external-icon" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Plug-in Canvas para Adobe Illustrator</a></li> + <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a><a href="http://davidwalsh.name/convert-canvas-image"> </a></li> +</ul> + +<h2 id="Nota_dos_contribuidores">Nota dos contribuidores</h2> + +<p><span id="result_box" lang="pt"><span>Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo.</span> <span>Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.</span></span></p> + +<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}</div> diff --git a/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..d18afddefa --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,115 @@ +--- +title: Otimizando canvas +slug: Web/Guide/HTML/Canvas_tutorial/Otimizando_Canvas +tags: + - Canvas + - Gráfico 2D + - Otimização +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> + +<div class="summary"> +<p>O elemento {{HTMLElement("canvas")}} é um dos padrões mais largamente utilizados para renderização de gráficos 2D na Web. É muito usado em jogos e em visualizações complexas. Porém, quando sítios web e aplicativos utilizam canvas até seus limites, começam a surgir problemas de perda de performance. <span class="seoSummary">Este artigo tem o objetivo de prover sugestões de otimização de seu elemento canvas e garantir que seu site ou aplicativo funcione melhor.</span></p> +</div> + +<h2 id="Dicas_de_performance">Dicas de performance</h2> + +<p>O que segue é uma coleção de dicas para melhorar a performance.</p> + +<h3 id="Pre-render_similar_primitives_or_repeating_objects_on_an_off-screen_canvas">Pre-render similar primitives or repeating objects on an off-screen canvas</h3> + +<p>If you find yourself with complex drawing operations on each frame, consider creating an offscreen canvas, draw to it once (or whenever it changes) on the offscreen canvas, then on each frame draw the offscreen canvas.</p> + +<pre class="brush: js">myEntity.offscreenCanvas = document.createElement('canvas'); +myEntity.offscreenCanvas.width = myEntity.width; +myEntity.offscreenCanvas.height = myEntity.height; +myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d'); + +myEntity.render(myEntity.offscreenContext); +</pre> + +<h3 id="Avoid_floating-point_coordinates_and_use_integers_instead">Avoid floating-point coordinates and use integers instead</h3> + +<p>Sub-pixel rendering occurs when you render objects on a canvas without whole values.</p> + +<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); +</pre> + +<p>This causes the browser to do extra calculations to create the anti-aliasing effect. To avoid this, make sure to round all co-ordinates used in calls to {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} using {{jsxref("Math.floor()")}}, for example.</p> + +<h3 id="Don’t_scale_images_in_drawImage">Don’t scale images in <code>drawImage</code></h3> + +<p>Cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p> + +<h3 id="Use_multiple_layered_canvases_for_complex_scenes">Use multiple layered canvases for complex scenes</h3> + +<p>You may find you have some elements that are frequently changing and moving around whereas other things (like UI) never change. An optimization in this situation is to create layers using multiple canvas elements.</p> + +<p>For example you could create a UI layer that sits on top of everything and is only drawn during user input. You could create game layer where the frequently updating entities exist and a background layer for entities that rarely update.</p> + +<pre class="brush: html"><div id="stage"> + <canvas id="ui-layer" width="480" height="320"></canvas> + <canvas id="game-layer" width="480" height="320"></canvas> + <canvas id="background-layer" width="480" height="320"></canvas> +</div> + +<style> + #stage { + width: 480px; + height: 320px; + position: relative; + border: 2px solid black + } + canvas { position: absolute; } + #ui-layer { z-index: 3 } + #game-layer { z-index: 2 } + #background-layer { z-index: 1 } +</style> +</pre> + +<h3 id="CSS_for_large_background_images">CSS for large background images</h3> + +<p>If like most games you have a static background image, use a plain {{HTMLElement("div")}} element with a CSS {{cssxref("background")}} property and position it under the canvas. This will avoid drawing a large image to the canvas on every tick.</p> + +<h3 id="Scaling_canvas_using_CSS_transforms">Scaling canvas using CSS transforms</h3> + +<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS transforms</a> are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 480 x 320 px.</p> + +<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; +var scaleY = window.innerHeight / canvas.height; + +var scaleToFit = Math.min(scaleX, scaleY); +var scaleToCover = Math.max(scaleX, scaleY); + +stage.style.transformOrigin = '0 0'; //scale from top left +stage.style.transform = 'scale(' + scaleToFit + ')'; +</pre> + +<h3 id="Turn_off_transparency">Turn off transparency</h3> + +<p>If your game uses canvas and doesn’t need to be transparent, set the <code>alpha</code> option to <code>false</code> when creating a drawing context with <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>. This information can be used internally to optimize rendering.</p> + +<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre> + +<h3 id="More_tips">More tips</h3> + +<ul> + <li>Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).</li> + <li>Avoid unnecessary canvas state changes.</li> + <li>Render screen differences only, not the whole new state.</li> + <li>Avoid the {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} property whenever possible.</li> + <li>Avoid <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">text rendering</a> whenever possible.</li> + <li>Try different ways to clear the canvas ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. resizing the canvas)</li> + <li>With animations, use {{domxref("window.requestAnimationFrame()")}} instead of {{domxref("window.setInterval()")}} .</li> + <li>Be careful with heavy physics libraries</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li> + <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p> diff --git a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..0b0dcfe7e7 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,333 @@ +--- +title: Using images +slug: Web/Guide/HTML/Canvas_tutorial/Using_images +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div> + +<div class="summary"> +<p>Até agora nós criamos nossos próprios <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">shapes</a> e aplicamos estilos(<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">applied styles</a>) a eles. Um dos recursos mais interessantes do {{HTMLElement("canvas")}} é a capacidade de usar imagens. Eles podem ser usados para composição dinâmica de fotos ou como pano de fundo de gráficos, como sprites em jogos e assim por diante. Imagens externas podem ser usadas em qualquer formato suportado pelo navegador, tais como PNG, GIF, ou JPEG. Você pode até usar a imagem produzida por outros elementos da tela na mesma página que a fonte!</p> +</div> + +<p>A importação de imagens para o canvas é basicamente um processo de duas etapas:</p> + +<ol> + <li>Obter uma referência a um objeto {{domxref("HTMLImageElement")}} ou a outro elemento do canvas como fonte. Também é possível usar imagens fornecendo uma URL.</li> + <li>Desenhar a imagem no canvas usando a função <code>drawImage()</code> .</li> +</ol> + +<p>Vamos dar uma olhada em como fazer isso.</p> + +<h2 id="Getting_images_to_draw">Getting images to draw</h2> + +<p>The canvas API is able to use any of the following data types as an image source:</p> + +<dl> + <dt>{{domxref("HTMLImageElement")}}</dt> + <dd>These are images created using the <code>Image()</code> constructor, as well as any {{HTMLElement("img")}} element.</dd> + <dt>{{domxref("SVGImageElement")}}</dt> + <dd>These are images embedded using the {{SVGElement("image")}} element.</dd> + <dt>{{domxref("HTMLVideoElement")}}</dt> + <dd>Using an HTML {{HTMLElement("video")}} element as your image source grabs the current frame from the video and uses it as an image.</dd> + <dt>{{domxref("HTMLCanvasElement")}}</dt> + <dd>You can use another {{HTMLElement("canvas")}} element as your image source.</dd> +</dl> + +<p>These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.</p> + +<p>There are several ways to get images for use on a canvas.</p> + +<h3 id="Using_images_from_the_same_page">Using images from the same page</h3> + +<p>We can obtain a reference to images on the same page as the canvas by using one of:</p> + +<ul> + <li>The {{domxref("document.images")}} collection</li> + <li>The {{domxref("document.getElementsByTagName()")}} method</li> + <li>If you know the ID of the specific image you wish to use, you can use {{domxref("document.getElementById()")}} to retrieve that specific image</li> +</ul> + +<h3 id="Using_images_from_other_domains">Using images from other domains</h3> + +<p>Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to <code>drawImage()</code>. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">taint the canvas</a>.</p> + +<h3 id="Using_other_canvas_elements">Using other canvas elements</h3> + +<p>Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.</p> + +<p>One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.</p> + +<h3 id="Creating_an_image_from_scratch">Creating an image from scratch</h3> + +<p>Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient <code>Image()</code> constructor:</p> + +<pre class="brush: js">var img = new Image(); // Create new img element +img.src = 'myImage.png'; // Set source path +</pre> + +<p>When this script gets executed, the image starts loading.</p> + +<p>If you try to call <code>drawImage()</code> before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:</p> + +<pre class="brush: js">var img = new Image(); // Create new img element +img.addEventListener('load', function() { + // execute drawImage statements here +}, false); +img.src = 'myImage.png'; // Set source path +</pre> + +<p>If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.</p> + +<h3 id="Embedding_an_image_via_data_URL">Embedding an image via data: URL</h3> + +<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p> + +<pre class="brush: js">var img = new Image(); // Create new img element +img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; +</pre> + +<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p> + +<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p> + +<h3 id="Using_frames_from_a_video">Using frames from a video</h3> + +<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p> + +<pre class="brush: js">function getMyVideo() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + return document.getElementById('myvideo'); + } +} +</pre> + +<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p> + +<h2 id="Drawing_images">Drawing images</h2> + +<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt> + <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd> +</dl> + +<div class="note"> +<p>SVG images must specify a width and height in the root <svg> element.</p> +</div> + +<h3 id="Example_A_simple_line_graph">Example: A simple line graph</h3> + +<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="180" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js;highlight[5]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function() { + ctx.drawImage(img, 0, 0); + ctx.beginPath(); + ctx.moveTo(30, 96); + ctx.lineTo(70, 66); + ctx.lineTo(103, 76); + ctx.lineTo(170, 15); + ctx.stroke(); + }; + img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; +}</pre> + +<p>The resulting graph looks like this:</p> + +<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p> + +<h2 id="Scaling">Scaling</h2> + +<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt> + <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd> +</dl> + +<h3 id="Example_Tiling_an_image">Example: Tiling an image</h3> + +<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p> + +<div class="note"> +<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p> +</div> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function() { + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { + ctx.drawImage(img, j * 50, i * 38, 50, 38); + } + } + }; + img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +}</pre> + +<p>The resulting canvas looks like this:</p> + +<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p> + +<h2 id="Slicing">Slicing</h2> + +<p>The third and last variant of the <code>drawImage()</code> method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt> + <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p> + +<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p> + +<h3 id="Example_Framing_an_image">Example: Framing an image</h3> + +<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p> + +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + <div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </div> + </body> +</html> +</pre> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + + // Draw slice + ctx.drawImage(document.getElementById('source'), + 33, 71, 104, 124, 21, 20, 87, 104); + + // Draw frame + ctx.drawImage(document.getElementById('frame'), 0, 0); +}</pre> + +<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p> + +<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p> + +<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p> + +<h2 id="Art_gallery_example">Art gallery example</h2> + +<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}} element is inserted for each image and a frame is drawn around it.</p> + +<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p> + +<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p> + +<pre class="brush: html"><html> + <body onload="draw();"> + <table> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td> + </tr> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td> + </tr> + </table> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </body> +</html> +</pre> + +<p>And here's some CSS to make things look nice:</p> + +<pre class="brush: css">body { + background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A; + margin: 10px; +} + +img { + display: none; +} + +table { + margin: 0 auto; +} + +td { + padding: 15px; +} +</pre> + +<p>Tying it all together is the JavaScript to draw our framed images:</p> + +<pre class="brush: js">function draw() { + + // Loop through all images + for (var i = 0; i < document.images.length; i++) { + + // Don't add a canvas for the frame image + if (document.images[i].getAttribute('id') != 'frame') { + + // Create canvas element + canvas = document.createElement('canvas'); + canvas.setAttribute('width', 132); + canvas.setAttribute('height', 150); + + // Insert before the image + document.images[i].parentNode.insertBefore(canvas,document.images[i]); + + ctx = canvas.getContext('2d'); + + // Draw image to canvas + ctx.drawImage(document.images[i], 15, 20); + + // Add frame + ctx.drawImage(document.getElementById('frame'), 0, 0); + } + } +}</pre> + +<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p> + +<h2 id="Controlling_image_scaling_behavior">Controlling image scaling behavior</h2> + +<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p> + +<pre class="brush: js">ctx.mozImageSmoothingEnabled = false; +ctx.webkitImageSmoothingEnabled = false; +ctx.msImageSmoothingEnabled = false; +ctx.imageSmoothingEnabled = false; +</pre> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p> diff --git a/files/pt-br/web/api/randomsource/getrandomvalues/index.html b/files/pt-br/web/api/crypto/getrandomvalues/index.html index 7e54e933ed..7e54e933ed 100644 --- a/files/pt-br/web/api/randomsource/getrandomvalues/index.html +++ b/files/pt-br/web/api/crypto/getrandomvalues/index.html diff --git a/files/pt-br/web/api/cryptokey/algorithm/index.html b/files/pt-br/web/api/cryptokey/algorithm/index.html deleted file mode 100644 index d80199a4ed..0000000000 --- a/files/pt-br/web/api/cryptokey/algorithm/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: CryptoKey.algorithm -slug: Web/API/CryptoKey/algorithm -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/algorithm ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>A propriedade <code><strong>CryptoKey.algorithm</strong></code> de apenas leitura é um valor opaco contendo todas as informações sobre o algoritmo relacionado à key.</p> - -<p>Implementações diferentes tem diferentes tipos de valores opacos para os mesmos: tal objeto não pode ser compartilhado.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.algorithm</code> -</pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<ul> - <li><code><em>result</em></code> é um objeto opaco descrevendo o algoritmo com o qual a key está relacionado.</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-algorithm', 'CryptoKey.algorithm') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatChrome(37) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>37</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> - <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> -</ul> - -<h2 id="Dicionário">Dicionário</h2> - -<p>"Key" = "Chave"</p> diff --git a/files/pt-br/web/api/cryptokey/extractable/index.html b/files/pt-br/web/api/cryptokey/extractable/index.html deleted file mode 100644 index 4fe2885cbc..0000000000 --- a/files/pt-br/web/api/cryptokey/extractable/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: CryptoKey.extractable -slug: Web/API/CryptoKey/extractable -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/extractable ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>A propriedade de apenas leitura <code><strong>CryptoKey.extractable</strong></code> que indica se a key bruta do material pode ser extraída, para por exemplo arquivá-la.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.extractable</code> -</pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<ul> - <li><code><em>result</em></code> é um {{jsxref("Boolean")}} indicando se a chave pode ser extraída.</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-extractable', 'CryptoKey.extractable') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatChrome(37) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>37</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> - <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> -</ul> - -<h3 id="Dicionário">Dicionário</h3> - -<p>"Key" = "Chave"</p> diff --git a/files/pt-br/web/api/cryptokey/type/index.html b/files/pt-br/web/api/cryptokey/type/index.html deleted file mode 100644 index 666de87d23..0000000000 --- a/files/pt-br/web/api/cryptokey/type/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: CryptoKey.type -slug: Web/API/CryptoKey/type -tags: - - API - - Apenas Leitura - - CryptoKey - - Propriedades - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/type ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>O <code><strong>CryptoKey.type</strong></code> é uma propriedade de apenas leitura que indica o tipo de key: se for uma key para um algoritmo simétrico (<code>"secret"</code>) ou, para um algoritmo assimétrico, (<code>"public"</code> ou <code>"private"</code>, dependendo do seu propósito).</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.type</code> -</pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<ul> - <li><code><em>result</em></code> é um valor enumerado que pode ser: - - <ul> - <li><code>"secret"</code> representa uma key única utilizada para criptografar ou descriptografar uma mensagem que faz uso de um algoritmo simétrico.</li> - <li><code>"public"</code> representa uma key pública e compartilhável usada em um algoritmo assimétrico.</li> - <li><code>"private"</code> representa uma key utilizada em um algoritmo assimétrico que deve ser mantida em privado.</li> - </ul> - </li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificações</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatChrome(37) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>37</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> - <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> -</ul> - -<h3 id="Dicionário">Dicionário:</h3> - -<p>"Key" = "Chave"</p> diff --git a/files/pt-br/web/api/cryptokey/usages/index.html b/files/pt-br/web/api/cryptokey/usages/index.html deleted file mode 100644 index c74a658a32..0000000000 --- a/files/pt-br/web/api/cryptokey/usages/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: CryptoKey.usages -slug: Web/API/CryptoKey/usages -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/usages ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>A propriedade de apenas leitura <code><strong>CryptoKey.usages</strong></code> é um conjunto enumerado que indica os propósitos da key.</p> - -<p>Possíveis valores são:</p> - -<ul> - <li><code>"encrypt"</code>, permitindo que a key seja utilizada para {{glossary("encryption", "encrypting")}} mensagens.</li> - <li><code>"decrypt"</code>, permitindo que a key seja utilizada para {{glossary("decryption", "decrypting")}} mensagens.</li> - <li><code>"sign"</code>, permitindo que a key seja utilizada para {{glossary("signature", "signing")}} mensagens.</li> - <li><code>"verify"</code>, permitindo que a key seja utilizada para {{glossary("verification", "verifying the signature")}} de mensagens.</li> - <li><code>"deriveKey"</code>, permitindo que a key seja utilizada como key base na derivação de uma nova key.</li> - <li><code>"deriveBits"</code>, permitindo que a key seja utilizada como key base na derivação de bits de informação para uso em criptografias primitivas.</li> - <li><code>"wrapKey"</code>, permitindo que a key envolva uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li> - <li><code>"unwrapKey"</code>, permitindo que a key desvincule uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li> -</ul> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.usages</code> -</pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<ul> - <li><code><em>result</em></code> é um {{jsxref("Array")}} de valores enumerados.</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-usages', 'CryptoKey.usages') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatChrome(37) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>37</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> - <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> -</ul> - -<h2 id="Dicionário">Dicionário:</h2> - -<p>"Key" = "Chave"</p> diff --git a/files/pt-br/web/api/deviceacceleration/index.html b/files/pt-br/web/api/devicemotioneventacceleration/index.html index e8e5432e4a..e8e5432e4a 100644 --- a/files/pt-br/web/api/deviceacceleration/index.html +++ b/files/pt-br/web/api/devicemotioneventacceleration/index.html diff --git a/files/pt-br/web/api/devicerotationrate/index.html b/files/pt-br/web/api/devicemotioneventrotationrate/index.html index 872b3c6f25..872b3c6f25 100644 --- a/files/pt-br/web/api/devicerotationrate/index.html +++ b/files/pt-br/web/api/devicemotioneventrotationrate/index.html diff --git a/files/pt-br/web/api/document/readystatechange_event/index.html b/files/pt-br/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..185350cb54 --- /dev/null +++ b/files/pt-br/web/api/document/readystatechange_event/index.html @@ -0,0 +1,83 @@ +--- +title: readystatechange +slug: Web/Events/readystatechange +translation_of: Web/API/Document/readystatechange_event +--- +<p>{{ApiRef}}</p> + +<p>O evento <code>readystatechange</code> é ativado quando o atributo <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Document/readyState"><code>readyState</code></a> de um documento é alterado.</p> + +<h2 id="Informações_gerais">Informações gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Propaga</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Document</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma.</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: js">// alternativa ao DOMContentLoaded +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + initApplication(); + } +} +</pre> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + +<p>Este evento tem sido suportado pelo Internet Explorer há várias versões, e pode ser usada como uma alternativa para o evento <a href="/en-US/docs/Mozilla_event_reference/DOMContentLoaded_(event)"><code>DOMContentLoaded</code></a> (veja a seção <a href="/pt-BR/docs/Web/Events/DOMContentLoaded#Cross-browser_fallback">cross-browser fallback</a>).</p> + +<h2 id="Eventos_Relacionados">Eventos Relacionados</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/pt-br/web/api/document/elementoregistrado/index.html b/files/pt-br/web/api/document/registerelement/index.html index bff318b3a9..bff318b3a9 100644 --- a/files/pt-br/web/api/document/elementoregistrado/index.html +++ b/files/pt-br/web/api/document/registerelement/index.html diff --git a/files/pt-br/web/api/document_object_model/events/index.html b/files/pt-br/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..4d04915450 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/events/index.html @@ -0,0 +1,82 @@ +--- +title: Events and the DOM +slug: DOM/Referencia_do_DOM/Events +translation_of: Web/API/Document_Object_Model/Events +--- +<div>{{DefaultAPISidebar("DOM")}}</div> + +<h2 id="Introduction" name="Introduction">Introdução</h2> + +<p>Este capítulo descreve o Modelo de Eventos do DOM. A interface de <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event" rel="noopener">Eventos</a> é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>, e vários outros exemplos que mostram como diversas interfaces de evento se relacionam uma com a outraThere is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p> + +<p>Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture" rel="noopener">DOM Level 3 Events draft</a>.</p> + +<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando event listeners</h2> + +<p>Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.</p> + +<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> + +<pre class="brush: js notranslate">// Assuming myButton is a button element +myButton.addEventListener('click', greet, false) +function greet(event){ + // print and have a look at the event object + // always print arguments in case of overlooking any other arguments + console.log('greet:', arguments) + alert('hello world') +} +</pre> + +<p>Este é o método que você deve usar em páginas web modernas.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Internet Explorer 6–8 não suportavam este método, oferecendo uma API {{domxref("EventTarget.attachEvent")}} parecida no lugar. Para compatibilidade cross-browser, use uma das muitas bibliotecas JavaScript disponíveis.</p> +</div> + +<p>Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.</p> + +<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">atributo HTML</a></h3> + +<pre class="brush: html notranslate"><button onclick="alert('Hello world!')"> +</pre> + +<p>O código JavaScript no atributo é passado para o objeto Evento através do parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de uma maneira especial, descrita na especificação HTML.</a></p> + +<div class="blockIndicator warning"> +<p><strong>Cuidado:</strong> Este método deve ser evitado! Ele suja a marcação, e a faz menos legível. Preocupações com o conteúdo/estrutura e comportamento não são bem separadas, tornando mais díficil encontrar um bug.</p> +</div> + +<h3 id="DOM_element_properties" name="DOM_element_properties">DOM element properties</h3> + +<pre class="brush: js notranslate">// Supondo que myButton seja um elemento button +myButton.onclick = function(event){alert('Hello world')} +</pre> + +<p>A função pode ser definida para receber um parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de maneira especial, descrita na especificação HTML.</a></p> + +<p>O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.</p> + +<h2 id="Acessando_interfaces_doEvento">Acessando interfaces doEvento</h2> + +<p>Manipulações do Evento podem ser atribuídas a vários objetos (incluindo elementos DOM, documentos, o {{domxref("window")}} object, etc.). Quando um evento ocorre, o objeto do evento é criado e passado sequencialmente ao event listeners.</p> + +<p>A interface {{domxref("Event")}} é acessível de dentro da função manipuladora, atrás do objeto evento passado como primeiro argumento. O seguinte exemplo simples mostra como um objeto evento é passado á função manipuladora do evento, e pode usado de dentro de tal função.</p> + +<pre class="brush: js notranslate">function print(evt) { + // the evt parameter is automatically assigned the event object + // take care of the differences between console.log & alert + console.log('print:', evt) + alert(evt) +} +// any function should have an appropriate name, that's what called semantic +table_el.onclick = print +</pre> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/pt-br/web/api/document_object_model/examples/index.html b/files/pt-br/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..87ec3601e2 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/examples/index.html @@ -0,0 +1,376 @@ +--- +title: Examples of web and XML development using the DOM +slug: DOM/Referencia_do_DOM/Examples +translation_of: Web/API/Document_Object_Model/Examples +--- +<p>Este capítulo fornece exemplos mais longos de desenvolvimento de Web e XML usando o DOM. Sempre que possível, os exemplos usam APIs, truques e padrões comuns no JavaScript para manipular o objeto de documento.</p> + +<h2 id="Example_1:_height_and_width" name="Example_1:_height_and_width">Exemplo 1: altura e largura</h2> + +<p>O exemplo a seguir mostra o uso das propriedades de altura e largura ao lado de imagens de dimensões variáveis:</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> +function init() { + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> + +<p>Image 2: height="50", width="500", but no style + <img id="image2" + src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> + +<p>Image 3: no height, width, but style="height: 50px; width: 500px;" + <img id="image3" + src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +</pre> + +<h2 id="Example_2:_Image_Attributes" name="Example_2:_Image_Attributes">Exemplo 2: Atributos de Imagem</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" height="100" alt="border test"> +</p> + +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_3:_Manipulating_Styles" name="Example_3:_Manipulating_Styles">Exemplo 3: Manipulando Estilos</h2> + +<p>Neste exemplo simples, algumas propriedades de estilo básicas de um elemento de parágrafo HTML são acessadas usando o objeto de estilo no elemento e as propriedades de estilo CSS do objeto, que podem ser recuperadas e definidas a partir do DOM. Neste caso, você está manipulando os estilos individuais diretamente. No próximo exemplo (veja Exemplo 4), você pode usar folhas de estilo e suas regras para alterar estilos para documentos inteiros.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> + +<script> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_4:_Using_Stylesheets" name="Example_4:_Using_Stylesheets">Exemplo 4: Usando folhas de estilo</h2> + +<p>A propriedade styleSheets no objeto de documento retorna uma lista das folhas de estilo que foram carregadas nesse documento. Você pode acessar essas folhas de estilo e suas regras individualmente usando os objetos stylesheet, style e CSSRule, como demonstrado neste exemplo, que imprime todos os seletores de regras de estilo para o console.</p> + +<pre class="brush:js">var ss = document.styleSheets; + +for(var i = 0; i < ss.length; i++) { + for(var j = 0; j < ss[i].cssRules.length; j++) { + dump( ss[i].cssRules[j].selectorText + "\n" ); + } +}</pre> + +<p>Para um documento com uma única folha de estilo na qual as três regras a seguir são definidas:</p> + +<pre class="brush:css">body { background-color: darkblue; } +p { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +</pre> + +<p>Este script produz o seguinte:</p> + +<pre>BODY +P +#LUMPY +</pre> + +<h2 id="Example_5:_Event_Propagation" name="Example_5:_Event_Propagation"> </h2> + +<h2 id="Example_5:_Event_Propagation" name="Example_5:_Event_Propagation">Exemplo 5: Propagação de Eventos</h2> + +<p>Este exemplo demonstra como eventos disparar e são tratados no DOM de uma forma muito simples. Quando o corpo deste documento HTML é carregado, um ouvinte de evento é registrado com a linha superior da tabela. O ouvinte de eventos processa o evento executando a função stopEvent, que altera o valor na célula inferior da tabela.</p> + +<p>No entanto, stopEvent também chama um método de objeto de evento, {{domxref ("event.stopPropagation")}}, que mantém o evento de borbulhar mais para cima no DOM. Observe que a própria tabela possui um manipulador de eventos {{domxref ("element.onclick", "onclick")}} que deve exibir uma mensagem quando a tabela é clicada. Mas o método stopEvent interrompeu a propagação e, portanto, após a atualização dos dados na tabela, a fase de evento é efetivamente encerrada e uma caixa de alerta é exibida para confirmar isso.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> + +<style> +#t-daddy { border: 1px solid red } +#c1 { background-color: pink; } +</style> + +<script> +function stopEvent(ev) { + c2 = document.getElementById("c2"); + c2.innerHTML = "hello"; + + // this ought to keep t-daddy from getting the click. + ev.stopPropagation(); + alert("event propagation halted."); +} + +function load() { + elem = document.getElementById("tbl1"); + elem.addEventListener("click", stopEvent, false); +} +</script> +</head> + +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> + +</body> +</html> +</pre> + +<h2 id="Example_6:_getComputedStyle" name="Example_6:_getComputedStyle">Exemplo 6: getComputedStyle</h2> + +<p>Este exemplo demonstra como o método {{domxref ("window.getComputedStyle")}} pode ser usado para obter os estilos de um elemento que não são definidos usando o atributo de estilo ou com JavaScript (por exemplo, elt.style.backgroundColor = "rgb (173, 216, 230) "). Estes últimos tipos de estilos podem ser recuperados com a propriedade {{domxref ("element.style", "elt.style")}} mais direta, cujas propriedades estão listadas na <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference">Lista de Propriedades do DOM CSS</a>.</p> + +<p>GetComputedStyle() retorna um objeto ComputedCSSStyleDeclaration, cujas propriedades de estilo individuais podem ser referenciadas com o método getPropertyValue() desse objeto, como mostra o seguinte exemplo de documento.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + +<title>getComputedStyle example</title> + +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + var txtHeight = document.getElementById("t1"); + var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); + + txtHeight.value = h_style; + + var txtWidth = document.getElementById("t2"); + var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); + + txtWidth.value = w_style; + + var txtBackgroundColor = document.getElementById("t3"); + var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color"); + + txtBackgroundColor.value = b_style; +} +</script> + +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; +} +</style> + +</head> + +<body> + +<div id="d1">&nbsp;</div> + +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1" /> + max-width<input id="t2" type="text" value="2" /> + bg-color<input id="t3" type="text" value="3" /> + </p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_7:_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Exemplo 7: Exibindo Propriedades de Evento do Objeto</h2> + +<p>Este exemplo usa métodos DOM para exibir todas as propriedades do objeto {{domxref ("window.onload")}} {{domxref ("evento")}} e seus valores em uma tabela. Ele também mostra uma técnica útil de usar um laço para iterar sobre as propriedades de um objeto para obter seus valores.</p> + +<p>As propriedades dos objetos de evento diferem muito entre os navegadores, o <a href="https://dom.spec.whatwg.org">WHATWG DOM Standard</a> lista as propriedades padrão, porém muitos navegadores estenderam muito esses valores.</p> + +<p>Coloque o seguinte código em um arquivo de texto em branco e carregue-o em uma variedade de navegadores, você ficará surpreso com o número diferente e nomes de propriedades. Você também pode querer adicionar alguns elementos na página e chamar essa função de manipuladores de eventos diferentes.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> + +<style> +table { border-collapse: collapse; } +thead { font-weight: bold; } +td { padding: 2px 10px 2px 10px; } + +.odd { background-color: #efdfef; } +.even { background-color: #ffffff; } +</style> + +<script> + +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } + + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; + + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; + + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } + + document.body.appendChild(table); +} + +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +</pre> + +<h2 id="Example_8:_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Exemplo 8: Usando a interface de tabela do DOM</h2> + +<p>A interface DOM HTMLTableElement fornece alguns métodos de conveniência para criar e manipular tabelas. Dois métodos usados com freqüência são {{domxref ("HTMLTableElement.insertRow")}} e {{domxref ("tableRow.insertCell")}}.</p> + +<p>Para adicionar uma linha e algumas células a uma tabela existente:</p> + +<pre class="brush:html"><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; + +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +</pre> + +<h3 id="Notes" name="Notes"><br> + Notas</h3> + +<ul> + <li>A propriedade {{domxref ("element.innerHTML", "innerHTML")}} de uma tabela nunca deve ser usada para modificar uma tabela, embora você possa usá-la para escrever uma tabela inteira ou o conteúdo de uma célula.</li> + <li>Se os métodos DOM Core {{domxref ("document.createElement")}} e {{domxref ("Node.appendChild")}} são usados para criar linhas e células, o IE requer que eles sejam anexados a um elemento tbody, enquanto outros Os navegadores permitirão acrescentar a um elemento da tabela (as linhas serão adicionadas ao último elemento tbody).</li> + <li>Há uma série de outros métodos convenientes pertencentes à<a href="/en-US/docs/"> tabela de interface</a> que podem ser usados para criar e modificar tabelas.</li> +</ul> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..e6dd923fb5 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,145 @@ +--- +title: How to create a DOM tree +slug: DOM/Referencia_do_DOM/How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +<p>{{draft}}</p> + +<p>Esta página descreve como usar <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">DOM Core</a> API DOM em JavaScript para criar e modificar objetos do DOM. Aplica-se a todas as aplicações baseadas em Gecko (como o Firefox), tanto em código privilegiado (extensões) como em código não privilegiado (páginas web)</p> + +<h3 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Criando uma árvore DOM dinamicamente</h3> + +<p>Considere o seguinte documento XML:</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> + +<p>A W3C DOM API, suportada pelo Mozilla, pode ser usada para criar uma representação na memória deste documento, da seguinte forma:</p> + +<pre class="brush: js">var doc = document.implementation.createDocument("", "", null); +var peopleElem = doc.createElement("people"); + +var personElem1 = doc.createElement("person"); +personElem1.setAttribute("first-name", "eric"); +personElem1.setAttribute("middle-initial", "h"); +personElem1.setAttribute("last-name", "jung"); + +var addressElem1 = doc.createElement("address"); +addressElem1.setAttribute("street", "321 south st"); +addressElem1.setAttribute("city", "denver"); +addressElem1.setAttribute("state", "co"); +addressElem1.setAttribute("country", "usa"); +personElem1.appendChild(addressElem1); + +var addressElem2 = doc.createElement("address"); +addressElem2.setAttribute("street", "123 main st"); +addressElem2.setAttribute("city", "arlington"); +addressElem2.setAttribute("state", "ma"); +addressElem2.setAttribute("country", "usa"); +personElem1.appendChild(addressElem2); + +var personElem2 = doc.createElement("person"); +personElem2.setAttribute("first-name", "jed"); +personElem2.setAttribute("last-name", "brown"); + +var addressElem3 = doc.createElement("address"); +addressElem3.setAttribute("street", "321 north st"); +addressElem3.setAttribute("city", "atlanta"); +addressElem3.setAttribute("state", "ga"); +addressElem3.setAttribute("country", "usa"); +personElem2.appendChild(addressElem3); + +var addressElem4 = doc.createElement("address"); +addressElem4.setAttribute("street", "123 west st"); +addressElem4.setAttribute("city", "seattle"); +addressElem4.setAttribute("state", "wa"); +addressElem4.setAttribute("country", "usa"); +personElem2.appendChild(addressElem4); + +var addressElem5 = doc.createElement("address"); +addressElem5.setAttribute("street", "321 south avenue"); +addressElem5.setAttribute("city", "denver"); +addressElem5.setAttribute("state", "co"); +addressElem5.setAttribute("country", "usa"); +personElem2.appendChild(addressElem5); + +peopleElem.appendChild(personElem1); +peopleElem.appendChild(personElem2); +doc.appendChild(peopleElem); +</pre> + +<p>Veja também o capítulo <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model">DOM chapter of the XUL Tutorial</a>.</p> + +<p>Você pode automatizar a criação de uma árvore DOM usando um <a href="/en/JXON#JXON_reverse_algorithms">algoritmo reverso JXON</a> em associação com a seguinte representação JSON:</p> + +<pre class="brush: js">{ + "people": { + "person": [{ + "address": [{ + "@street": "321 south st", + "@city": "denver", + "@state": "co", + "@country": "usa" + }, { + "@street": "123 main st", + "@city": "arlington", + "@state": "ma", + "@country": "usa" + }], + "@first-name": "eric", + "@middle-initial": "H", + "@last-name": "jung" + }, { + "address": [{ + "@street": "321 north st", + "@city": "atlanta", + "@state": "ga", + "@country": "usa" + }, { + "@street": "123 west st", + "@city": "seattle", + "@state": "wa", + "@country": "usa" + }, { + "@street": "321 south avenue", + "@city": "denver", + "@state": "co", + "@country": "usa" + }], + "@first-name": "jed", + "@last-name": "brown" + }] + } +} +</pre> + +<h3 id="So_what.3F" name="So_what.3F">E daí?</h3> + +<p>As árvores DOM podem ser consultadas <a href="/en/Using_XPath">usando expressões XPath</a>, convertidas em strings ou gravadas em arquivos locais ou remotos usando <a href="/en/Parsing_and_serializing_XML">XMLSerializer</a> (sem ter que primeiro converter para uma string), <a href="/en/DOM/XMLHttpRequest">POSTed para um servidor web</a> (via XMLHttpRequest), transformado usando <a href="/en/XSLT" title="en/XSLT">XSLT</a>, <a href="/en/XLink" title="en/XLink">XLink</a>, convertido para um objeto JavaScript através de um <a href="/en/JXON">algoritmo JXON</a>, etc.</p> + +<p>Você pode usar árvores DOM para modelar dados que não são adequados para RDF (ou talvez você simplesmente não goste de RDF). Outra aplicação é que, uma vez que XUL é XML, a UI de sua aplicação pode ser manipulada, baixada, carregada, salva, carregada, convertida ou transformada de forma bastante fácil.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="internal" href="/en/XML" title="en/XML">XML</a></li> + <li><a class="internal" href="/en/JXON" title="en/JXON">JXON</a></li> + <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li> + <li><a class="internal" href="/en/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li> + <li><a class="internal" href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> +</ul> + +<p>{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}</p> diff --git a/files/pt-br/web/api/document_object_model/index.html b/files/pt-br/web/api/document_object_model/index.html new file mode 100644 index 0000000000..b0ae4420a6 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/index.html @@ -0,0 +1,379 @@ +--- +title: Modelo de Objeto de Documento (DOM) +slug: DOM/Referencia_do_DOM +translation_of: Web/API/Document_Object_Model +--- +<p>{{DefaultAPISidebar("DOM")}}</p> + +<p>O <strong>Modelo de Objeto de Documento (<em>DOM</em>)</strong> é uma interface de programação para documentos HTML, XML e SVG . Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. O DOM fornece uma representação do documento como um grupo estruturado de nós e objetos, possuindo várias propriedades e métodos. Os nós também podem ter manipuladores de eventos que lhe são inerentes, e uma vez que um evento é acionado, os manipuladores de eventos são executados. Essencialmente, ele conecta páginas web a scripts ou linguagens de programação.</p> + +<p>Embora o DOM seja frequentemente acessado usando JavaScript, não é uma parte da linguagem JavaScript. Ele também pode ser acessado por outras linguagens.</p> + +<p>Uma <a href="/en-US/docs/DOM/DOM_Reference/Introduction">introdução</a> ao DOM está disponível.</p> + +<h2 id="DOM_interfaces">DOM interfaces</h2> + +<div class="index"> +<ul> + <li>{{domxref("Attr")}}</li> + <li>{{domxref("CharacterData")}}</li> + <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> + <li>{{domxref("Comment")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("Document")}}</li> + <li>{{domxref("DocumentFragment")}}</li> + <li>{{domxref("DocumentType")}}</li> + <li>{{domxref("DOMError")}}</li> + <li>{{domxref("DOMException")}}</li> + <li>{{domxref("DOMImplementation")}}</li> + <li>{{domxref("DOMString")}}</li> + <li>{{domxref("DOMTimeStamp")}}</li> + <li>{{domxref("DOMSettableTokenList")}}</li> + <li>{{domxref("DOMStringList")}}</li> + <li>{{domxref("DOMTokenList")}}</li> + <li>{{domxref("Element")}}</li> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget")}}</li> + <li>{{domxref("HTMLCollection")}}</li> + <li>{{domxref("MutationObserver")}}</li> + <li>{{domxref("MutationRecord")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeFilter")}}</li> + <li>{{domxref("NodeIterator")}}</li> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> + <li>{{domxref("ProcessingInstruction")}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Text")}}</li> + <li>{{domxref("TreeWalker")}}</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> +</ul> +</div> + +<h2 id="Interfaces_DOM_obsoletas">Interfaces DOM obsoletas</h2> + +<p>O Modelo de Objeto de Documento foi altamente simplificado. Para conseguir isso, as seguintes interfaces presentes na especificação DOM nível 3 ou especificação anterior foi removida. Ainda não está muito claro se alguns podem ser reintroduzidos ou não, mas por enquanto eles têm que ser considerados obsoletos e devem ser evitados:</p> + +<div class="index"> +<ul> + <li>{{domxref("CDATASection")}}</li> + <li>{{domxref("DOMConfiguration")}}</li> + <li>{{domxref("DOMErrorHandler")}}</li> + <li>{{domxref("DOMImplementationList")}}</li> + <li>{{domxref("DOMImplementationRegistry")}}</li> + <li>{{domxref("DOMImplementationSource")}}</li> + <li>{{domxref("DOMLocator")}}</li> + <li>{{domxref("DOMObject")}}</li> + <li>{{domxref("DOMUserData")}}</li> + <li>{{domxref("Entity")}}</li> + <li>{{domxref("EntityReference")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("NameList")}}</li> + <li>{{domxref("Notation")}}</li> + <li>{{domxref("TypeInfo")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li></li> +</ul> +</div> + +<h2 id="Interfaces_HTML">Interfaces HTML</h2> + +<p>Um documento contendo HTML é descrito usando o {{domxref("HTMLDocument")}} interface. Nota-se que a especificação HTML também se extende a {{domxref("Document")}} interface.</p> + +<p>Um objeto <code>HTMLDocument</code> também da acesso á vários recursos de navegadores como a aba ou janela, em que uma página é desenhada usando {{domxref("Window")}} interface, o {{domxref("window.style", "Style")}} associado a ele (normalmente CSS), a história do navegador relativa ao contexto, {{domxref("window.history", "History")}}. Eventualmente, {{domxref("Selection")}} é feito no documento.</p> + +<h3 id="HTML_elemento_interfaces">HTML elemento interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLAnchorElement")}}</li> + <li>{{domxref("HTMLAppletElement")}}</li> + <li>{{domxref("HTMLAreaElement")}}</li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLBaseElement")}}</li> + <li>{{domxref("HTMLBodyElement")}}</li> + <li>{{domxref("HTMLBRElement")}}</li> + <li>{{domxref("HTMLButtonElement")}}</li> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("HTMLDataElement")}}</li> + <li>{{domxref("HTMLDataListElement")}}</li> + <li>{{domxref("HTMLDialogElement")}}</li> + <li>{{domxref("HTMLDirectoryElement")}}</li> + <li>{{domxref("HTMLDivElement")}}</li> + <li>{{domxref("HTMLDListElement")}}</li> + <li>{{domxref("HTMLElement")}}</li> + <li>{{domxref("HTMLEmbedElement")}}</li> + <li>{{domxref("HTMLFieldSetElement")}}</li> + <li>{{domxref("HTMLFontElement")}}</li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("HTMLFrameElement")}}</li> + <li>{{domxref("HTMLFrameSetElement")}}</li> + <li>{{domxref("HTMLHeadElement")}}</li> + <li>{{domxref("HTMLHeadingElement")}}</li> + <li>{{domxref("HTMLHtmlElement")}}</li> + <li>{{domxref("HTMLHRElement")}}</li> + <li>{{domxref("HTMLIFrameElement")}}</li> + <li>{{domxref("HTMLImageElement")}}</li> + <li>{{domxref("HTMLInputElement")}}</li> + <li>{{domxref("HTMLKeygenElement")}}</li> + <li>{{domxref("HTMLLabelElement")}}</li> + <li>{{domxref("HTMLLegendElement")}}</li> + <li>{{domxref("HTMLLIElement")}}</li> + <li>{{domxref("HTMLLinkElement")}}</li> + <li>{{domxref("HTMLMapElement")}}</li> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{domxref("HTMLMenuElement")}}</li> + <li>{{domxref("HTMLMetaElement")}}</li> + <li>{{domxref("HTMLMeterElement")}}</li> + <li>{{domxref("HTMLModElement")}}</li> + <li>{{domxref("HTMLObjectElement")}}</li> + <li>{{domxref("HTMLOListElement")}}</li> + <li>{{domxref("HTMLOptGroupElement")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLOutputElement")}}</li> + <li>{{domxref("HTMLParagraphElement")}}</li> + <li>{{domxref("HTMLParamElement")}}</li> + <li>{{domxref("HTMLPreElement")}}</li> + <li>{{domxref("HTMLProgressElement")}}</li> + <li>{{domxref("HTMLQuoteElement")}}</li> + <li>{{domxref("HTMLScriptElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> + <li>{{domxref("HTMLSourceElement")}}</li> + <li>{{domxref("HTMLSpanElement")}}</li> + <li>{{domxref("HTMLStyleElement")}}</li> + <li>{{domxref("HTMLTableElement")}}</li> + <li>{{domxref("HTMLTableCaptionElement")}}</li> + <li>{{domxref("HTMLTableCellElement")}}</li> + <li>{{domxref("HTMLTableDataCellElement")}}</li> + <li>{{domxref("HTMLTableHeaderCellElement")}}</li> + <li>{{domxref("HTMLTableColElement")}}</li> + <li>{{domxref("HTMLTableRowElement")}}</li> + <li>{{domxref("HTMLTableSectionElement")}}</li> + <li>{{domxref("HTMLTextAreaElement")}}</li> + <li>{{domxref("HTMLTimeElement")}}</li> + <li>{{domxref("HTMLTitleElement")}}</li> + <li>{{domxref("HTMLTrackElement")}}</li> + <li>{{domxref("HTMLUListElement")}}</li> + <li>{{domxref("HTMLUnknownElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="Outras_interfaces">Outras interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("CanvasPixelArray")}}</li> + <li>{{domxref("NotifyAudioAvailableEvent")}}</li> + <li>{{domxref("HTMLAllCollection")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}</li> + <li>{{domxref("HTMLOptionsCollection")}}</li> + <li>{{domxref("HTMLPropertiesCollection")}}</li> + <li>{{domxref("DOMStringMap")}}</li> + <li>{{domxref("RadioNodeList")}}</li> + <li>{{domxref("MediaError")}}</li> +</ul> +</div> + +<h3 id="Obsoleto_HTML_interfaces">Obsoleto HTML interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLBaseFontElement")}}</li> + <li>{{domxref("HTMLIsIndexElement")}}</li> +</ul> +</div> + +<h2 id="SVG_interfaces">SVG interfaces</h2> + +<h3 id="SVG_elemento_interfaces">SVG elemento interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAElement")}}</li> + <li>{{domxref("SVGAltGlyphElement")}}</li> + <li>{{domxref("SVGAltGlyphDefElement")}}</li> + <li>{{domxref("SVGAltGlyphItemElement")}}</li> + <li>{{domxref("SVGAnimationElement")}}</li> + <li>{{domxref("SVGAnimateElement")}}</li> + <li>{{domxref("SVGAnimateColorElement")}}</li> + <li>{{domxref("SVGAnimateMotionElement")}}</li> + <li>{{domxref("SVGAnimateTransformElement")}}</li> + <li>{{domxref("SVGCircleElement")}}</li> + <li>{{domxref("SVGClipPathElement")}}</li> + <li>{{domxref("SVGColorProfileElement")}}</li> + <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> + <li>{{domxref("SVGCursorElement")}}</li> + <li>{{domxref("SVGDefsElement")}}</li> + <li>{{domxref("SVGDescElement")}}</li> + <li>{{domxref("SVGElement")}}</li> + <li>{{domxref("SVGEllipseElement")}}</li> + <li>{{domxref("SVGFEBlendElement")}}</li> + <li>{{domxref("SVGFEColorMatrixElement")}}</li> + <li>{{domxref("SVGFEComponentTransferElement")}}</li> + <li>{{domxref("SVGFECompositeElement")}}</li> + <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> + <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> + <li>{{domxref("SVGFEDisplacementMapElement")}}</li> + <li>{{domxref("SVGFEDistantLightElement")}}</li> + <li>{{domxref("SVGFEFloodElement")}}</li> + <li>{{domxref("SVGFEGaussianBlurElement")}}</li> + <li>{{domxref("SVGFEImageElement")}}</li> + <li>{{domxref("SVGFEMergeElement")}}</li> + <li>{{domxref("SVGFEMergeNodeElement")}}</li> + <li>{{domxref("SVGFEMorphologyElement")}}</li> + <li>{{domxref("SVGFEOffsetElement")}}</li> + <li>{{domxref("SVGFEPointLightElement")}}</li> + <li>{{domxref("SVGFESpecularLightingElement")}}</li> + <li>{{domxref("SVGFESpotLightElement")}}</li> + <li>{{domxref("SVGFETileElement")}}</li> + <li>{{domxref("SVGFETurbulenceElement")}}</li> + <li>{{domxref("SVGFEFuncRElement")}}</li> + <li>{{domxref("SVGFEFuncGElement")}}</li> + <li>{{domxref("SVGFEFuncBElement")}}</li> + <li>{{domxref("SVGFEFuncAElement")}}</li> + <li>{{domxref("SVGFilterElement")}}</li> + <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{domxref("SVGFontElement")}}</li> + <li>{{domxref("SVGFontFaceElement")}}</li> + <li>{{domxref("SVGFontFaceFormatElement")}}</li> + <li>{{domxref("SVGFontFaceNameElement")}}</li> + <li>{{domxref("SVGFontFaceSrcElement")}}</li> + <li>{{domxref("SVGFontFaceUriElement")}}</li> + <li>{{domxref("SVGForeignObjectElement")}}</li> + <li>{{domxref("SVGGElement")}}</li> + <li>{{domxref("SVGGlyphElement")}}</li> + <li>{{domxref("SVGGlyphRefElement")}}</li> + <li>{{domxref("SVGGradientElement")}}</li> + <li>{{domxref("SVGHKernElement")}}</li> + <li>{{domxref("SVGImageElement")}}</li> + <li>{{domxref("SVGLinearGradientElement")}}</li> + <li>{{domxref("SVGLineElement")}}</li> + <li>{{domxref("SVGMarkerElement")}}</li> + <li>{{domxref("SVGMaskElement")}}</li> + <li>{{domxref("SVGMetadataElement")}}</li> + <li>{{domxref("SVGMissingGlyphElement")}}</li> + <li>{{domxref("SVGMPathElement")}}</li> + <li>{{domxref("SVGPathElement")}}</li> + <li>{{domxref("SVGPatternElement")}}</li> + <li>{{domxref("SVGPolylineElement")}}</li> + <li>{{domxref("SVGPolygonElement")}}</li> + <li>{{domxref("SVGRadialGradientElement")}}</li> + <li>{{domxref("SVGRectElement")}}</li> + <li>{{domxref("SVGScriptElement")}}</li> + <li>{{domxref("SVGSetElement")}}</li> + <li>{{domxref("SVGStopElement")}}</li> + <li>{{domxref("SVGStyleElement")}}</li> + <li>{{domxref("SVGSVGElement")}}</li> + <li>{{domxref("SVGSwitchElement")}}</li> + <li>{{domxref("SVGSymbolElement")}}</li> + <li>{{domxref("SVGTextElement")}}</li> + <li>{{domxref("SVGTextPathElement")}}</li> + <li>{{domxref("SVGTitleElement")}}</li> + <li>{{domxref("SVGTRefElement")}}</li> + <li>{{domxref("SVGTSpanElement")}}</li> + <li>{{domxref("SVGUseElement")}}</li> + <li>{{domxref("SVGViewElement")}}</li> + <li>{{domxref("SVGVKernElement")}}</li> +</ul> +</div> + +<h3 id="SVG_data_type_interfaces">SVG data type interfaces</h3> + +<p>Aqui estão a DOM API para tipos de dados utilizados nas definições de propriedades SVG e atributos.</p> + +<div class="note"> +<p><strong>Nota:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p> +</div> + +<h4 id="Static_type">Static type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAngle")}}</li> + <li>{{domxref("SVGColor")}}</li> + <li>{{domxref("SVGICCColor")}}</li> + <li>{{domxref("SVGElementInstance")}}</li> + <li>{{domxref("SVGElementInstanceList")}}</li> + <li>{{domxref("SVGLength")}}</li> + <li>{{domxref("SVGLengthList")}}</li> + <li>{{domxref("SVGMatrix")}}</li> + <li>{{domxref("SVGNumber")}}</li> + <li>{{domxref("SVGNumberList")}}</li> + <li>{{domxref("SVGPaint")}}</li> + <li>{{domxref("SVGPoint")}}</li> + <li>{{domxref("SVGPointList")}}</li> + <li>{{domxref("SVGPreserveAspectRatio")}}</li> + <li>{{domxref("SVGRect")}}</li> + <li>{{domxref("SVGStringList")}}</li> + <li>{{domxref("SVGTransform")}}</li> + <li>{{domxref("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Animated_type">Animated type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedAngle")}}</li> + <li>{{domxref("SVGAnimatedBoolean")}}</li> + <li>{{domxref("SVGAnimatedEnumeration")}}</li> + <li>{{domxref("SVGAnimatedInteger")}}</li> + <li>{{domxref("SVGAnimatedLength")}}</li> + <li>{{domxref("SVGAnimatedLengthList")}}</li> + <li>{{domxref("SVGAnimatedNumber")}}</li> + <li>{{domxref("SVGAnimatedNumberList")}}</li> + <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{domxref("SVGAnimatedRect")}}</li> + <li>{{domxref("SVGAnimatedString")}}</li> + <li>{{domxref("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="SMIL_related_interfaces">SMIL related interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Other_SVG_interfaces">Other SVG interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedPathData")}}</li> + <li>{{domxref("SVGAnimatedPoints")}}</li> + <li>{{domxref("SVGColorProfileRule")}}</li> + <li>{{domxref("SVGCSSRule")}}</li> + <li>{{domxref("SVGExternalResourcesRequired")}}</li> + <li>{{domxref("SVGFitToViewBox")}}</li> + <li>{{domxref("SVGLangSpace")}}</li> + <li>{{domxref("SVGLocatable")}}</li> + <li>{{domxref("SVGRenderingIntent")}}</li> + <li>{{domxref("SVGStylable")}}</li> + <li>{{domxref("SVGTests")}}</li> + <li>{{domxref("SVGTextContentElement")}}</li> + <li>{{domxref("SVGTextPositioningElement")}}</li> + <li>{{domxref("SVGTransformable")}}</li> + <li>{{domxref("SVGUnitTypes")}}</li> + <li>{{domxref("SVGURIReference")}}</li> + <li>{{domxref("SVGViewSpec")}}</li> + <li>{{domxref("SVGZoomAndPan")}}</li> +</ul> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">DOM Exemplos</a></li> +</ul> diff --git a/files/pt-br/web/api/document_object_model/introduction/index.html b/files/pt-br/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..010a5ecd54 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/introduction/index.html @@ -0,0 +1,251 @@ +--- +title: Introdução ao DOM +slug: DOM/Referencia_do_DOM/Introdução +translation_of: Web/API/Document_Object_Model/Introduction +--- +<p><span class="seoSummary">O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Neste guia, apresentaremos brevemente o DOM. Veremos como o DOM representa um documento {{Glossary ("HTML")}} ou {{Glossary ("XML")}} na memória e como você usa APIs para criar aplicativos e conteúdo da Web.</span></p> + +<h2 id="What_is_the_DOM" name="What_is_the_DOM">O que é o DOM?</h2> + +<p>O Document Object Model (<strong>DOM</strong>) é uma interface de programação para os documentos HTML e XML. Representa a página de forma que os programas possam alterar a estrutura do documento, alterar o estilo e conteúdo. O DOM representa o documento com nós e objetos, dessa forma, as linguagens de programação podem se conectar à página.</p> + +<p>Uma página da Web é um documento. Este documento pode ser exibido na janela do navegador ou como a fonte HTML. Mas é o mesmo documento nos dois casos. O DOM (Document Object Model) representa o mesmo documento para que possa ser manipulado. O DOM é uma representação orientada a objetos da página da web, que pode ser modificada com uma linguagem de script como JavaScript.</p> + +<p>Os padrões <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> e <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> são implementados na maioria dos navegadores modernos. Muitos navegadores estendem o padrão; portanto, é necessário ter cuidado ao usá-los na Web, onde os documentos podem ser acessados por vários navegadores com diferentes DOMs.</p> + +<p>Por exemplo, o DOM padrão especifica que o método <code>getElementsByTagName</code> no código abaixo deve retornar uma lista de todos os elementos <code><p></code> no documento:</p> + +<pre class="brush: js notranslate">var paragraphs = document.getElementsByTagName("p"); +// paragraphs[0] is the first <p> element +// paragraphs[1] is the second <p> element, etc. +alert(paragraphs[0].nodeName); +</pre> + +<p>Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas da Web são organizados em objetos (por exemplo, o objeto de <code>document</code> que representa o próprio documento, o objeto de <code>table</code> que implementa a Interface especial DOM {{domxref ("HTMLTableElement")}}}} para acessar tabelas HTML e assim por diante). Esta documentação fornece uma referência objeto a objeto ao DOM.</p> + +<p>O DOM moderno é construído usando várias APIs que trabalham juntas. O <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> principal define os objetos que descrevem fundamentalmente um documento e os objetos dentro dele. Isso é expandido conforme necessário por outras APIs que adicionam novos recursos e capacidades ao DOM. Por exemplo, a <a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> adiciona suporte para representar documentos HTML no DOM principal.</p> + +<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM e JavaScript</h2> + +<p>O pequeno exemplo acima, como quase todos os exemplos nesta referência, é {{glossary ("JavaScript")}}. Ou seja, está escrito em JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ela, a linguagem JavaScript não teria nenhum modelo ou noção de páginas da web, documentos HTML, documentos XML e suas partes componentes (por exemplo, elementos). Cada elemento de um documento - o documento como um todo, o cabeçalho, as tabelas do documento, os cabeçalhos da tabela, o texto nas células da tabela - faz parte do modelo de objeto do documento desse documento, para que todos possam ser acessados e manipulados usando o método DOM e uma linguagem de script como JavaScript.</p> + +<p>No início, o JavaScript e o DOM estavam fortemente interligados, mas, eventualmente, evoluíram para entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, para que possamos escrever esta equação aproximada:</p> + +<p>API (página HTML ou XML) = DOM + JS (linguagem de script)</p> + +<p>O DOM foi projetado para ser independente de qualquer linguagem de programação específica, disponibilizando a representação estrutural do documento a partir de uma única API consistente. Embora nos concentremos exclusivamente no JavaScript nesta documentação de referência, as implementações do DOM podem ser construídas para qualquer idioma, como este exemplo em Python demonstra:</p> + +<pre class="brush: python notranslate"># exemplo de DOM com Python +import xml.dom.minidom as m +doc = m.parse(r"C:\Projects\Py\chap1.xml") +doc.nodeName # propriedade do objeto de documento DOM +p_list = doc.getElementsByTagName("para") +</pre> + +<p>Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Acessando o DOM</h2> + +<p>Você não precisa fazer nada de especial para começar a usar o DOM. Navegadores diferentes têm implementações diferentes do DOM, e essas implementações exibem graus variados de conformidade com o padrão DOM real (um assunto que tentamos evitar nesta documentação), mas todo navegador usa um modelo de objeto de documento para tornar as páginas da web acessíveis via JavaScript.</p> + +<p>Quando você cria um script - seja embutido em um elemento(tag) <code><script></code> ou incluído na página da web por meio de uma instrução de carregamento de script - você pode começar imediatamente a usar a API para o {{domxref ("document")}} ou { {domxref ("Window", "window")}} elementos para manipular o próprio documento ou obter os filhos desse documento, que são os vários elementos na página da web. Sua programação DOM pode ser algo tão simples quanto o exemplo seguinte, que exibe uma mensagem de alerta usando a função {{domxref ("window.alert", "alert()")}} da função {{domxref ("Window", " window ")}} ou pode usar métodos DOM mais sofisticados para criar realmente novo conteúdo, como no extenso exemplo abaixo.</p> + +<p>O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):</p> + +<pre class="brush: html notranslate"><body onload="window.alert('Welcome to my home page!');"> +</pre> + +<p>Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o <code>H1</code> à árvore deste documento:</p> + +<pre class="brush: html notranslate"><html> + <head> + <script> + // run this function when the document is loaded + window.onload = function() { + + // create a couple of elements in an otherwise empty HTML page + var heading = document.createElement("h1"); + var heading_text = document.createTextNode("Big Head!"); + heading.appendChild(heading_text); + document.body.appendChild(heading); + } + </script> + </head> + <body> + </body> +</html> +</pre> + +<h2 id="Important_Data_Types" name="Important_Data_Types">Tipos de dados fundamentais</h2> + +<p>Esta referência tenta descrever os vários objetos e tipos em termos simples. Mas há vários tipos de dados diferentes sendo transmitidos pela API que você deve conhecer.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Como a grande maioria do código que usa o DOM gira em torno da manipulação de documentos HTML, é comum sempre se referir aos nós no DOM como <strong>elementos</strong>, pois em um documento HTML, cada nó é um elemento. Apesar de não ser estritamente precisa, a documentação que você encontrará no MDN frequentemente fará a mesma coisa, por causa de quão comum é essa suposição.</p> +</div> + +<p>A tabela a seguir descreve brevemente esses tipos de dados.</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Tipos de dados (Interface)</th> + <th>Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("Document")}}</td> + <td>Quando um membro retorna um objeto do tipo <code>document</code> (por exemplo, a propriedade <strong><code>ownerDocument </code></strong>de um elemento retorna o <code>document</code> ao qual ele pertence),esse objeto é o próprio objeto de <code>document</code> raiz. O capítulo <a href="/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> descreve o objeto do <code>document</code> .</td> + </tr> + <tr> + <td>{{domxref("Node")}}</td> + <td>Todo objeto localizado em um documento é um nó de algum tipo. Em um documento HTML, um objeto pode ser um nó de elemento, mas também um nó de texto ou atributo.</td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td> + <p>O tipo do <code>element</code> é baseado em <code>node</code>. Isso se refere a um elemento ou um nó do tipo <code>element</code> retornado por um membro do DOM API. Ao invés de dizer, por exemplo, que o método {{domxref("document.createElement()")}} retorna um objeto de referência para um nó, nós apenas dizemos que esse método retorna o <code>element</code> que acabou de ser criado no DOM. Os objetos do <code>element</code> implementam a interface DOM <code>Element</code> e também a mais básica interface <code>Node</code>, sendo ambas incluídas juntas nessa referência. Em um documento HTML, elementos são ainda mais aprimorados pelas APIs HTML DOM. A interface {{domxref("HTMLElement")}} bem como outras interfaces descrevem capacidades de tipos especifícos de elementos (por exemlo, {{domxref("HTMLTableElement")}} para elementos {{HTMLElement("table")}}).</p> + </td> + </tr> + <tr> + <td>{{domxref("NodeList")}}</td> + <td>Uma <code>nodeList</code> é um array de elementos comos os que são retornados pelo método {{domxref("document.getElementsByTagName()")}}. Itens numa <code>nodeList</code> são acessados por índices em uma das duas formas: + <ul> + <li>list.item(1)</li> + <li>list[1]</li> + </ul> + Esses dois são equivalentes. No primeiro, <strong><code>item()</code></strong> é o método único no objeto da <code>nodeList</code>. O último usa uma sintaxe típica de array para buscar o segundo item na lista.</td> + </tr> + <tr> + <td>{{domxref("Attribute")}}</td> + <td>Quando um <code>attribute</code> é retornado por um membro (por exemplo, pelo método <strong><code>createAttribute()</code></strong>), é um objeto de referência que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM bem como elementos, mesmo que raramente você possa usá-los como tal.</td> + </tr> + <tr> + <td>{{domxref("NamedNodeMap")}}</td> + <td> + <p> é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. Um namedNodeMap possui um método item () para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.</p> + + <p>Um <code>namedNodeMap</code> é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. O <code>namedNodeMap</code> possui um método <code>item()</code> para esse propósito, e você também pode adicionar e remover itens de um <code>namedNodeMap</code>.</p> + </td> + </tr> + </tbody> +</table> + +<p>Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó {{domxref("Attribute")}} simplesmente como um <code><strong>attribute</strong></code>, por exemplo, e referir-se a um array de nós DOM como um <code><strong>nodeList</strong></code>. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.</p> + +<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2> + +<p>Esse guia é sobre os objetos e o que você pode usar ao manipular a hierarquia do DOM. Há muitos aspectos que tornam entender como eles funcionam confuso. Por exemplo, o objeto representando o elemento HTML <code>form</code> pega a propriedade <strong><code>name</code></strong> da interface do <code>HTMLFormElement</code> mas a sua propriedade <strong><code>className</code></strong> vem da interface <code>HTMLElement</code>. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.</p> + +<p>Mas o relacionamento entre objetos e interfaces que são implementadas no DOM pode ser confuso, então essa seção busca mostrar um pouco sobre as interfaces na especificação do DOM e como elas são disponibilizadas.</p> + +<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces e Objetos</h3> + +<p>Muitos objetos pegam emprestados de várias interfaces diferentes. O objeto table por exemplo implementa uma interface especializada {{domxref("HTMLTableElement")}}, que inclui métodos como <code>createCaption</code> e <code>insertRow</code>. Mas como é também um elemento HTML, <code>table </code>implementa a interface <code>Element </code>descrita no capítulo DOM {{domxref("Element")}} Reference. E finalmente, já que um elemento HTML é também, no que diz respeito ao DOM, um nó na árvore de nós que fazem o modelo de objeto para uma página HTML ou XML, o objeto table também implementa a interface <code>Node</code> mais básica, de onde deriva <code>Element</code>.</p> + +<p>Quando você pegar a referência para um objeto <code>table</code>, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.</p> + +<pre class="brush: js notranslate">var tabela = document.getElementById("table"); +var atributosTabela = tabela.attributes; // interface Node/Element +for (var i = 0; i < atributosTabela.length; i++) { + // interface HTMLTableElement: atributo border + if (atributosTabela[i].nodeName.toLowerCase() == "border") + tabela.border = "1"; +} +// interface HTMLTableElement: atributo summary +table.summary = "nota: aumento de borda"; +</pre> + +<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Interfaces Core no DOM</h3> + +<p>Essa seção lista algumas das interfaces mais utilizadas no DOM. A ideia não é descrever o que essas APIs fazem aqui mas para te dar uma ideia de que tipos de métodos e propriedades você verá bastante conforme for usando o DOM. Essas APIs são usadas nos exemplos mais extensos no capítulo de <a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples </a>ao fim desse livro.</p> + +<p>Objetos <code>Document</code> e <code>window</code> são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto <code>window</code> representa algo como o browser, e o objeto <code>document</code> é a raiz de todo o documento em si. <code>Element</code> herda dessa interface <code>Node</code> genérica, e juntamente com essas duas interfaces fornecem muitos dos métodos e propriedades que você utiliza em elementos individuais. Esses elementos podem também ter interfaces específicas para lidar com o tipo de dado que esses elementos contêm, como no exemplo do objeto <code>table</code> na seção anterior.</p> + +<p>A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.</p> + +<ul> + <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> + <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li> + <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li> + <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li> + <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li> + <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li> + <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li> + <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li> + <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li> + <li><code>{{domxref("window.content", "", "", "1")}}</code></li> + <li><code>{{domxref("window.onload", "", "", "1")}}</code></li> + <li><code>{{domxref("console.log", "", "", "1")}}()</code></li> + <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> +</ul> + +<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Testando a DOM API</h2> + +<p>Esse documento fornece amostras para cada interface que você pode usar ao desenvolver. Em alguns casos, as amostras são páginas completas em HTML, com o acesso ao DOM em um elemento <code><script></code>, a interface (ex. botões) necessária para ativar o script num formulário, e os elementos HTML pelo qual o DOM opera listados também. Quando esse é o caso, você pode copiar e colar o exemplo em um novo documento HTML, salvar e rodar o exemplo pelo browser.</p> + +<p>Há alguns casos, porém, que os exemplos são mais concisos. Para rodar exemplos que apenas demonstram o relacionamento básico da interface para os elementos HTML, você pode criar uma página teste em que as interfaces podem ser fácilmente acessadas por scripts. A simples página web a seguir fornece um elemento <code><script></code> no header em que você pode colocar funções para testar a interface, alguns elementos HTML com atributos que você consegue buscar, definir ou manipular, e a interface web do usuário necessária para chamar essas funções pelo broswer.</p> + +<p>Você pode usar essa página teste ou criar uma similar para testar as interfaces DOM que quiser e ver como elas funcionam numa plataforma broswer. Você pode alterar os conteúdos da função <code>test()</code> como achar necessário, criar mais botões ou adicionar elementos se necessário.</p> + +<pre class="brush: html notranslate"><html> + <head> + <title>Testes DOM</title> + <script type="application/javascript"> + function setBodyAttr(attr, value){ + if (document.body) eval('document.body.'+attr+'="'+value+'"'); + else notSupported(); + } + </script> + </head> + <body> + <div style="margin: .5in; height: 400;"> + <p><b><tt>text</tt></b></p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">preto + <option value="darkblue">azul escuro + </select> + <p><b><tt>bgColor</tt></b></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">branco + <option value="lightgrey">cinza + </select> + <p><b><tt>link</tt></b></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">azul + <option value="green">verde + </select> <small> + <a href="http://algum.website.tld/pagina.html" id="amostra"> + (link)</a></small><br> + </form> + <form> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> + </body> +</html> +</pre> + +<p>Para testar várias interfaces numa única página - por exemplo, um conjunto de propriedades que afete as cores de uma página web - você pode criar uma página de teste similar com um console inteiro de botões, textfields e outros elementos HTML. A screenshot a seguir te dá uma ideia de como interfaces podem ser agrupadas para testes.</p> + +<figure> +<figcaption>Figura 0.1 Página de Teste DOM</figcaption> +<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure> + +<p>Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (<code>bgColor</code>), a cor dos hiperlinks (<code>aLink</code>), e a cor do texto (<code>text</code>). Porém, ao desenhar suas páginas de teste, testar as interfaces conforme for lendo sobre elas é uma parte importante para aprender a usar o DOM de forma efetiva.</p> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> + +<div>{{DefaultAPISidebar("DOM")}}</div> diff --git a/files/pt-br/web/api/document_object_model/whitespace/index.html b/files/pt-br/web/api/document_object_model/whitespace/index.html new file mode 100644 index 0000000000..f4bebc3678 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/whitespace/index.html @@ -0,0 +1,227 @@ +--- +title: Whitespace no DOM +slug: DOM/Referencia_do_DOM/Whitespace_in_the_DOM +tags: + - DOM + - Intermediário +translation_of: Web/API/Document_Object_Model/Whitespace +--- +<h2 id="The_issue" name="The_issue">O problema</h2> + +<p>A presença de espaço branco no <a href="/pt-BR/docs/DOM">DOM</a> pode dificultar a manipulação da árvore de conteúdo de formas imprevisíveis. No Mozilla, todo o espaço branco no conteúdo de texto do documento original é representado no DOM (isso não inclui <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a> entre tags). (Isso é necessário internamente para que o editor possa preservar a formatação de documentos e também que <code>white-space: pre</code> irá funcionar em <a href="/pt-BR/docs/CSS">CSS</a>). Isso significa que:</p> + +<ul> + <li>haverão alguns nós de texto que contêm somente <a href="/pt-BR/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a>, e</li> + <li>alguns nós de texto terão <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a> no início ou no final.</li> +</ul> + +<p>Em outras palavras, a árvore do DOM para o documento seguinte irá parecer como a imagem abaixo (usando "\n" para representar novas linhas):</p> + +<pre class="brush: html"><!-- Meu documento --> +<html> +<head> + <title>Meu documento</title> +</head> +<body> + <h1>Cabeçalho</h1> + <p> + Parágrafo + </p> +</body> +</html> +</pre> + +<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p> + +<p>Isto pode fazer as coisas um pouco difíceis para qualquer usuário do DOM que quer iterar através do conteúdo, excluindo o <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a>.</p> + +<h2 id="Facilitando_as_coisas">Facilitando as coisas</h2> + +<p>É possível formatar o código como mostrado abaixo para contornar o problema:</p> + +<pre class="brush: html"><!-- Impressão bonita convencional + com espaços brancos (whitespaces) entre as tags: + --> +<div> + <ul> + <li>Posição 1</li> + <li>Posição 2</li> + <li>Posição 3</li> + </ul> +</div> + +<!-- Impressão bonita ajustada ao problema: + --> +<div + ><ul + ><li>Posição 1</li + ><li>Posição 2</li + ><li>Posição 3</li + ></ul +></div> +</pre> + +<p><br> + O código Javascript abaixo define funções diversas que fazem a manipulação de <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace </a>no DOM mais fácil.</p> + +<pre class="brush: js">/** + * Em todo, o whitespace é definido como um dos caracteres + * "\t" TAB \u0009 + * "\n" LF \u000A + * "\r" CR \u000D + * " " SPC \u0020 + * + * Isto não usa o "\s" do Javascript porque inclui espaços + * que não quebram (e alguns outros caracteres). + */ + + +/** + * Determina se um conteúdo de texto do nó é inteiramente whitespace. + * + * @param nod Um nó implementando a interface |CharacterData| (por exemplo: + * |Text|, |Comment|, ou nó |CDATASection| + * @return Verdadeiro se todo conteúdo de texto de |nod| é whitespace, + * de outra forma é falso. + */ +function is_all_ws( nod ) +{ + // Usa as características do ECMA-262 Edition 3 String e RegExp + return !(/[^\t\n\r ]/.test(nod.textContent)); +} + + +/** + * Determina se um nó deve ser ignorado pela função de iterador. + * + * @param nod Um objeto implementando a interface DOM1 |Node|. + * @return verdadeiro se o nó é: + * 1) Um nó |Text| que é todo whitespace + * 2) Um nó |Comment| + * do contrário é falso. + */ + +function is_ignorable( nod ) +{ + return ( nod.nodeType == 8) || // Um nó de comentário + ( (nod.nodeType == 3) && is_all_ws(nod) ); // um nó de texto, todo whitespace +} + +/** + * Versão de |previousSibling| que pula nós que são inteiramente + * whitespace ou comentários. (Normalmente |previousSibling| é uma propriedade + * de todos os nós do DOM que dá o nó irmão, o nó que é + * um filho do mesmo parente, que ocorre imediatamente antes do + * nó de referência.) + * + * @param sib O nó de referência. + * @return Ou: + * 1) O irmão mais próximo do |sib| que não é + * ignorável de acordo com |is_ignorable|, ou + * 2) nulo se tal nó não existe. + */ +function node_before( sib ) +{ + while ((sib = sib.previousSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** + * Versão de |nextSibling| que pula nós que são inteiramente + * whitespace ou comentários. + * + * @param sib O nó de referência. + * @return Ou: + * 1) O irmão mais próximo do |sib| que não é + * ignorável de acordo com |is_ignorable|, ou + * 2) nulo se tal nó não existe. + */ +function node_after( sib ) +{ + while ((sib = sib.nextSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** + * Versão de |lastChild| que pula nós que são inteiramente + * whitespace ou comentários. (Normalmente |lastChild| é uma propriedade + * de todos os nós do DOM que dá o último dos nós contidos + * diretamente no nó de referência.) + * + * @param sib O nó de referência. + * @return Ou: + * 1) O último filho do |sib| que não é + * ignorável de acordo com |is_ignorable|, ou + * 2) nulo se tal nó não existe. + */ +function last_child( par ) +{ + var res=par.lastChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.previousSibling; + } + return null; +} + +/** + * Versão de |firstChild| que pula nós que são inteiramente + * whitespace ou comentários. + * + * @param sib O nó de referência. + * @return Ou: + * 1) O primeiro nó do |sib| que não é + * ignorável de acordo com |is_ignorable|, ou + * 2) nulo se tal nó não existe. + */ +function first_child( par ) +{ + var res=par.firstChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.nextSibling; + } + return null; +} + +/** + * Versão de |data| que não inclui whitespace no início + * e final e normaliza todos whitespaces para um espaço individual. (Normalmente + * |data| é uma propriedade de nós de texto que dá o texto do nó.) + * + * @param txt O nó de texto do qual data deve ser retornado + * @return Uma string dando os conteúdos de um nó de texto com + * whitespace colapsado. + */ +function data_of( txt ) +{ + var data = txt.textContent; + // Usa características do ECMA-262 Edition 3 String e RegExp + data = data.replace(/[\t\n\r ]+/g, " "); + if (data.charAt(0) == " ") + data = data.substring(1, data.length); + if (data.charAt(data.length - 1) == " ") + data = data.substring(0, data.length - 1); + return data; +} +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<p>O código seguinte demonstra o uso das funções acima. Ele itera através dos filhos de um elemento (dos quais filhos são todos os elementos) para encontrar aquele cujo o texto seja <code>"Este é o terceiro parágrafo"</code>, e então muda o atributo da classe e os conteúdos daquele parágrafo.</p> + +<pre class="brush: js">var cur = first_child(document.getElementById("teste")); +while (cur) +{ + if (data_of(cur.firstChild) == "Este é o terceiro parágrafo.") + { + cur.className = "mágica"; + cur.firstChild.textContent = "Este é o parágrafo mágico"; + } + cur = node_after(cur); +} +</pre> diff --git a/files/pt-br/web/api/document/activeelement/index.html b/files/pt-br/web/api/documentorshadowroot/activeelement/index.html index ca10f98461..ca10f98461 100644 --- a/files/pt-br/web/api/document/activeelement/index.html +++ b/files/pt-br/web/api/documentorshadowroot/activeelement/index.html diff --git a/files/pt-br/web/api/document/elementfrompoint/index.html b/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html index c64d67dd08..c64d67dd08 100644 --- a/files/pt-br/web/api/document/elementfrompoint/index.html +++ b/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html diff --git a/files/pt-br/web/api/document/getselection/index.html b/files/pt-br/web/api/documentorshadowroot/getselection/index.html index 2f52375799..2f52375799 100644 --- a/files/pt-br/web/api/document/getselection/index.html +++ b/files/pt-br/web/api/documentorshadowroot/getselection/index.html diff --git a/files/pt-br/web/api/element/blur_event/index.html b/files/pt-br/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..7eb9263be2 --- /dev/null +++ b/files/pt-br/web/api/element/blur_event/index.html @@ -0,0 +1,154 @@ +--- +title: blur (evento) +slug: Web/Events/blur +translation_of: Web/API/Element/blur_event +--- +<p>O evento <code>blur</code> é acionado quando um elemento perde foco. A diferença principal entre este evento e <a href="/en-US/docs/Mozilla_event_reference/focusout"><code>focusout</code></a> é que apenas o segundo 'borbulha'.</p> + +<h2 id="Informação_geral">Informação geral</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Borbulha</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Elemento</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação padrão</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma</dd> +</dl> + +<p>{{NoteStart}}O valor de {{domxref("Document.activeElement")}} varia entre navegadores enquanto este evento é processado ({{bug(452307)}}): O IE10 define-o para o elemento para onde o foco moverá, enquanto Firefox e Chrome muitas vezes definem-o para o <code>body</code> do documento.{{NoteEnd}}</p> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target (DOM element)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>null</td> + </tr> + </tbody> +</table> + +<h2 id="Delegação_do_evento">Delegação do evento</h2> + +<p>Existem duas maneiras de implementar a delegação de eventos para este evento: usando o evento <code>focusout</code> nos navegadores que suportam-o, ou definindo o parâmetro "useCapture" do <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> para <code>true</code>:</p> + +<h3 id="Conteúdo_HTML">Conteúdo HTML </h3> + +<pre class="brush:html;"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h3 id="Conteúdo_JavaScript">Conteúdo JavaScript</h3> + +<pre class="brush: js">var form = document.getElementById("form"); +form.addEventListener("focus", function( event ) { + event.target.style.background = "pink"; +}, true); +form.addEventListener("blur", function( event ) { + event.target.style.background = ""; +}, true);</pre> + +<p>{{EmbedLiveSample('Event_delegation')}}</p> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>6</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>4.0</td> + <td>53</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Antes do Gecko 24 {{geckoRelease(24)}} a interface para este elemento era {{domxref("Event")}}, não {{domxref("FocusEvent")}}. Veja ({{bug(855741)}}).</p> + +<h2 id="Eventos_relacionados">Eventos relacionados</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/focus_event/index.html b/files/pt-br/web/api/element/focus_event/index.html new file mode 100644 index 0000000000..9f6dd7117d --- /dev/null +++ b/files/pt-br/web/api/element/focus_event/index.html @@ -0,0 +1,137 @@ +--- +title: focus +slug: Web/Events/focus +translation_of: Web/API/Element/focus_event +--- +<p>O evento <code>focus</code> é acionado assim que um elemento recebe um foco. O grande diferencial entre este evento e o evento <a href="/en-US/docs/Mozilla_event_reference/focusin"><code>focusin</code></a>, é que esse segundo "borbulha".</p> + +<h2 id="Informações_Gerais">Informações Gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{ domxref("FocusEvent") }}</dd> + <dt style="float: left; text-align: right; width: 120px;">Borbulha</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma.</dd> +</dl> + +<div class="note">Note: The interface was {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})</div> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target (DOM element)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>null</td> + </tr> + </tbody> +</table> + +<h2 id="Eventos_Delegados">Eventos Delegados</h2> + +<p>Existem 2 maneiras diferentes de implementações delegados a partir de um evento: por meio da utilização do evento <code>focusin</code> que todos os browsers atuais suportam tão tecnologia (todos exceto o Firefox), ou por setando o parâmetro "useCapture" do elemento <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> como <code>true</code>:</p> + +<p>{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}</p> + +<p>(Exemplo de codigo do evento <a href="/en-US/docs/Web/Events/blur">blur (event)</a>)</p> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Eventos_Relacionais">Eventos Relacionais</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/focusin_event/index.html b/files/pt-br/web/api/element/focusin_event/index.html new file mode 100644 index 0000000000..797424de54 --- /dev/null +++ b/files/pt-br/web/api/element/focusin_event/index.html @@ -0,0 +1,125 @@ +--- +title: focusin +slug: Web/Events/focusin +translation_of: Web/API/Element/focusin_event +--- +<p>O evento <code>focusin</code> é acionado no momento em que o elemento receba o foco. A grande diferença entre esse evento e o evento <code><a href="/en-US/docs/Mozilla_event_reference/focus_(event)">focus</a></code>, é que apenas o <code>focusin</code> delega o seu evento para o elemento pai (conhecido como bubbling ou deletegate).</p> + +<h2 id="Informações_Gerais">Informações Gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Borbulha</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma.</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target losing focus.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>Event target receiving focus.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Demais_Navegadores">Compatibilidade com Demais Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Eventos_Relacionais">Eventos Relacionais</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/focusout_event/index.html b/files/pt-br/web/api/element/focusout_event/index.html new file mode 100644 index 0000000000..8f72b211b2 --- /dev/null +++ b/files/pt-br/web/api/element/focusout_event/index.html @@ -0,0 +1,125 @@ +--- +title: focusout +slug: Web/Events/focusout +translation_of: Web/API/Element/focusout_event +--- +<p>O evento <code>focusout</code> é acionado assim que o elemento perde o foco. A principal diferença entre esse evento e o evento <code><a href="/en-US/docs/Mozilla_event_reference/blur_(event)">blur</a></code>, é que esse ultimo não gera "borbulhas".</p> + +<h2 id="Informações_Gerais">Informações Gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Borbulha</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma.</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target losing focus.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>Event target receiving focus.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Eventos_Relcionados">Eventos Relcionados</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/name/index.html b/files/pt-br/web/api/element/name/index.html deleted file mode 100644 index 93f5faee9a..0000000000 --- a/files/pt-br/web/api/element/name/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Element.name -slug: Web/API/Element/name -tags: - - API - - DOM - - Element - - NeedsBrowserCompatibility - - NeedsUpdate - - Property - - Reference - - Web -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -<p>{{ APIRef("DOM") }}</p> - -<h2 id="Summary" name="Summary">Summary</h2> - -<p><code><strong>name</strong></code> recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.</p> - -<div class="note"> -<p><strong>Nota:</strong> A propriedade <code>name</code> não existe para outros elementos; diferente de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> e <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p> -</div> - -<p><code>name</code> pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.</p> - -<h2 id="Syntax" name="Syntax">Sintaxe</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Example" name="Example">Exemplo</h2> - -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // Recebe uma referência ao primeiro elemento no formulário - var formElement = document.forms['formA'].elements[0]; - - // Fornece um name a ele - formElement.name = 'inputA'; - - // Exibe o valor do input - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade <code>name</code> de objetos do DOM criados com {{ domxref("document.createElement()") }}.</p> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<p>Especificação W3C DOM 2 HTML:</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> diff --git a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html b/files/pt-br/web/api/event/comparison_of_event_targets/index.html index e9b2004719..e9b2004719 100644 --- a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html +++ b/files/pt-br/web/api/event/comparison_of_event_targets/index.html diff --git a/files/pt-br/web/api/element/addeventlistener/index.html b/files/pt-br/web/api/eventtarget/addeventlistener/index.html index fea1e67e7b..fea1e67e7b 100644 --- a/files/pt-br/web/api/element/addeventlistener/index.html +++ b/files/pt-br/web/api/eventtarget/addeventlistener/index.html diff --git a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html b/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html index c569966b5a..c569966b5a 100644 --- a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html +++ b/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html diff --git a/files/pt-br/web/api/geolocation_api/index.html b/files/pt-br/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..b6799afa16 --- /dev/null +++ b/files/pt-br/web/api/geolocation_api/index.html @@ -0,0 +1,227 @@ +--- +title: Usando geolocation +slug: Using_geolocation +tags: + - Geolocation API + - Guia(2) +translation_of: Web/API/Geolocation_API +--- +<p>A <strong>API geolocation</strong> permite que o usuário forneça sua localização a aplicativos web se ele desejar. Por questões de privacidade, o usuário é perguntado se permite fornecer informações de localização.</p> + +<h2 id="O_objeto_geolocation">O objeto geolocation</h2> + +<p>O aplicativo de geolocalização é utilizado através de um objeto filho chamado <code>geolocation </code>localizado dentro do objeto <code>navigator</code>. Se o objeto existe, os serviços de geolocalização estarão disponíveis. Você pode adicionalmente testar a presença da geolocalização:</p> + +<pre class="brush: js">if ("geolocation" in navigator) { + /* geolocation is available */ +} else { + alert("I'm sorry, but geolocation services are not supported by your browser."); +} +</pre> + +<p>{{ gecko_minversion_header("1.9.2") }}</p> + +<p>Ao iniciar no Gecko 1.9.2 (Firefox 3.6), add-ons podem obter o objeto de geolocalização obtendo a referência para o serviço de geolocaliazação como se ve a seguir:</p> + +<pre class="brush: js">var geolocation = Components.classes["@mozilla.org/geolocation;1"] + .getService(Components.interfaces.nsIDOMGeoGeolocation); +</pre> + +<h3 id="Obtendo_a_posição_atual">Obtendo a posição atual</h3> + +<p>Para obter a localização atual do usuário, você pode utiliza o método <code>getCurrentPosition().</code> Isto inicia uma requisição assíncrona para identificar a posição do usuário, e consulta o hardware de localização para conseguir informações atualizadas. Quando a posição é determinada, uma rotina específica de retorno é executada. Você pode opcionalmente gerar uma segunda rotina de retorno se um erro ocorrer. Um terceiro, e opcional, parâmetro é a interface "opções" onde você pode configurar o tempo máximo da posição recebida e o tempo a se esperar por uma solicitação.</p> + +<p>Use <code>getCurrentPosition()</code> se você deseja uma única posição rapidamente, independente da precisão. Dispositivos com GPS, por exemplo, podem levar um minuto ou mais para conseguir a localização, e portanto dados menos precisos (localização do IP location ou rede wifi) podem retornar do método <code>getCurrentPosition()</code>.</p> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>O exemplo acima irá fazer a função the <code>do_something()</code> executar quando a localização for obtida.</p> + +<h3 id="Verificando_a_posição_atual">Verificando a posição atual</h3> + +<div class="syntaxbox">Se os dados de posição mudam (sejam pelo movimento do dispositivo ou se uma informação mais precisa for recebida), se pode configurar um retorno que é feito com esta informação de posição atual. Isto é feito usando a função <code>watchPosition(), </code>a qual tem os mesmos parâmetros de entrada da função <code>getCurrentPosition()</code>. Seu retorno é chamada múltiplas vezes, permitindo que o navegador ou atualize sua posição enquanto você se move, ou forneça uma localização mais precisa enquanto diferentes técnicas são usadas para localizar sua posição. O erro do retorno, o qual é opcional assim como no <code>getCurrentPosition()</code>, é chamado uma única vez, se nenhum resultado válido retornar.</div> + +<p>O <code>watchPosition()</code> pode ser usado sem que não haja a chamada inicial de <code>getCurrentPosition()</code>.</p> + +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +} +);</pre> + +<p>O método <code>watchPosition()</code> retorna um número de ID que pode ser usado para identificar a <code>posição</code> solicitada; você pode usar esse valor em conjunto com o método <code>clearWatch()</code>, parando a localização do usuário.</p> + +<pre>navigator.geolocation.clearWatch(watchID); + +</pre> + +<p><code>watchPosition()</code>retorna um callback sucesso e erro (como <code>getCurrentPosition</code>) e um objeto <code>positionObjects</code>, que pode ter três propriedades:</p> + +<ul> + <li><code>enableHighAccuracy</code> – Um booleano que indica ao dispositivo que você deseja obter leituras mais precisas (este parâmetro pode ou não pode fazer a diferença, dependendo do seu hardware)</li> + <li><code>maximumAge</code> – Idade máxima (em milissegundos) da leitura (opção adequada, pois o dispositivo pode armazenar em cache leituras para poupar energia e / ou largura de banda)</li> + <li><code>timeout</code> – O tempo máximo (em milissegundos) que está preparado para permitir que o dispositivo para tentar obter uma Geo Location</li> +</ul> + +<p>Segue uma chamada para watchPosition:</p> + +<pre>var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});</pre> + +<p>Exemplo de watchPosition em uso: <a href="https://www.thedotproduct.org/posts/a-simple-example-of-navigatorgeolocationwatchposition.html">thedotproduct.org/posts/a-simple-example-of-navigatorgeolocationwatchposition</a><br> + <a id="fck_paste_padding"></a></p> + +<h2 id="Imprimindo_uma_posição">Imprimindo uma posição</h2> + +<p>A localização do usuário é impressa usando o objeto Position, que tem os seguintes campos:</p> + +<dl> + <dt>timestamp</dt> + <dd>Momento em que a leitura foi feita, como <code>DOMTimeStamp</code>.</dd> + <dt>coords</dt> + <dd>Objecto <a class="internal" href="/en/XPCOM_Interface_Reference/NsIDOMGeoPositionCoords" title="En/NsIDOMGeoPositionCoords"><code>nsIDOMGeoPositionCoords</code></a> indicando a localização.</dd> + <dt>address {{ gecko_minversion_inline("1.9.2") }} {{obsolete_inline("14.0")}}</dt> + <dd>{{ interface("nsIDOMGeoPositionAddress") }} objeto especificando o endereço correspondente, se disponível.</dd> +</dl> + +<h2 id="Manipulação_de_erros"><br> + Manipulação de erros</h2> + +<p>Retornando o callback de erro, se fornecido, chamar <code>getCurrentPosition()</code> e <code>watchPosition()</code>, tem a seguinte assinatura:</p> + +<pre>function errorCallback(PositionError error); +</pre> + +<p>O <code>PositionError</code> tem a seguinte estrutura de campos:</p> + +<dl> + <dt>code</dt> + <dd>Um código de erro numérico dos seguintes procedimentos:</dd> + <dt><dfn><code>UNKNOWN_ERROR</code></dfn> (valor numérico 0)</dt> + <dd>O processo de aquisição de localização falhou devido a um erro de qualquer outro código nesta interface.</dd> + <dt><dfn><code>PERMISSION_DENIED</code></dfn> (valor numérico 1)</dt> + <dd>O processo de aquisição da localização falhou porque a origem aplicativo não tem permissão para usar a API de Geolocalização.</dd> + <dt><dfn><code>POSITION_UNAVAILABLE</code></dfn> (valor numérico 2)</dt> + <dd>A posição do dispositivo não pôde ser determinada. Um ou mais provedores de localização utilizados no processo de aquisição local gerou um erro interno que falou o processo completamente.</dd> + <dt><dfn><code>TIMEOUT</code></dfn> (numeric value 3)</dt> + <dd>O comprimento máximo de tempo especificado.</dd> + <dt>message</dt> + <dd>Uma mensagem de erro legível para uso em registros e depuração, mas não para exibir para o usuário.</dd> +</dl> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Suporte Básico</th> + <th><a class="external" href="http://dev.w3.org/geo/api/spec-source-v2.html">Geolocation Level 2</a></th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>IE9 RC</td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>3.5</strong> (1.9.1)</td> + <td>---</td> + </tr> + <tr> + <td>Opera</td> + <td><strong>10.60</strong></td> + <td>---</td> + </tr> + <tr> + <td>Safari | Chrome | WebKit</td> + <td>5 | 5 | 533</td> + <td>---</td> + </tr> + </tbody> +</table> + +<h2 id="Solicitando_permissão">Solicitando permissão</h2> + +<p>Qualquer add-on hospedado em addons.mozilla.org, que faz uso de dados de geolocalização, deve solicitar antes uma permissão. A função a seguir vai solicitar a permissão de um modo semelhante ao prompt. A resposta do usuário será salva no parâmetro <code>pref</code>. A função fornecida no parâmetro de <code>callback</code> será chamado com um valor booleano que indica a resposta do usuário. Se for <code>true</code>, o add-on poderá retornar dados de geolocalização.</p> + +<pre class="brush: js">function prompt(window, pref, message, callback) { + let branch = Components.classes["@mozilla.org/preferences-service;1"] + .getService(Components.interfaces.nsIPrefBranch); + + if (branch.getPrefType(pref) === branch.PREF_STRING) { + switch (branch.getCharPref(pref)) { + case "always": + return callback(true); + case "never": + return callback(false); + } + } + + let done = false; + + function remember(value, result) { + return function() { + done = true; + branch.setCharPref(pref, value); + callback(result); + } + } + + let self = window.PopupNotifications.show( + window.gBrowser.selectedBrowser, + "geolocation", + message, + "geo-notification-icon", + { + label: "Share Location", + accessKey: "S", + callback: function(notification) { + done = true; + callback(true); + } + }, [ + { + label: "Always Share", + accessKey: "A", + callback: remember("always", true) + }, + { + label: "Never Share", + accessKey: "N", + callback: remember("never", false) + } + ], { + eventCallback: function(event) { + if (event === "dismissed") { + if (!done) callback(false); + done = true; + window.PopupNotifications.remove(self); + } + }, + persistWhileVisible: true + }); +} + +prompt(window, + "extensions.foo-addon.allowGeolocation", + "Foo Add-on wants to know your location.", + function callback(allowed) { alert(allowed); }); +</pre> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ Interface("nsIGeolocationProvider") }}</li> + <li>{{ Interface("nsIDOMGeolocation") }}</li> + <li>{{ Interface("nsIDOMGeoPosition") }}</li> + <li>{{ Interface("nsIDOMGeoPositionCallback") }}</li> + <li>{{ Interface("nsIDOMGeoPositionError") }}</li> + <li>{{ Interface("nsIDOMGeoPositionErrorCallback") }}</li> + <li>{{ Interface("nsIDOMGeoPositionOptions") }}</li> + <li>{{ Interface("nsIDOMNavigatorGeolocation") }}</li> + <li><a class="external" href="http://dev.w3.org/geo/api/spec-source.html" title="http://dev.w3.org/geo/api/spec-source.html">Geolocation API on w3.org</a></li> + <li><a href="/en-US/demos/tag/tech:geolocation" title="en-US/demos/tag/tech:geolocation/">Demos about the Geolocation API</a></li> +</ul> + +<div>{{ HTML5ArticleTOC() }}</div> diff --git a/files/pt-br/web/api/history_api/exemplo/index.html b/files/pt-br/web/api/history_api/example/index.html index a4dfc4b68f..a4dfc4b68f 100644 --- a/files/pt-br/web/api/history_api/exemplo/index.html +++ b/files/pt-br/web/api/history_api/example/index.html diff --git a/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html new file mode 100644 index 0000000000..13609ee260 --- /dev/null +++ b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html @@ -0,0 +1,91 @@ +--- +title: Arrastar e soltar arquivos +slug: DragDrop/Drag_and_Drop/Arrastar_e_soltar_arquivos +translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop +--- +<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p> + +<p>As interfaces HTML Drag and Drop permitem que os aplicativos da Web arrastem e soltem arquivos em uma página da Web. Este documento descreve como um aplicativo pode aceitar um ou mais arquivos que são arrastados do <em>gerenciador de arquivos da plataforma subjacente</em> e soltado s em uma página da Web.</p> + +<p>Os principais passos para o drag and drop é definir a <em>drop zone</em> (ou seja definir um elemento para a queda dos arquivos) e definir event handlers para os eventos {{event("drop")}} e {{event("dragover")}} . Essas etapas são descritas abaixo, incluindo exemplos de trechos de código. O codigo fonte esta disponivel em <a href="https://github.com/mdn/dom-examples/tree/master/drag-and-drop">MDN's drag-and-drop repository</a> (pull requests e/ou issues são bem-vindas).</p> + +<p class="note">Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}}Define duas APIs diferentes para suportar arrastar e soltar arquivos. Uma API é a interface {{domxref("DataTransfer")}} e a segunda API é a interface {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}. Este exemplo ilustra o uso de ambas as APIs (e não usa nehuma interface específica do Gecko).</p> + +<h2 id="Definindo_a_drop_zone">Definindo a drop <em>zone</em></h2> + +<p>O elemento de destino do evento {{event("drop")}} precisa de um event handler global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} O seguinte trecho de código mostra como isso é feito com um elemento: {{HTMLelement("div")}}</p> + +<pre class="brush: html"><div id="drop_zone" ondrop="dropHandler(event);"> + <p>Drag one or more files to this Drop Zone ...</p> +</div></pre> + +<p>Normalmente, um aplicativo inclui um event handler {{event("dragover")}} no elemento de destino do drop e esse manipulador desativará o comportamento de arraste padrão do navegador. Para adicionar esse handler, você precisa incluir um event handler global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:</p> + +<pre class="brush: html"><div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> + <p>Drag one or more files to this Drop Zone ...</p> +</div> +</pre> + +<p>Por fim, um aplicativo pode querer estilizar o elemento da drop zone para indicar visualmente que o elemento é uma drop zone. Neste exemplo, o elemento da drop zone usa o seguinte estilo:</p> + +<pre class="brush: css">#drop_zone { + border: 5px solid blue; + width: 200px; + height: 100px; +} +</pre> + +<div class="note"> +<p>Nota: Observe que os eventos <code>dragstart</code> e <code>dragend</code> não são acionados ao arrastar um arquivo para o navegador do OS.</p> +</div> + +<h2 id="Processo_de_drop">Processo de drop</h2> + +<p>O evento {{event("drop")}} é acionado quando o usuário solta o(s) arquivo(s) no drop handler, se o navegador suportar a interface {{domxref("DataTransferItemList")}} o metodo {{domxref("DataTransferItem.getAsFile","getAsFile()")}} será usado para acessar cada arquivo; caso contrário, a interface {{domxref("DataTransfer")}} usara a propriedade {{domxref("DataTransfer.files","files")}} para acessar cada arquivo.</p> + +<p>Este exemplo mostra como escrever o nome de cada arquivo arrastado, no console. Em um aplicativo real, um aplicativo pode querer processar um arquivo usando o {{domxref("File","File API")}}.</p> + +<p>Observe que neste exemplo, Qualquer item de arrasto que não seja um arquivo é ignorado.</p> + +<pre class="brush: js">function dropHandler(ev) { + console.log('File(s) dropped'); + + // Impedir o comportamento padrão (impedir que o arquivo seja aberto) + ev.preventDefault(); + + if (ev.dataTransfer.items) { + // Use a interface DataTransferItemList para acessar o (s) arquivo (s) + for (var i = 0; i < ev.dataTransfer.items.length; i++) { + // Se os itens soltos não forem arquivos, rejeite-os + if (ev.dataTransfer.items[i].kind === 'file') { + var file = ev.dataTransfer.items[i].getAsFile(); + console.log('... file[' + i + '].name = ' + file.name); + } + } + } else { + // Use a interface DataTransfer para acessar o (s) arquivo (s) + for (var i = 0; i < ev.dataTransfer.files.length; i++) { + console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name); + } + } +}</pre> + +<h2 id="Impedir_o_evento_de_arrastar_padrão_do_navegador">Impedir o evento de arrastar padrão do navegador</h2> + +<p>O seguinte event handler {{event("dragover")}} chama {{domxref("Event.preventDefault","preventDefault()")}} para desativar o manipulador padrão de arrastar e soltar do navegador.</p> + +<pre class="brush: js">function dragOverHandler(ev) { + console.log('File(s) in drop zone'); + + // Impedir o comportamento padrão (impedir que o arquivo seja aberto) + ev.preventDefault(); +} +</pre> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a></li> + <li><a class="internal" href="/Web/Guide/HTML/Drag_operations" title="Drag Operations">Drag Operations</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li> +</ul> diff --git a/files/pt-br/web/api/html_drag_and_drop_api/index.html b/files/pt-br/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..10e5592b91 --- /dev/null +++ b/files/pt-br/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,258 @@ +--- +title: Arrastar e soltar +slug: DragDrop/Drag_and_Drop +tags: + - Avançado + - Guia(2) + - HTML5 + - Visão Geral + - XUL + - arrastar e soltar + - eventos +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p> + +<p>As interfaces de Drag and Drop (arrastar e soltar) habilitam aplicações a usar funcionalidades de arrastar e soltar através do navegador. Por exemplo, com essas funcionalidades, o usuário pode selecionar elementos arrastáveis (<em>draggable</em>) com o mouse, arrastar elementos até um elemento soltável (<em>droppable</em>), e soltar o elemento ao soltar o botão do mouse. Uma representação translúcida de elementos arrastáveis (<em>draggable)</em> seguem o ponteiro do mouse durante a operação de arrastar (drag).</p> + +<p>Para web sites, extensões e aplicações XUL, você pode customizar os tipos de elementos que podem se tornar arrastáveis (draggable) e o tipo de retorno que o elemento arrastável produz, assim como os elementos soltáveis (droppable).</p> + +<p><strong>NT: </strong>Para manter a tradução mais precisa e coesa, a partir daqui iremos manter os termos <em>drag</em> e <em>drop</em> e seus variantes conforme texto original. Sendo portanto mantidos também os termos <em>draggable</em> e <em>droppable</em>.</p> + +<p>Este documento é uma visão geral do drag and drop no HTML. Ele inclui uma descrição de suas interfaces, funcionalidades básicas de como permitir a adesão de funcionalidades arrastar e soltar em uma aplicação e um sumário da interoperabilidade entre interfaces.</p> + +<h2 id="Eventos_Drag">Eventos Drag</h2> + +<p>O drag and drop em HTML usa o {{domxref("Event","modelo de eventos DOM")}} e os <em>{{domxref("DragEvent","eventos drag")}}</em> são hereditários dos {{domxref("MouseEvent","eventos do mouse")}}. Uma operação típica de drag começa quando o usuário seleciona um elemento arrastável com o mouse, move o mouse até um elemento soltável (droppable) e solta o mouse. Durante as operações, diversos tipos de evento são acionados e alguns podem até ser acionados multiplas vezes (como por exemplo os tipos de evento {{event("drag")}} e {{event("dragover")}}.</p> + +<p>Todos os <a href="/en-US/docs/Web/API/DragEvent#Event_types">tipos de evento drag</a> são associados a um <a href="/en-US/docs/Web/API/DragEvent#GlobalEventHandlers">manipulador global de eventos</a>. Cada tipo de evento drag e cada atributo drag global tem um documento de referência que o descreve. A tabela a seguir descreve brevemente os tipos de evento e um link de referência para seu documento.</p> + +<table> + <tbody> + <tr> + <th scope="col">Event</th> + <th scope="col">On Event Handler</th> + <th scope="col">Description</th> + </tr> + <tr> + <td>{{event('drag')}}</td> + <td>{{domxref('GlobalEventHandlers.ondrag','ondrag')}}</td> + <td>Acionado quando um elemento ou seleção de texto está sendo arrastado.</td> + </tr> + <tr> + <td>{{event('dragend')}}</td> + <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td> + <td>Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). (Veja <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Terminando um evento Drag</a>.)</td> + </tr> + <tr> + <td>{{event('dragenter')}}</td> + <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td> + <td>Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). (Veja <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Determinando Drop Targets</a>.)</td> + </tr> + <tr> + <td>{{event('dragexit')}}</td> + <td>{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}</td> + <td>Acionado quando um elemento não é mais o ponto de seleção imediata da operação drag.</td> + </tr> + <tr> + <td>{{event('dragleave')}}</td> + <td>{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}</td> + <td>Acionado quando um elemento arrastável ou seleção de texto abandona um ponto de soltura (drop target) válido.</td> + </tr> + <tr> + <td>{{event('dragover')}}</td> + <td>{{domxref('GlobalEventHandlers.ondragover','ondragover')}}</td> + <td>Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos).</td> + </tr> + <tr> + <td>{{event('dragstart')}}</td> + <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td> + <td>Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. (Veja <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Começando uma Operação Drag</a>.)</td> + </tr> + <tr> + <td>{{event('drop')}}</td> + <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td> + <td>Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. (Veja <a href="/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Realizando um Drop</a>.)</td> + </tr> + </tbody> +</table> + +<p>Note que eventos <code>dragstart</code> e <code>dragend</code> não são acionados ao arrastar um arquivo vindo do sistema operacional para o navegador.</p> + +<h2 id="Interfaces">Interfaces</h2> + +<p>A interface HTML drag and drop é composta pelos eventos {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}.</p> + +<p>A interface {{domxref("DragEvent")}} consiste de um construtor e uma propriedade, a propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que é um objeto {{domxref("DataTransfer")}}. Os objetos {{domxref("DataTransfer")}} incluem estados do evento drag como o tipo de drag sendo feito (por exemplo <code>copy</code> ou <code>move</code>), os dados do do evento drag (um ou mais itens) e o tipo de cada <em>item drag</em> (um MIME type). Objetos {{domxref("DataTransfer")}} também contém métodos para adicionar itens aos dados do drag e remover um item. As interfaces {{domxref("DragEvent")}} e {{domxref("DataTransfer")}} devem as únicas necessárias para adicionar capacidades de drag and drop para uma aplicação. Entretanto, note que o Firefox provê suporte para apenas algumas {{anch("Gecko specific interfaces","Gecko-specific extensions")}} ao objeto {{domxref("DataTransfer")}}, apesar de entretanto essas extensões funcionarem apenas no Firefox.</p> + +<p>Cada objeto {{domxref("DataTransfer")}} contém uma propriedade {{domxref("DataTransfer.items","items")}} que é uma {{domxref("DataTransferItemList","lista")}} dos objetos {{domxref("DataTransferItem")}}. Cada objeto {{domxref("DataTransferItem")}} representa um único <em>drag item</em> e cada item tem uma propriedade {{domxref("DataTransferItem.kind","kind (tipo)")}} que é o <em>tipo(kind)</em> de data (seja ela <code>string</code> ou <code>file</code>) e uma propriedade {{domxref("DataTransferItem.type","type (tipo)")}} que é o tipo de dado do item (ou seja, MIME type). O objeto {{domxref("DataTransferItem")}} também contém métodos para conseguir dados do item arrastável.</p> + +<p>O objeto {{domxref("DataTransferItemList")}} é uma lista de objetos {{domxref("DataTransferItem")}}. A lista de objetos contém métodos para: adicionar um item para uma lista, remover um item de uma lista e limpar a lista com todos os itens.</p> + +<p>A diferença chave entre das interfaces {{domxref("DataTransfer")}} e {{domxref("DataTransferItem")}} é que a primeira usa o método síncrono {{domxref("DataTransfer.getData","getData()")}} para acessar os dados de um item arrastável, e a segunda usa o método assíncrono {{domxref("DataTransferItem.getAsString","getAsString()")}} para acessá-lo.</p> + +<p>Note: as interfaces {{domxref("DragEvent")}} e a {{domxref("DataTransfer")}} são vastamente interoperáveis com navegadores desktop. Entretanto, as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}} tem suporte limitado entre navegadores. Veja {{anch("Interoperabildade")}} para mais informações.</p> + +<h3 id="Interfaces_específicas_para_o_Gecko">Interfaces específicas para o Gecko</h3> + +<p>A Mozilla e o Firefox suportam algumas funcionalidades fora dos padrões do modelo drag and drop. Elas são <em>cfunções convenientes</em> para facilitar o arraste múltiplo de elementos e a manipulação de dados que não são strings (como arquivos). Para mais informações, veja <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>. Para mais informações, veja a página de referência {{domxref("DataTransfer")}} para todas as <a href="/en-US/docs/Web/API/DataTransfer#Gecko_properties">propriedades específicas para o Gecko</a> e <a href="/en-US/docs/Web/API/DataTransfer#Gecko_methods">Métodos específicos para o Gecko</a>.</p> + +<h2 id="O_básico">O básico</h2> + +<p>Esta seção dispõe de um resumo das etapas básicas para adicionar a funcionalidade drag and drop à uma aplicação. Cada seção inclui uma descrição da etapa, um breve exemplo em código, e links para informações adicionais.</p> + +<h3 id="Identificando_o_que_é_arrastável_draggable">Identificando o que é arrastável <em>(draggable)</em></h3> + +<p>Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo {{htmlattrxref("draggable")}} além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir</p> + +<pre>function dragstart_handler(ev) { + console.log("dragStart"); + // Adiciona o id do elemento em questão ao objeto de transferência de dados (dataTransfer) + ev.dataTransfer.setData("text/plain", ev.target.id); +} + +<body> + <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p> +</body> +</pre> + +<p>Veja a <a href="/en-US/docs/Web/HTML/Global_attributes/draggable" title="draggable global attribute">referência do atributo draggable</a> e o <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute">Guia de operações drag</a> para mais informações.</p> + +<h3 id="Defina_os_dados_do_drag">Defina os dados do drag</h3> + +<p>A aplicação é livre para incluir qualquer quantidade de dados do item em uma operação drag. Cada dado de um item é uma {{domxref("DOMString","string")}} de um tipo particular, tipicamente um MIME type como por exemplo <code>text/html</code>.</p> + +<p>Cada {{domxref("DragEvent","evento drag")}} tem uma propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que <em>segura</em> os dados do evento. Essa propridade (que é um objeto {{domxref("DataTransfer")}}) também tem um método para <em>gerenciar</em> os dados do arraste (drag). O método {{domxref("DataTransfer.setData","setData()")}} é usado para adicionar um item aos dados do arraste, como demonstrado no exemplo a seguir.</p> + +<pre>function dragstart_handler(ev) { + // Adiciona os dados do arraste (drag) + ev.dataTransfer.setData("text/plain", ev.target.id); + ev.dataTransfer.setData("text/html", "<p>Parágrafo de exemplo</p>"); + ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org"); +} +</pre> + +<p>Para uma lista de tipos de dados mais comuns utilizados pelo drag and drop (como texto, HTML, links, e files), veja <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Tipos recomendados de Drag Types</a> e para mais informações sobre os dados do arraste (drag data), veja <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</p> + +<h3 id="Defina_uma_imagem_de_arraste_drag_image">Defina uma imagem de arraste (drag image)</h3> + +<p>Por padrão, o navegador provê uma imagem que aparece por trás do ponteiro do mouse durante uma operação de arraste. Entretanto, uma aplicação pode definir uma imagem customizada utilizando o método {{domxref("DataTransfer.setDragImage","setDragImage()")}} como demonstrado no exemplo a seguir.</p> + +<pre>function dragstart_handler(ev) { + // Cria uma imagem e então a utiliza como a "drag image". + // NOTA: mude "example.gif" como uma imagem existente, caso contrário + // ela não será criada e a imagem padrão será utilizada como padrão. + var img = new Image(); + img.src = 'example.gif'; + ev.dataTransfer.setDragImage(img, 10, 10); +} +</pre> + +<p>Para aprender mais sobre arrastar imagens de retorno, veja <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Definindo a imagem de retorno do arraste (Drag)</a>.</p> + +<h3 id="Defina_o_efeito_do_arraste_Drag_effect">Defina o <em>efeito</em> do arraste (<em>Drag effect</em>)</h3> + +<p>A propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} é usada para controlar o retorno (geralmente visual) que é dado ao usuário durante uma operação drag and drop. Ela afeta qual cursor o navegador irá mostrar enquanto o arraste é realizado. Por exemplo, quando o usuário passa sobre (famoso <em>hover</em>) o ponto de soltura (drop target), o cursor do navegador pode indicar o tipo de operação que irá acontecer.</p> + +<p>Três efeitos podem ser definidos: </p> + +<p><code>copy</code> indica que os dados sendo arrastados podem ser copiados da localização atual para a localização de destino (localização do <em>drop</em>). </p> + +<p><code>move</code> indica que os dados sendo arrastados irá ser movido.</p> + +<p><code>link</code> indica que alguma forma de relação ou conexão será criada entre a localização de origem (source) e de destino (drop). </p> + +<p>Durante a operação de arraste, os efeitos do arraste (drag) podem ser modificados para determinar que certos efeitos são permitidos em determinadas localizações. Se permitido, uma soltura (drop) pode ocorrer naquela localização.</p> + +<p>O exemplo a seguir mostra como utilizar essa propriedade.</p> + +<pre>function dragstart_handler(ev) { + // Determina o efeito de arraste para copy + ev.dataTransfer.dropEffect = "copy"; +} +</pre> + +<p>Veja <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Efeitos do Arraste (Drag Effects)</a> para mais detalhes.</p> + +<h3 id="Defina_uma_zona_de_soltura_drop_zone">Defina uma zona de soltura <em>(drop zone)</em></h3> + +<p>Por padrão, o navegador previne tudo que possa acontecer ao soltar alguma coisa em um elemento HTML. Para mudar esse comportamento de forma que um elemento se torne uma zona de soltura (d<em>rop zone)</em> ou que seja soltável <em>(droppable)</em>, o elemento precisa ter ambos os atributos {{domxref("GlobalEventHandlers.ondragover","ondragover")}} e {{domxref("GlobalEventHandlers.ondrop","ondrop")}}. O exemplo a seguir mostra como utilizar esses atributos e inclui manipuladores básicos de evento para cada um.</p> + +<pre>function dragover_handler(ev) { + ev.preventDefault(); + // Define o dropEffect para ser do tipo move + ev.dataTransfer.dropEffect = "move" +} +function drop_handler(ev) { + ev.preventDefault(); + // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo + var data = ev.dataTransfer.getData("text"); + ev.target.appendChild(document.getElementById(data)); +} +<body> + <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div> +</body> +</pre> + +<p>Note que cada manipulador chama {{domxref("Event.preventDefault","preventDefault()")}} para previnir o processamento adicional de eventos (como eventos touch ou eventos pointer).</p> + +<p>Para mais informações, veja <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Especificando pontos de soltura (Drop Targets)</a>.</p> + +<h3 id="Manipulando_o_efeito_de_soltura_drop">Manipulando o <em>efeito</em> de soltura (drop)</h3> + +<p>O manipulador do evento {{event("drop")}} é livre para processar os dados do arraste (drag) de maneira específica em uma aplicação. Tipicamente, uma aplicação usaria o método {{domxref("DataTransfer.getData","getData()")}} para reter os itens arrastados e processá-los de acordo. A semântica da aplicação pode ser diferente dependendo do valor do {{domxref("DataTransfer.dropEffect","dropEffect")}} e/ou o estado da chave que o modifica.</p> + +<p>O exemplo a seguir mostra o manipulador de soltura (drop handler) pegando o id do elemento de origem atráves dos dados de drag (drag data) e então usando o id para mover o elemento de sua origem para o elemento de soltura (drop element).</p> + +<pre>function dragstart_handler(ev) { + // Adiciona o id do elemento alvo para o objeto de transferência de dados + ev.dataTransfer.setData("text/plain", ev.target.id); + ev.dropEffect = "move"; +} +function dragover_handler(ev) { + ev.preventDefault(); + // Define o dropEffect para ser do tipo move + ev.dataTransfer.dropEffect = "move" +} +function drop_handler(ev) { + ev.preventDefault(); + // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo + var data = ev.dataTransfer.getData("text"); + ev.target.appendChild(document.getElementById(data)); +} +<body> + <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p> + <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div> +</body> +</pre> + +<p>Para mais informações, veja <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Realizando uma soltura (Drop)</a>.</p> + +<h3 id="Fim_da_soltura_Drag_end">Fim da soltura (Drag end)</h3> + +<p>No início da operação de arraste (drag), o evento {{event("dragend")}} é acionado no elemento de origem (<em>source)</em> - o elemento que foi o alvo do início do arraste (drag start). Este evento é acionado sempre quando o arraste é completado ou cancelado. O manipulador de eventos {{event("dragend")}} pode verificar o valor da propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} para determinar se a operação de arraste foi bem sucedida ou não.</p> + +<p>Para mais informações sobre manipular o final de uma operação de arraste, veja <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finalizando um arraste (Drag)</a>.</p> + +<h2 id="Interoperabilidade">Interoperabilidade</h2> + +<p>Como podem ser visto no <a href="/en-US/docs/Web/API/DataTransferItem#Browser_compatibility">DataTransferItem interface's Browser Compatibility table</a>, drag-and-drop a interoperabilidade é relativamente ampla emtre ps brpwsers desktop (exceto as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}} que tem o menor suport). Estes dados tambem indica que o suporte ao drag and drop entre browser mobile é muito menor.</p> + +<h2 id="Examples_and_demos" name="Examples_and_demos">Exemplos e demonstrações</h2> + +<ul> + <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copiando e movendo elementos com a interface <code>DataTransfer</code></a></li> + <li><a href="http://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html">Copiando e movendo elementos com a interface <code>DataTransferListItem</code></a></li> + <li>Arrastando e soltando arquivos; Apenas para o Firefox: <a href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li> + <li>Arrastando e soltando arquivos; Todos os navegadores: <a href="https://jsbin.com/hiqasek/edit?html,js,output" title="https://jsbin.com/hiqasek">https://jsbin.com/hiqasek/</a></li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations" title="Drag Operations">Operações de Arraste</a></li> + <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Arrastando e Soltando múltiplos elementos</a></li> + <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" title="Recommended Drag Types">Tipos re arraste (Drag Types) recomendados</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li> + <li><a href="http://caniuse.com/#search=draganddrop" title="Drag and Drop interoperability data from CanIUse">Dados de unteroperabilidade Drag and Drop de acordo com o CanIUse</a></li> +</ul> diff --git a/files/pt-br/web/api/htmlcontentelement/seletor/index.html b/files/pt-br/web/api/htmlcontentelement/select/index.html index 63fae05c69..63fae05c69 100644 --- a/files/pt-br/web/api/htmlcontentelement/seletor/index.html +++ b/files/pt-br/web/api/htmlcontentelement/select/index.html diff --git a/files/pt-br/web/api/element/accesskey/index.html b/files/pt-br/web/api/htmlelement/accesskey/index.html index e0425e3645..e0425e3645 100644 --- a/files/pt-br/web/api/element/accesskey/index.html +++ b/files/pt-br/web/api/htmlelement/accesskey/index.html diff --git a/files/pt-br/web/api/node/innertext/index.html b/files/pt-br/web/api/htmlelement/innertext/index.html index 1ab5e81027..1ab5e81027 100644 --- a/files/pt-br/web/api/node/innertext/index.html +++ b/files/pt-br/web/api/htmlelement/innertext/index.html diff --git a/files/pt-br/web/api/htmlelement/input_event/index.html b/files/pt-br/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..dd69baf988 --- /dev/null +++ b/files/pt-br/web/api/htmlelement/input_event/index.html @@ -0,0 +1,248 @@ +--- +title: input +slug: Web/Events/input +translation_of: Web/API/HTMLElement/input_event +--- +<p>O evento <code>input do </code>DOM é disparado sincronicamente quando o valor de um elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} é alterado. (Para elementos input com <code>type=checkbox</code> ou <code>type=radio</code>, o evento <code>input</code> não é disparado quando o usuário clica no elemento, porque o valor do atributo não é alterado.) Além disso, o evento é disparado no <a href="/en-US/docs/Web/API/HTMLElement/contentEditable"><code>contenteditable</code></a> editors quando o seu conteúdo é alterado. Nesse caso, O alvo do evento é o elemento host da edição. Se houver dois ou mais elementos que tenha <code>contenteditable</code> como true, o "host de edição" é o elemento antepassado mais próximo cujo pai não é editável. Similarmente, ele também é disparado no element raiz do <a href="/en-US/docs/Web/API/Document/designMode"><code>designMode</code></a> editors.</p> + +<h2 id="Informações_gerais">Informações gerais</h2> + +<dl> + <dt>Specification</dt> + <dd><a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#event-input-input">HTML5</a>, <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input">DOM Level 3 Events</a></dd> + <dt>Interface</dt> + <dd>{{domxref("Event")}}, {{domxref("InputEvent")}}</dd> + <dt>Bubbles</dt> + <dd>Yes</dd> + <dt>Cancelable</dt> + <dd>No</dd> + <dt>Target</dt> + <dd>Element</dd> + <dt>Default Action</dt> + <dd>The value or the content is modified.</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>9<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>immediately after <code>compositionupdate</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("12")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>on <code>contenteditable</code> element</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatNo}}<sup>[4]</sup> + <p> </p> + </td> + <td>15</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>when <code>designMode</code> is "on"</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>isComposing</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("31")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><select></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>immediately after <code>compositionupdate</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("12")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>on <code>contenteditable</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>when <code>designMode</code> is "on"</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>isComposing</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("31")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><select></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko didn't fire input events while composition was ongoing using IMEs or when dead keys were used on Mac OS X.</p> + +<p>[2] IE 9 does not fire an input event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).</p> + +<p>[3] Prior to Opera 15, Opera did not fire an input event after dropping text in an input field.</p> + +<p>[4] The event target is the innermost element at the caret position.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> +</ul> + +<p>Also the <code><a href="/en-US/docs/Web/Reference/Events/change">change</a></code> event is related. <code>change</code> fires less often than <code>input</code> – it only fires when the changes are committed by the user.</p> diff --git a/files/pt-br/web/api/htmlmediaelement/abort_event/index.html b/files/pt-br/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..62243a2762 --- /dev/null +++ b/files/pt-br/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,70 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +<p>O evento <strong><code>abort</code></strong> é disparado quando o carregamento de um recurso foi interrompido.</p> + +<h2 id="Informações_Gerais">Informações Gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} se gerado a partir da interface do usuário, caso contrário será {{domxref("Event")}}.</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<div> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propriedade</th> + <th scope="col">Tipo</th> + <th scope="col">Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readOnlyInline}}</td> + <td><code>{{domxref("EventTarget")}}</code></td> + <td>O evento alvo (O mais elevado da árvore DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readOnlyInline}}</td> + <td><code>{{domxref("DOMString")}}</code></td> + <td>O tipo de evento.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readOnlyInline}}</td> + <td><code>{{domxref("Boolean")}}</code></td> + <td>O evento é normalmente <em>bubble</em>?</td> + </tr> + <tr> + <td><code>cancelable</code> {{readOnlyInline}}</td> + <td><code>{{domxref("Boolean")}}</code></td> + <td>É possível cancelar o evento?</td> + </tr> + <tr> + <td><code>view</code> {{readOnlyInline}}</td> + <td><code>{{domxref("WindowProxy")}}</code></td> + <td><code>{{domxref("document.defaultView")}} </code>(<code>window</code> do documento)</td> + </tr> + <tr> + <td><code>detail</code> {{readOnlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/api/htmlelement/blur/index.html b/files/pt-br/web/api/htmlorforeignelement/blur/index.html index 25a2273aec..25a2273aec 100644 --- a/files/pt-br/web/api/htmlelement/blur/index.html +++ b/files/pt-br/web/api/htmlorforeignelement/blur/index.html diff --git a/files/pt-br/web/api/htmlelement/dataset/index.html b/files/pt-br/web/api/htmlorforeignelement/dataset/index.html index 2cb4ba63b0..2cb4ba63b0 100644 --- a/files/pt-br/web/api/htmlelement/dataset/index.html +++ b/files/pt-br/web/api/htmlorforeignelement/dataset/index.html diff --git a/files/pt-br/web/api/htmlelement/focus/index.html b/files/pt-br/web/api/htmlorforeignelement/focus/index.html index 8f798b3d86..8f798b3d86 100644 --- a/files/pt-br/web/api/htmlelement/focus/index.html +++ b/files/pt-br/web/api/htmlorforeignelement/focus/index.html diff --git a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html b/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html index da14879b31..da14879b31 100644 --- a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html +++ b/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html diff --git a/files/pt-br/web/api/network_information_api/index.html b/files/pt-br/web/api/network_information_api/index.html new file mode 100644 index 0000000000..032fc54169 --- /dev/null +++ b/files/pt-br/web/api/network_information_api/index.html @@ -0,0 +1,56 @@ +--- +title: Network Information API +slug: WebAPI/Network_Information +translation_of: Web/API/Network_Information_API +--- +<p>{{ SeeCompatTable() }}</p> + +<p>A API de Informações de Rede fornece informação sobre a conexão do sistema, assim como a banda atual do dispositivo do usuário ou qualquer conexão que seja medida. Essa pode também ser usada para selecionar conteúdo de alta ou baixa definição baseado na conexão do usuário. Toda a API consiste na adição da interface domxref("Connection") e uma única propriedade a interface {{domxref("Navigator")}}: {{domxref("Navigator.connection")}}.</p> + +<h2 id="Detectando_mudanças_de_conexão">Detectando mudanças de conexão</h2> + +<p>Este é um exemplo vê mudança na conexão do usuário. Essa é similar a como uma app pode alertar quando o usuário move de uma conexão de alto para baixo custo por exemplo, a fim de reduzir a demanda da banda para previnir que o usuário seja submetido a cargos substanciais.</p> + +<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; + +function updateConnectionStatus() { + alert("Connection bandwidth: " + connection.bandwidth + " MB/s"); + if (connection.metered) { + alert("The connection is metered!"); + } +} + +connection.addEventListener("change", updateConnectionStatus); +updateConnectionStatus(); +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Network Information', '', 'Network Information API') }}</td> + <td>{{ Spec2('Network Information') }}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2> + +<p>{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li> + <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></li> + <li>{{domxref("window.navigator.connection")}}</li> +</ul> diff --git a/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html b/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html deleted file mode 100644 index a05abeae88..0000000000 --- a/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Entendendo o uso do método appendChild em javascript -slug: Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript ---- -<div>{{ApiRef("DOM")}}</div> - -<h2 id="Summary" name="Summary">Resumo</h2> - -<p>Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.</p> - -<h2 id="Syntax" name="Syntax">Sintaxe</h2> - -<pre class="syntaxbox">var filho = <em>elemento</em>.appendChild(<em>filho</em>);</pre> - -<ul> - <li><code>elemento</code> é o <a href="/pt-BR/docs/DOM/element" title="/en-US/docs/DOM/element">elemento</a> pai.</li> - <li><code>filho</code> é o nó a ser adicionado como filho de <code>elemento</code>. Também é devolvido.</li> -</ul> - -<h2 id="Descrição">Descrição</h2> - -<p>O método <code>appendChild</code> devolve uma referência ao nó adicionado.</p> - -<h2 id="Example" name="Example">Exemplo</h2> - -<pre class="brush:js">// Cria um novo elemento de parágrafo e adiciona-o ao final do documento -var p = document.createElement("p"); -document.body.appendChild(p);</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>Se <code>filho</code> é uma referência a um nó existente no documento, <code>appendChild</code> vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).</p> - -<p>Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, <em>só então</em>, ser adicionado na nova posição.</p> - -<p>Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método <code>cloneNode</code> <strong>não </strong>serão mantidas sincronizadas automaticamente)</p> - -<p>Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.</p> - -<p><code>appendChild()</code> é um dos métodos fundamentais da programação para a web usando o DOM. O método <code>appendChild()</code> insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.</p> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li> -</ul> - -<h2 id="See_also" name="See_also">Ver também</h2> - -<ul> - <li>{{domxref("Node.removeChild")}}</li> - <li>{{domxref("Node.replaceChild")}}</li> - <li>{{domxref("Node.insertBefore")}}</li> - <li>{{domxref("Node.hasChildNodes")}}</li> -</ul> diff --git a/files/pt-br/web/api/notificacoes/index.html b/files/pt-br/web/api/notification/index.html index 9103aac190..9103aac190 100644 --- a/files/pt-br/web/api/notificacoes/index.html +++ b/files/pt-br/web/api/notification/index.html diff --git a/files/pt-br/web/api/api_de_desempenho/index.html b/files/pt-br/web/api/performance_api/index.html index 1b6997e293..1b6997e293 100644 --- a/files/pt-br/web/api/api_de_desempenho/index.html +++ b/files/pt-br/web/api/performance_api/index.html diff --git a/files/pt-br/web/api/api_push/best_practices/index.html b/files/pt-br/web/api/push_api/best_practices/index.html index 9b0fafd2b7..9b0fafd2b7 100644 --- a/files/pt-br/web/api/api_push/best_practices/index.html +++ b/files/pt-br/web/api/push_api/best_practices/index.html diff --git a/files/pt-br/web/api/api_push/index.html b/files/pt-br/web/api/push_api/index.html index 563b711cd8..563b711cd8 100644 --- a/files/pt-br/web/api/api_push/index.html +++ b/files/pt-br/web/api/push_api/index.html diff --git a/files/pt-br/web/api/randomsource/index.html b/files/pt-br/web/api/randomsource/index.html deleted file mode 100644 index e0dbd0a970..0000000000 --- a/files/pt-br/web/api/randomsource/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -tags: - - API - - Interface - - RandomSource - - Referencia - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> representa uma fonte criptografada segura de números aleatórios. É disponível via objeto {{domxref("Crypto")}} do objeto global: {{domxref("Window.crypto")}} em páginas Web, {{domxref("WorkerGlobalScope.crypto")}} em trabalhadores.</p> - -<p><code>RandomSource</code> não é uma interface e nenhum objeto deste tipo pode ser criado.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em><code>RandomSource</code> não define ou herda nenhuma propriedade.</em></p> - -<dl> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>Completa o {{ domxref("ArrayBufferView") }} com valores aleatoriamente criptografados.</dd> -</dl> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Apesar da <code>RandomSource</code> estar disponível apenas a partir da versão Firefox 26, ela já estava implementada na versão Firefox 21.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{ domxref("Window.crypto") }} para conseguir um objeto {{domxref("Crypto")}}.</li> - <li>{{jsxref("Math.random")}}, uma fonte de números aleatórios não criptografados.</li> -</ul> diff --git a/files/pt-br/web/api/seleção/index.html b/files/pt-br/web/api/selection/index.html index 9cac677942..9cac677942 100644 --- a/files/pt-br/web/api/seleção/index.html +++ b/files/pt-br/web/api/selection/index.html diff --git a/files/pt-br/web/api/svgaelement/svgalement.target/index.html b/files/pt-br/web/api/svgaelement/target/index.html index e197ee81e5..e197ee81e5 100644 --- a/files/pt-br/web/api/svgaelement/svgalement.target/index.html +++ b/files/pt-br/web/api/svgaelement/target/index.html diff --git a/files/pt-br/web/api/touch_events/index.html b/files/pt-br/web/api/touch_events/index.html new file mode 100644 index 0000000000..df21cdf335 --- /dev/null +++ b/files/pt-br/web/api/touch_events/index.html @@ -0,0 +1,353 @@ +--- +title: Eventos do Toque +slug: Web/Guide/Events/Touch_events +tags: + - Avançado + - DOM + - Evento + - Guía + - Mobile + - Visualização +translation_of: Web/API/Touch_events +--- +<p>Com a finalidade de fornecer suporte de qualidade para interfaces baseadas em toque (touch), os eventos de touch oferecem a capacidade de interpretar a atividade em telas sensíveis ao toque ou trackpads.</p> + +<h2 id="Definições">Definições</h2> + +<dl> + <dt>Surface</dt> + <dd>A superfície sensível ao toque. Pode ser uma tela ou trackpad.</dd> +</dl> + +<dl> + <dt><strong style="font-weight: bold;">T</strong>ouch point</dt> + <dd>Um ponto de contato com a superfície. Pode ser um dedo (ou cotovelo, orelha, nariz, o que seja, mas provavelmente, um dedo) ou uma caneta.</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{ domxref("TouchEvent") }}</dt> + <dd>Representa um evento quando ocorre o estado de toque na superfície.</dd> + <dt>{{ domxref("Touch") }}</dt> + <dd>Representa um único ponto de contato entre o usuário e a superfície sensível a toque.</dd> + <dt>{{ domxref("TouchList") }}</dt> + <dd>Representa um grupo de toques, isto é usado quando usuário tem por exemplo, vários dedos ao mesmo tempo sobre a superfície.</dd> + <dt>{{ domxref("DocumentTouch") }}</dt> + <dd>Contém métodos de conveniência para criar {{ domxref("Touch") }} e objetos {{ domxref("TouchList") }} .</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Este exemplo acompanha múltiplos pontos de contato de cada vez, permitindo o usuário desenhe em um {{ HTMLElement("canvas") }} com mais de um dedo por vez. Ele só funcionará em um browser que tenha suporte a eventos de toque.</p> + +<div class="note"><strong>Nota:</strong> O texto a seguir utiliza o termo "finger" quando descreve o contato com a superfície, mas poderia, é claro, ser também uma caneta ou outro método de contato.</div> + +<h3 id="Crie_um_canvas">Crie um canvas</h3> + +<pre class="brush: html"><canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> + Seu browser não tem suporte ao elemento canvas. +</canvas> +<br> +<button onclick="startup()">Initialize</button> +<br> +Log: <pre id="log" style="border: 1px solid #ccc;"></pre> +</pre> + +<h3 id="Configurado_os_eventos">Configurado os eventos</h3> + +<p>Quando uma página é carregada, a função <code>startup()</code> mostrada abaixo deve ser chamada pelo nosso elemento {{ HTMLElement("body") }} através do atributo <code>onload</code> (Mas no exemplo usamos um botão para adicioná-lo, devido as limitações do MDN live example system).</p> + +<pre class="brush: js">function startup() { + var el = document.getElementsByTagName("canvas")[0]; + el.addEventListener("touchstart", handleStart, false); + el.addEventListener("touchend", handleEnd, false); + el.addEventListener("touchcancel", handleCancel, false); + el.addEventListener("touchleave", handleEnd, false); + el.addEventListener("touchmove", handleMove, false); + log("initialized."); +} +</pre> + +<p>Define simplesmento todos os ouvintes dos eventos do nosso elemento {{ HTMLElement("canvas") }} para que possamos trabalhar com os eventos de toque quando eles ocorrerem<span style="line-height: 1.5;">.</span></p> + +<h4 id="Rastreando_novos_toques" style="line-height: 18px;">Rastreando novos toques</h4> + +<p>Vamos acompanhar os toques em seu progresso.</p> + +<pre class="brush: js" style="font-size: 12px;">var ongoingTouches = new Array; </pre> + +<p><span style="line-height: 1.5;">Quando ocorre um evento </span><code style="font-size: 14px;">touchstart</code><span style="line-height: 1.5;">, indicando que um novo toque na superfície tenha ocorrido, a função abaixo </span><code style="font-size: 14px;">handleStart()</code><span style="line-height: 1.5;"> é chamada. </span></p> + +<pre class="brush: js">function handleStart(evt) { + evt.preventDefault(); + log("touchstart."); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i=0; i < touches.length; i++) { + log("touchstart:"+i+"..."); + ongoingTouches.push(copyTouch(touches[i])); + var color = colorForTouch(touches[i]); + ctx.beginPath(); + ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false); // a circle at the start + ctx.fillStyle = color; + ctx.fill(); + log("touchstart:"+i+"."); + } +} +</pre> + +<p>A chamada {{ domxref("event.preventDefault()") }} mantem o browser a processa o evento de toque ( isso também previne que um mouse event seja despachado). Então, temos o contexto e puxamos a lista de pontos de contato disparados noa propriedade do evento {{ domxref("TouchEvent.changedTouches") }}.</p> + +<p>Depois disso, nós iteramos sobre todos os objetos {{ domxref("Touch") }} da lista e os adicionamos em um array de pontos de contatos ativos e definimos o ponto inicial para desenhar um pequeno circulo; estamos usando um raio de 4 pixels, então um círculo de 4 pixels irá aparecer em nosso canvas.</p> + +<h4 id="Desenhando_movimento_do_toque">Desenhando movimento do toque</h4> + +<p>Cada vez que um ou mais dedos se movem, um evento de TouchMove é disparado, assim chamando nossa função handleMove(). A sua responsabilidade neste exemplo é atualizar as informações armazenadas e desenhar uma linha a partir da posição anterior para a atual de cada toque.</p> + +<pre class="brush: js">function handleMove(evt) { + evt.preventDefault(); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i=0; i < touches.length; i++) { + var color = colorForTouch(touches[i]); + var idx = ongoingTouchIndexById(touches[i].identifier); + + if(idx >= 0) { + log("continuing touch "+idx); + ctx.beginPath(); + log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");"); + ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); + log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");"); + ctx.lineTo(touches[i].pageX, touches[i].pageY); + ctx.lineWidth = 4; + ctx.strokeStyle = color; + ctx.stroke(); + + ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record + log("."); + } else { + log("can't figure out which touch to continue"); + } + } +} +</pre> + +<p>Esta interação sobre os toques também muda, mas parece em cache as informações em um array para cada toque anterior, a fim de determinar um pont de partida e o destino para o desenho do trajeto. Isto é feito para olhar cada touch da propriedade {{ domxref("Touch.identifier") }}. Esta propriedade é um número inteiro único para cada toque, e mantém-se consistente para cada evento durante o tempo de contato de cada dedo como a superfície.</p> + +<p>Isto permite obter as coordenadas da posição anterior de cada contato e usar os métodos de contexto apropriado para desenhar uma linha que une as duas posições.</p> + +<p>Depois de desenhar a linha, nós chamamos <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> para substituir as informações previas sobre o ponto de toque com a informação atual no array <code>ongoingTouches</code>.</p> + +<h4 id="Gerenciando_o_final_do_evento_de_toque">Gerenciando o final do evento de toque </h4> + +<p>Quando o usuário retira o dedo da superfície , um evento <code>touchend</code> é disparado. Da mesma forma, se o dedo deslisa para fora do canvas, nós teremos um evento <code>touchleave</code> disparado. Nós tratamos da mesma forma em ambos os casos: chamamos a função <code>handleEnd()</code>. A sua missão é desenhar uma linha para o final do ponto de toque e remover o ponto de toque da lista ongoing.</p> + +<pre class="brush: js">function handleEnd(evt) { + evt.preventDefault(); + log("touchend/touchleave."); + var el = document.getElementsByTagName("canvas")[0]; + var ctx = el.getContext("2d"); + var touches = evt.changedTouches; + + for (var i=0; i < touches.length; i++) { + var color = colorForTouch(touches[i]); + var idx = ongoingTouchIndexById(touches[i].identifier); + + if(idx >= 0) { + ctx.lineWidth = 4; + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); + ctx.lineTo(touches[i].pageX, touches[i].pageY); + ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8); // and a square at the end + ongoingTouches.splice(idx, 1); // remove it; we're done + } else { + log("can't figure out which touch to end"); + } + } +} +</pre> + +<p>Isto é muito semelhante a função anterior, as únicas diferenças reais são o desenho de um pequeno quadrado para marcar o fim e quando chamamos <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code style="font-size: 14px;">Array.splice()</code></a>, nós simplesmente removemos a antiga entrada da lista de toque do ongoing, sem adição das informações atualizadas. O resultado é que paramos o tracking do ponto de contato.</p> + +<h4 id="Tratando_toques_cancelados">Tratando toques cancelados</h4> + +<p>Se o dedo do usuário deslisa em uma UI de um navegador, ou o toque de outra forma precisa ser cancelado, o evento touchcancel é disparado e nos chamamaos a função <code>handleCancel()</code>.</p> + +<pre class="brush: js">function handleCancel(evt) { + evt.preventDefault(); + log("touchcancel."); + var touches = evt.changedTouches; + + for (var i=0; i < touches.length; i++) { + ongoingTouches.splice(i, 1); // remove it; we're done + } +} +</pre> + +<p>Uma vez que a idéia dé cancelar imediatamento o toque, nós simplesmente removemos da lista de ongoing sem desenhar uma linha final.</p> + +<h3 id="Funções_de_conveniência">Funções de conveniência</h3> + +<p>Este exemplo usa duas funções de conveniência que deve ser olhado rapidamente para ajudar a fazer o resto do código mais claro</p> + +<h4 id="Selecionando_a_cor_para_cada_toque">Selecionando a cor para cada toque</h4> + +<p>A fim de fazer cada toque desenhar com uma cor diferente, a função <code>colorForTouch()</code> é usada para escolher uma cor com base em um identificador único do toque, Este identificador é um número opaco, mas pelo menos podemos conta com ele diferindo entre os toques ativos no momento.</p> + +<pre class="brush: js">function colorForTouch(touch) { + var r = touch.identifier % 16; + var g = Math.floor(touch.identifier / 3) % 16; + var b = Math.floor(touch.identifier / 7) % 16; + r = r.toString(16); // make it a hex digit + g = g.toString(16); // make it a hex digit + b = b.toString(16); // make it a hex digit + var color = "#" + r + g + b; + log("color for touch with identifier " + touch.identifier + " = " + color); + return color; +} +</pre> + +<p>O resultado desta função é uma string que pode ser usada ao chamar as funções {{ HTMLElement("canvas") }} para setar a cor do desenho. Por exemplo, para um valor {{ domxref("Touch.identifier") }} de 10, o resultado será a string "#aaa".</p> + +<h4 id="Copiando_touch_objects">Copiando touch objects</h4> + +<p>Alguns browsers (mobile Safari, por exemplo) re-usa touch objects entre os eventos, por isso é melhor ter cuidado para copiar os bits, em vez de fazer referência a todo objeto.</p> + +<pre class="brush: js">function copyTouch(touch) { + return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY }; +}</pre> + +<h4 id="Encontrando_um_toque_ongoing">Encontrando um toque ongoing</h4> + +<p>A função <code>ongoingTouchIndexById()</code> abaixo verifica através do array <code>ongoingTouches</code> para encontrar o toque correspondente ao indentificador passado, então ele retorna o índice do touch no array.</p> + +<pre class="brush: js">function ongoingTouchIndexById(idToFind) { + for (var i=0; i < ongoingTouches.length; i++) { + var id = ongoingTouches[i].identifier; + + if (id == idToFind) { + return i; + } + } + return -1; // não econtrado +} +</pre> + +<h4 id="Mostrando_o_que_está_acontecendo">Mostrando o que está acontecendo</h4> + +<pre class="brush: js">function log(msg) { + var p = document.getElementById('log'); + p.innerHTML = msg + "\n" + p.innerHTML; +}</pre> + +<p>If your browser supports it, you can {{ LiveSampleLink('Example', 'see it live') }}.</p> + +<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/" title="http://jsfiddle.net/Darbicus/z3Xdx/10/">jsFiddle example</a></p> + +<h2 id="Additional_tips">Additional tips</h2> + +<p>This section provides additional tips on how to handle touch events in your web application.</p> + +<h3 id="Handling_clicks">Handling clicks</h3> + +<p>Since calling <code>preventDefault()</code> on a <code>touchstart</code> or the first <code>touchmove</code> event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on <code>touchmove</code> rather than <code>touchstart</code>. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p> + +<pre class="brush: js">function onTouch(evt) { + evt.preventDefault(); + if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) + return; + + var newEvt = document.createEvent("MouseEvents"); + var type = null; + var touch = null; + switch (evt.type) { + case "touchstart": type = "mousedown"; touch = evt.changedTouches[0];break; + case "touchmove": type = "mousemove"; touch = evt.changedTouches[0];break; + case "touchend": type = "mouseup"; touch = evt.changedTouches[0];break; + } + newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0, + touch.screenX, touch.screenY, touch.clientX, touch.clientY, + evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null); + evt.originalTarget.dispatchEvent(newEvt); +} +</pre> + +<h3 id="Calling_preventDefault()_only_on_a_second_touch">Calling preventDefault() only on a second touch</h3> + +<p>One technique for preventing things like <code>pinchZoom</code> on a page is to call <code>preventDefault()</code> on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.</p> + +<dl> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("22.0") }}</td> + <td>{{ CompatGeckoDesktop("18.0") }}<br> + Disabled with 24 ({{ bug(888304) }})</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>(Yes)</td> + <td>{{ CompatGeckoMobile("6.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>The <code>dom.w3c_touch_events.enabled</code> tri-state preference can be used to disable (0), enable (1), and auto-detect(2) support for standard touch events; by default, they're on auto-detect(2). After changing the preference, you must restart the browser for the changes to take effect.</p> + +<div class="note"> +<p>Prior to {{Gecko("12.0")}}, Gecko did not support multi-touch; only one touch at a time was reported.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> As of {{Gecko("24.0")}}, the touch events support introduced with {{Gecko("18.0")}} has been disabled on the <strong>desktop</strong> version of Firefox, as some popular sites including Google and Twitter are not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open <code>about:config</code> and set the <code>dom.w3c_touch_events.enabled</code> pref to <code>2</code>. The mobile versions including <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> and <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> are not affected by this change. Also, the API has been enabled on the Metro-style version of Firefox for Windows 8.</p> +</div> + +<div class="note"><strong>Note: </strong>Prior to {{Gecko("6.0") }}, Gecko offered a <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">proprietary touch event API</a>. That API is now deprecated; you should switch to this one.</div> diff --git a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html index 2743f68d65..2743f68d65 100644 --- a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html +++ b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html diff --git a/files/pt-br/web/api/api_web_audio/index.html b/files/pt-br/web/api/web_audio_api/index.html index 8f582eb524..8f582eb524 100644 --- a/files/pt-br/web/api/api_web_audio/index.html +++ b/files/pt-br/web/api/web_audio_api/index.html diff --git a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html b/files/pt-br/web/api/web_audio_api/simple_synth/index.html index b0fdf2a0c4..b0fdf2a0c4 100644 --- a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html +++ b/files/pt-br/web/api/web_audio_api/simple_synth/index.html diff --git a/files/pt-br/web/api/web_storage_api_pt_br/index.html b/files/pt-br/web/api/web_storage_api/index.html index f4e16bd9e7..f4e16bd9e7 100644 --- a/files/pt-br/web/api/web_storage_api_pt_br/index.html +++ b/files/pt-br/web/api/web_storage_api/index.html diff --git a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html index eb9807f0ef..eb9807f0ef 100644 --- a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html +++ b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html diff --git a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index 7b4f6384f6..7b4f6384f6 100644 --- a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html +++ b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html diff --git a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html index 72ac37e56a..72ac37e56a 100644 --- a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html +++ b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html diff --git a/files/pt-br/web/api/websockets_api/index.html b/files/pt-br/web/api/websockets_api/index.html new file mode 100644 index 0000000000..1a24b9d86a --- /dev/null +++ b/files/pt-br/web/api/websockets_api/index.html @@ -0,0 +1,178 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - Referencia + - Sumario + - WebSockets +translation_of: Web/API/WebSockets_API +--- +<p>WebSockets é uma tecnologia avançada que torna possível abrir uma sessão de comunicação interativa entre o navegador do usuário e um servidor. Com esta API, você pode enviar mensagens para um servidor e receber respostas orientadas a eventos sem ter que consultar o servidor para obter uma resposta.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentação</h2> + +<dl> + <dt><a href="/pt-BR/docs/WebSockets/Escrevendo_aplicacoes_cliente_WebSocket" title="WebSockets/Writing WebSocket client applications">Escrevendo aplicações cliente WebSocket</a></dt> + <dd>Um tutorial para escrever clientes WebSocket para ser executado no browser.</dd> + <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">Referencias WebSockets</a></dt> + <dd>Uma referência para a API WebSocket do lado do cliente.</dd> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">(TBD)Escrevendo servidores WebSocket</a></dt> + <dd><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">Um guia para escrever código do lado do servidor para lidar com o protocolo WebSocket.</a></dd> +</dl> + +<p><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">Saiba mais...</a></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Ferramentas</h2> + +<ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Uma poderosa plataforma cruzada para API WebSocket <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Uma implementação para servidor da API WebSocket<a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">Uma lista mais ampla de frameworks e bibliotecas aqui</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h2> + +<ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> +</ul> +</div> +</div> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - O Protocolo WebSocket</a></li> + <li><a class="external" href="http://www.w3.org/TR/websockets/">Especificação da API WebSocket</a></li> + <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Eventos enviados para servidor</a></li> + <li><a class="external" href="http://websocket.us/">WebSocket.us</a> - Uma comunidade sem fins lucrativos baseada no site WebSocket</li> +</ul> + +<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte a versão 76 {{obsolete_inline}}</td> + <td>6</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.00 (desativado)</td> + <td>5.0.1</td> + </tr> + <tr> + <td>Protocolo suporta versão 7 {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Protocolo suporta versão 10 {{obsolete_inline}}</td> + <td>14</td> + <td>{{CompatGeckoDesktop("7.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>HTML5 Labs</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Suporte padrão - RFC 6455</td> + <td>16</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10</td> + <td>12.10</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte a versão 76 {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protocolo suporta versão 7 {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protocolo suporta versão 8 (IETF rascunho 10) {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Suporte padrão - RFC 6455</td> + <td>16 (Chrome)</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_Gecko">Notas Gecko</h3> + +<p>O suporte a WebSockets no Firefox continua acompanhando as constantes especificações do WebSocket. O Firefox 6 implementa a versão 7 do protocolo subjacente, enquanto o Firefox 7 implementa a versão 8 (conforme especificado pelo rascunho IETF 10). O Firefox móvel recebeu suporte WebSocket no Firefox mobile 7.0.</p> + +<h4 id="Gecko_6.0">Gecko 6.0</h4> + +<p>Antes do Gecko 6.0 {{geckoRelease("6.0")}}, estava incorreto, um objeto <code>WebSocket</code> que alguns sites implicavam que os serviços <code>WebSocket</code> não eram prefixados. Este objeto foi renomeado para <code>MozWebSocket</code>.</p> + +<h4 id="Gecko_7.0">Gecko 7.0</h4> + +<p>Iniciado no Gecko 7.0 {{geckoRelease("7.0")}}, o <code>network.websocket.max-connections</code> preferencialmente usado para determinar o número máximo de conexões do WebSocket que pode m ser abertas de cada vez. O valor padrão é 200.</p> + +<h4 id="Gecko_8.0">Gecko 8.0</h4> + +<p>Iniciado no Gecko 8.0 {{geckoRelease("8.0")}}, a extensão de fluxo de expansão para o protocolo WebSocket foi desativada, por estar obsoleta nas especificações. Isso resolve incompatibilidades com alguns sites.</p> + +<h4 id="Gecko_11.0">Gecko 11.0</h4> + +<p>Antes do Gecko 11.0, as mensagens recebidas e enviadas estavam limitadas a 16 MB de tamanho. Agora elas podem ter até 2 GB de tamanho. Note, no entanto, que as limitações de memória (especialmente em dispositivos móveis) tornam isso apenas teoria, não se aplica à prática. Na realidade, as transferências desse tamanho falharão em dispositivos que não possuem memória suficiente.</p> + +<p>Além disso, o ArrayBuffer envia e recebe suporte para dados binários</p> + +<p>Iniciado no Gecko 11.0, a API do WebSocket já não é prefixada.</p> + +<div class="warning"><strong>Atenção:</strong>Entre outras coisas, um motivo chave para o WebSockets estar desativado por padrão no Firefox 4 e 5 é a descoberta de um <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">Problema de segurança no design do protocolo</a>. Isso foi corrigido no Firefox 6 implementando uma versão mais recente do protocolo que corrige o problema.</div> diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..af608ae641 --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,182 @@ +--- +title: Escrevendo aplicações cliente WebSocket +slug: WebSockets/Escrevendo_aplicacoes_cliente_WebSocket +tags: + - Cliente + - Exemplo + - Guía + - WebSocket API +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +<p><span style="line-height: 1.5;">Aplicações cliente usam o </span><a href="/en-US/docs/Web/API/Websockets_API">WebSocket API</a> para se comunicar com <a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers">WebSocket servers</a> sob o protocolo WebSocket.</p> + +<p>{{AvailableInWorkers}}</p> + +<div class="warning"> +<p>O fragmento de código neste artigo foi tomado de um exemplo de chat usando WebSocket. <a href="https://github.com/mdn/samples-server/tree/master/s/websocket-chat">v</a>eja o código, então experimente o exemplo. <strong>O exemplo atual possui um bug; ele está tentando usar WebSockets inseguro e precisa ser atualizado para usar WebSocokets seguro. Iremos arrumar isso em breve!</strong></p> +</div> + +<h2 id="Criando_um_objeto_WebSocket">Criando um objeto WebSocket </h2> + +<p>Para se comunicar utilizando o protocolo WebSocket, você precisa criar um objeto <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket">WebSocket</a>,</code> que automaticamente tentará abrir a conexão com o servidor.</p> + +<p>O construtor WebSocket aceita dois campos, um obrigatório e um opcional:</p> + +<pre class="notranslate">WebSocket WebSocket( + in DOMString url, + in optional DOMString protocols +); +</pre> + +<dl> + <dt><code>url</code></dt> + <dd>A URL para se conectar. Esta deve ser a URL para qual o WebSocket irá responder.</dd> + <dt><code>protocols</code> {{ optional_inline() }}</dt> + <dd>Uma única string indicando o protocolo ou uma <em>array </em>de strings de protocolos. Estas strings são usadas para indicar sub-protocolos, de forma que um único servidor pode implementar múltiplos sub-protocolos WebSocket (por exemplo, você pode querer que um servidor seja capaz de lidar com diferentes tipos de interações a depender do <code>protocol</code> especificado). Se não especificar uma string de protocolo, uma string vazia é assumida.</dd> +</dl> + +<p>O construtor lançará a exceção <strong><code>SECURITY_ERR</code></strong> se o destino não permitir acesso. Isso pode acontecer se você tentar utilizar uma conexão insegura (a maioria dos {{Glossary("user agent", "user agents")}} agora necessitam de um link seguro para todas as conexões WebSocket, a menos que estejam no mesmo dispositivo ou na mesma rede).</p> + +<dl> +</dl> + +<h3 id="Erros_de_Conexão">Erros de Conexão</h3> + +<p>Se um erro ocorrer durante a tentativa de conexão, primeiro um simpes evento com o nome "error" é enviado ao objeto <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket"><code>WebSocket</code></a> (invocando, assim, seu manipulador <code>onerror</code>), e então o <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a> é enviado ao objeto <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket"><code>WebSocket</code></a> (invocando o manipulador <code>onclose</code>) para indicar a razão pela qual a conexão foi fechada.</p> + +<p>O browser pode exibir uma descrição de erro mais detalhada na saída do console, ou mesmo um código de encerramento conforme definido na <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> através do <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a>. Está implementado a partir do Firefox 11.</p> + +<h3 id="Exemplos">Exemplos</h3> + +<p>Neste simples exemplo, criaremos um novo WebSocket, conectando ao servidor em <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. Neste exemplo utilizaremos um protocolo customizado denominado "protocolOne", embora possa ser omitido.</p> + +<pre class="brush: js notranslate">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); +</pre> + +<p>No retorno, <code>exampleSocket.readyState</code> está como <code>CONNECTING</code>. O <code>readyState</code> se tornará <code>OPEN</code> quando a conexão estiver pronta para transferir dados.</p> + +<p>Se quiser abrir uma conexão e for flexível quanto aos protocolos suportados, você pode especificar um array de protocolos:</p> + +<pre class="brush: js notranslate">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]); +</pre> + +<p>Uma vez que a conexão for estabelecida (isso é, <code>readyState</code> está <code>OPEN</code>), <code>exampleSocket.protocol</code> informará qual protocolo o servidor selecionou.</p> + +<p>Nos exemplos acima, <code>ws</code> foi substituído por <code>http</code>, de forma similar <code>wss</code> substitui <code>https</code>. Estabelecer uma conexão WebSocket depende do <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Mecanismo de Aprimoramento HTTP</a>, de forma que o pedido para atualização de protocolo está implícito quando endereçamos o servidor HTTP como <code><span class="nowiki">ws://www.example.com</span></code> ou <code><span class="nowiki">wss://www.example.com</span></code>.</p> + +<h2 id="Enviando_dados_ao_servidor">Enviando dados ao servidor</h2> + +<p>Uma vez a conexão aberta, você pode iniciar a transmisão de dados ao servidor. Para tanto, chame o método <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()">send()</a></code> do <code>WebSocket</code> para cada mensagem que queira enviar:</p> + +<pre class="brush: js notranslate">exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!"); +</pre> + +<p>Você pode enviar dados como uma string, {{ domxref("Blob") }}, ou um <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p> + +<div class="note"><strong>Note:</strong> Nas versões anteriores à 11, o Firefox suporta apenas o envio de dados como string.</div> + +<p>Visto que estabelecer uma conexão funciona de forma assícrona e, consequentemente, propensa a erros, não há garantia de sucesso ao chamar o método <code>send()</code> imediatamente após criar um objeto WebSocket. Podemos, pelo menos, ter certeza de que a tentativa de envio dos dados apenas ocorre quando uma conexão é estabelecida definindo um manipulador de eventos <code>onopen</code>:</p> + +<pre class="brush: js notranslate">exampleSocket.onopen = function (event) { + exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!"); +}; +</pre> + +<h3 id="Utilizando_JSON_para_transmitir_objetos">Utilizando JSON para transmitir objetos</h3> + +<p>Uma forma conveniente é usar <a href="/en/JSON" title="en/JSON">JSON</a> para enviar dados razoavelmente complexos ao servidor. Por exemplo, um aplicação de chat pode interagir com o servidor empregando um protocolo que utilize pacotes de dados JSON encapsulados:</p> + +<pre class="brush: js notranslate">// Enviar texto para todos os usuarios atraves do servidor +function sendText() { + // Construir um objeto do tipo msg contendo o dado que o servidor precisa processar a partir do cliente de chat. + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; + + // Enviar o objeto msg como um JSON em formato de string. + exampleSocket.send(JSON.stringify(msg)); + + // Esvaziar o campo input do elemento text, pronto pra receber a próxima linha de texto do usuário. + document.getElementById("text").value = ""; +} +</pre> + +<h2 id="Recebendo_mensagens_do_servidor">Recebendo mensagens do servidor</h2> + +<p>A API WebSockets é dirigida por <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/Events/Overview_of_Events_and_Handlers">eventos</a>; quando mensagens são recebidas, um evento de "mensagem" é entregue à função <code>onmessage</code>. Para começar a ouvir os dados de entrada, você pode fazer algo conforme o exemplo abaixo:</p> + +<pre class="brush: js notranslate">exampleSocket.onmessage = function (event) { + console.log(event.data); +} +</pre> + +<h3 id="Recebendo_e_interpretando_objetos_JSON">Recebendo e interpretando objetos JSON</h3> + +<p>Vamos considerar que a aplicação cliente de chat remete o envio de dados {{ anch("Utilizando JSON para transmitir objetos") }}. Existem diversos tipos de pacotes de dados que o cliente pode receber, tais como:</p> + +<ul> + <li>Handshake de login</li> + <li>Messagem de texto</li> + <li>Atualizações da lista de usuários</li> +</ul> + +<p>O código que interpreta as mensagens de entrada se parecerá com esse:</p> + +<pre class="brush: js notranslate">exampleSocket.onmessage = function(event) { + var f = document.getElementById("chatbox").contentDocument; + var text = ""; + var msg = JSON.parse(event.data); + var time = new Date(msg.date); + var timeStr = time.toLocaleTimeString(); + + switch(msg.type) { + case "id": + clientID = msg.id; + setUsername(); + break; + case "username": + text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>"; + break; + case "message": + text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; + break; + case "rejectusername": + text = "<b>Seu usuario foi configurado como <em>" + msg.name + "</em> porque o nome que você escolheu está em uso.</b><br>" + break; + case "userlist": + var ul = ""; + for (i=0; i < msg.users.length; i++) { + ul += msg.users[i] + "<br>"; + } + document.getElementById("userlistbox").innerHTML = ul; + break; + } + + if (text.length) { + f.write(text); + document.getElementById("chatbox").contentWindow.scrollByPages(1); + } +}; +</pre> + +<p>Aqui utilizamos <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> para conveter o objeto JSON de volta ao objeto original, em seguida, examine e aja de acordo com seu conteúdo.</p> + +<h3 id="Formato_de_dados_de_texto">Formato de dados de texto</h3> + +<p>O formato de Texto recebido através de uma conexão WebSocket está no formato UTF-8.</p> + +<h2 id="Fechando_a_conexão">Fechando a conexão</h2> + +<p>Quando finalizar o uso da conexão WebSocket, invoque o método <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()"><code>close()</code></a>:</p> + +<pre class="brush: js notranslate">exampleSocket.close(); +</pre> + +<p>Pode ser útil examinar o atributo <code>bufferedAmount</code> do socket antes de tentar fechar a conexão para determinar se qualquer dado ainda está pendente de transmissão na rede. </p> + +<h2 id="Considerações_de_segurança">Considerações de segurança</h2> + +<p>WebSockets não devem ser utilizados em um contexto de um ambiente misto, isto é, você não deveria abrir uma conexão não-segura a partir de uma página previamente carregada utilizando HTTPS, ou vice-versa. A maioria dos browsers atuamente apenas permitem conexões seguras pelo Websocke, e não mais suportam contextos diferentes desse.</p> diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html new file mode 100644 index 0000000000..553ba11aec --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html @@ -0,0 +1,237 @@ +--- +title: 'Escrevendo um servidor WebSocket em C #' +slug: WebSockets/Writing_WebSocket_server +translation_of: Web/API/WebSockets_API/Writing_WebSocket_server +--- +<h2 id="Introdução">Introdução</h2> + +<p>Se você quiser usar uma API WebSocket, você precisara ter um servidor. Neste artigo vou mostrar como escrever um WebSocket em C#. Você pode fazer isso em qualquer linguagem server-side, mas para manter as coisas simples e mais compreensíveis eu escolhi uma linguagem Microsoft.</p> + +<p>Este servidor está em conformidade com a <a href="http://tools.ietf.org/html/rfc6455" title="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, por isso irá tratar apenas as conexões com os navegadores Chrome versão 16, Firefox 11, IE 10 ou superior. </p> + +<h2 id="Primeiros_passos">Primeiros passos</h2> + +<p>Os WebSocket´s se comunicam através de uma conexão TCP (Transmission Control Protocol), felizmente o C# possui a classe <a href="https://msdn.microsoft.com/pt-br/library/system.net.sockets.tcplistener.aspx">TcpListener</a> que, como o nome sugere, tem a função de escutar (Listener) as comunicações via TCP. A classe TcpListener está no namespace System.Net.Sockets.</p> + +<div class="note"> +<p><span style="line-height: 1.572;">É uma boa idéia usar a palavra chave using para escrever menos. Isso significa que não é preciso você reescrever o namespace toda vez que usar uma classe dele.</span></p> +</div> + +<h3 id="TcpListener">TcpListener</h3> + +<p>Construtor:</p> + +<pre class="brush: cpp">TcpListener(System.Net.IPAddress localaddr, int port)</pre> + +<p>Aqui você define onde o servidor será acessível.</p> + +<div class="note"> +<p><span style="line-height: 1.572;">Para setar facilmente o tipo esperado no primeiro parâmetro, use o método estático Parse da classe IPAddress.</span></p> +</div> + +<p><span style="line-height: 1.572;">Métodos</span><span style="line-height: 1.572;">:</span></p> + +<ul> + <li><span style="line-height: 1.572;">Start()</span></li> + <li><span style="line-height: 1.572;">System.Net.Sockets.<a href="http://msdn.microsoft.com/en-us/library/system.net.sockets.tcpclient.aspx" title="http://msdn.microsoft.com/en-us/library/system.net.sockets.tcpclient.aspx">TcpClient</a> AcceptTcpClient()<br> + Espera por uma conexão TCP, aceita a conexão e retorna um objeto TcpClient.</span></li> +</ul> + +<p><span style="line-height: 1.572;">Veja como usar o que aprendemos:</span></p> + +<pre class="brush: cpp">using System.Net.Sockets; +using System.Net; +using System; + +class Server { + public static void Main() { + TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80); + + server.Start(); + Console.WriteLine("Server has started on 127.0.0.1:80.{0}Waiting for a connection...", Environment.NewLine); + + TcpClient client = server.AcceptTcpClient(); + + Console.WriteLine("A client connected."); + } +} +</pre> + +<h3 id="TcpClient"><span style="line-height: 1.572;">TcpClient</span></h3> + +<p>Métodos:</p> + +<ul> + <li><code>System.Net.Sockets.<a href="http://msdn.microsoft.com/en-us/library/system.net.sockets.networkstream.aspx" title="http://msdn.microsoft.com/en-us/library/system.net.sockets.networkstream.aspx">NetworkStream</a> GetStream()</code><br> + Obtém o fluxo (stream) do canal de comunicação. Ambos os lados do canal de comunicação possuem a capacidade de ler e escrever.</li> +</ul> + +<p>Propriedades:</p> + +<ul> + <li><code>int Available</code><br> + Este é o numero de bytes de dados que foram enviados. o valor é zero enquanto <em>NetworkStream.DataAvailable</em> for <em>falso</em>.</li> +</ul> + +<h3 id="NetworkStream">NetworkStream</h3> + +<p>Métodos:</p> + +<pre class="brush: cpp">Write(Byte[] buffer, int offset, int size)</pre> + +<p>Grava bytes do buffer, <em>offset </em>e <em>size </em>determinam o tamanho da mensagem.</p> + +<pre><span class="brush: cpp" style="line-height: 1.572;">Read(Byte[] buffer, int offset, int size)</span></pre> + +<p>Lê bytes para o <em>buffer, offset e size </em>determinam o tamanho da mensagem.<em> </em></p> + +<p>Vamos estender nosso exemplo.</p> + +<pre class="brush: cpp">TcpClient client = server.AcceptTcpClient(); + +Console.WriteLine("A client connected."); + +NetworkStream stream = client.GetStream(); + +//enter to an infinite cycle to be able to handle every change in stream +while (true) { + while (!stream.DataAvailable); + + Byte[] bytes = new Byte[client.Available]; + + stream.Read(bytes, 0, bytes.Length); +}</pre> + +<h2 id="Handshaking">Handshaking</h2> + +<p>Quando um cliente se conecta a um servidor, ele envia uma solicitação GET para atualizar a conexão com o WebSocket a partir de uma simples requisição HTTP. Isto é conhecido como handshaking (aperto de mão).</p> + +<div class="warning"> +<p>Este código tem um defeito. Digamos que a propriedade client.<code>Available</code> retorna o valor 2 porque somente a requisição GET está disponível até agora. a expressão regular iria falhar mesmo que os dados recebidos sejam perfeitamente válidos.</p> +</div> + +<pre class="brush: cpp">using System.Text; +using System.Text.RegularExpressions; + +Byte[] bytes = new Byte[client.Available]; + +stream.Read(bytes, 0, bytes.Length); + +//translate bytes of request to string +String data = Encoding.UTF8.GetString(bytes); + +if (new Regex("^GET").IsMatch(data)) { + +} else { + +}</pre> + +<p>Criar a resposta é mais fácil do que entender porque você deve fazê-lo desta forma.</p> + +<p>Você deve,</p> + +<ol> + <li>Obter o valor do cabeçalho da requisição <em>Sec-WebSocket-Key</em> sem qualquer espaço à direita e à esquerda;</li> + <li>Concatenar com "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";</li> + <li>Calcular o código SHA-1 e Base64 dele;</li> + <li>Reescreva no cabeçalho de resposta o valor de <em>Sec-WebSocket-Accept</em> como parte de uma resposta HTTP.</li> +</ol> + +<pre class="brush: cpp">if (new Regex("^GET").IsMatch(data)) { + Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine + + "Connection: Upgrade" + Environment.NewLine + + "Upgrade: websocket" + Environment.NewLine + + "Sec-WebSocket-Accept: " + Convert.ToBase64String ( + SHA1.Create().ComputeHash ( + Encoding.UTF8.GetBytes ( + new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" + ) + ) + ) + Environment.NewLine + + Environment.NewLine); + + stream.Write(response, 0, response.Length); +} +</pre> + +<h2 id="Decodificação_de_mensagens">Decodificação de mensagens</h2> + +<p>Após um <em>handshake</em> de sucesso o cliente ponde enviar mensagens ao servidor, mas agora estas mensagens são codificadas.</p> + +<p>Se nós enviarmos "MDN", nós obtemos estes bytes:</p> + +<table> + <tbody> + <tr> + <td>129</td> + <td>131</td> + <td>61</td> + <td>84</td> + <td>35</td> + <td>6</td> + <td>112</td> + <td>16</td> + <td>109</td> + </tr> + </tbody> +</table> + +<p>- 129:</p> + +<table> + <thead> + <tr> + <th scope="col">FIN (Esta é toda a mensagem?)</th> + <th scope="col">RSV1</th> + <th scope="col">RSV2</th> + <th scope="col">RSV3</th> + <th scope="col">Opcode</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>0x1=0001</td> + </tr> + </tbody> +</table> + +<p>FIN: Você pode enviar sua mensagem em quadros (frames), mas agora as coisas ficaram mais simples.<br> + <span style="line-height: 1.572;">Opcode </span><em>0x1</em><span style="line-height: 1.572;"> significa que este é um texto. Veja aqui a </span><a href="http://tools.ietf.org/html/rfc6455#section-5.2" style="line-height: 1.572;" title="http://tools.ietf.org/html/rfc6455#section-5.2">lista completa de Opcodes</a>.</p> + +<p>- 131:</p> + +<p>Se o segundo byte menos 128 estiver entre 0 e 125, este é o tamanho da mensagem. Se for 126, os 2 bytes seguintes (16-bit inteiro sem sinal) e se 127, os 8 bytes seguintes (64-bit inteiro sem sinal) são o comprimento.</p> + +<div class="note"> +<p>Eu posso escolher 128, porque o primeiro bit sempre será 1.</p> +</div> + +<p>- 61, 84, 35 e 6 são os bytes de chave para decodificar. Sempre mudam.</p> + +<p>- O restante dos bytes codificados são a mensagem<span style="line-height: 1.572;">.</span></p> + +<h3 id="Algoritmo_de_decodificação">Algoritmo de decodificação</h3> + +<p>byte decodificado = [byte codificado XOR (posição do byte codificado MOD 4º byte da chave)]</p> + +<p>Exemplo em C#:</p> + +<pre class="brush: cpp">Byte[] decoded = new Byte[3]; +Byte[] encoded = new Byte[3] {112, 16, 109}; +Byte[] key = Byte[4] {61, 84, 35, 6}; + +for (int i = 0; i < encoded.Length; i++) { + decoded[i] = (Byte)(encoded[i] ^ key[i % 4]); +}</pre> + +<h2 id="Link_Relacionado">Link Relacionado</h2> + +<ul> + <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers">Writing WebSocket servers</a></li> +</ul> + +<div id="cke_pastebin" style="position: absolute; top: 2209.23px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div> diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..e493605538 --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,263 @@ +--- +title: Escrevendo um servidor WebSocket +slug: WebSockets/Writing_WebSocket_servers +tags: + - Guía + - HTML5 + - Tutorial + - WebSocket + - WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +<p><span class="seoSummary">Um servidor de WebSocket é uma aplicação TCP que escuta uma porta de um servidor que segue um protocolo específico, simples assim. A tarefa de criar um servidor personalizado costuma assustar as pessoas; no entanto, pode ser fácil implementar um simples servidor WebSocket na sua plataforma de escolha. </span></p> + +<p>Um servidor WebSocket pode ser escrito em qualquer linguagem de programação server-side que é capaz de utilizar <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>, tais como C(++) , ou Python, ou mesmo o <a href="/en-US/docs/PHP">PHP</a> e o <a href="/en-US/docs/Web/JavaScript/Server-Side_JavaScript">server-side JavaScript</a>. Esse não é um tutorial em uma linguagem de programação específica, mas serve como guia para facilitar a escrita do seu próprio servidor.</p> + +<p>Você precisará saber como o HTTP funciona e ter uma experiência média com programação.</p> + +<p>Dependendo do suporte da linguagem, pode ser necessário o conhecimento sobre soquetes TCP. O escopo deste guia é apresentar o conhecimento mínimo que você precisa para escrever um servidor WebSocket.</p> + +<div class="note"> +<p>Leia a útlima especificação sobre WebSockets, a <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. As seções 1 e 4-7 são especialmente interessantes para implementadores de servidores. A seção 10 discute assuntos sobre segurança que você definitivamente deveria examinar antes de expor seu servidor.</p> +</div> + +<p>Um servidor de WebSocket é explicado de maneira bem simples aqui. Servidores de WebSocket geralmente são servidores separados e especializados (para balanceamento de carga ou outras razões práticas), então, geralmente você irá usar um proxy reverso (como um servidor HTTP comum) para detectar a solicitação de handshakes do WebSocket, pré-processá-los e enviar esses clientes para um servidor WebSocket real. Isso significa que você não precisa encher seu código com cookies e manipuladores de autenticação (por exemplo).</p> + +<p><a name="Handshake">O <em>Handshake</em> ("aperto de mão") do WebSocket</a></p> + +<p>Primeiro de tudo, o servidor deve ouvir as conexões socket recebidas usando um socket TCP padrão. Dependendo da sua plataforma, isso pode já ter sido tratado previamente. Por exemplo, vamos assumir que seu servidor está ouvindo example.com, porta 8000, e seu servidor socket responde às requisições GET em <code>/chat</code>.</p> + +<div class="warning"> +<p><strong>Aviso:</strong> O servidor pode ouvir qualquer porta que escolher, mas se escolher qualquer porta diferente de 80 e 443, podem ocorrer problemas relacionados aos firewalls e/ou proxies. Conexões na porta 443 tendem a ter mais sucesso com mais frequência, isso requer uma conexão segura (TLS/SSL). Também, note que a maioria dos browsers (notavelmente o Firefox 8+) não permite conexões de servidores WebSocket de páginas seguras.</p> +</div> + +<p>O handshake é a "Web" no WebSockets. É a ponte do HTTP para o Websocket. No handshake, detalhes da conexão são negociados, e qualquer uma das partes pode voltar antes da conclusão se os termos são desfavoráveis. O servidor deve ser cuidadoso para entender tudo que o cliente perguntar, caso contrário, serão introduzidas questões de segurança.</p> + +<h3 id="Requisição_Handshake_do_Cliente">Requisição Handshake do Cliente</h3> + +<p>Mesmo que você esteja construindo um servidor, um cliente ainda precisa iniciar o processo de handshake do WebSocket. Então você deve saber como interpretar a requisição do cliente. O cliente vai enviar uma requisição HTTP padrão que é parecida com isso (a versão do HTTP <strong>deve</strong> ser 1.1 ou maior, e o método <strong>deve</strong> ser um <code>GET</code>):</p> + +<pre>GET /chat HTTP/1.1 +Host: example.com:8000 +<strong>Upgrade: websocket</strong> +<strong>Connection: Upgrade</strong> +Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== +Sec-WebSocket-Version: 13 + +</pre> + +<p>O cliente pode solicitar extensões e/ou subprotocolos aqui; veja <a href="#Miscellaneous">Miscellaneous</a> para mais detalhes. Também, cabeçalhos comuns como <code>User-Agent</code>, <code>Referer</code>, <code>Cookie</code>, ou cabeçalhos de autenticação poderiam estar bem aqui. Faça o que você quiser com eles; eles não pertencem diretamente ao WebSocket. Também é seguro ignora-los. Em muitas configurações comuns, um proxy reverso ja tratou deles.</p> + +<p>Se qualquer cabeçalho não foi entendido ou conter um valor incorreto, o servidor deve enviar um erro "<a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" e fechar o socket imediatamente. É comum, também dar a razão pelo qual o handshake falhou no body da resposta do HTTP, mas muitas mensages nunca serão mostradas (os browsers não mostram isso). Se o servidor não reconhecer a versão do WebSockets, deve enviar um cabeçalho <code>Sec-WebSocket-Version</code> que contenha a(s) versão(versões) que o mesmo entenda. (Esse guia explica o v13, o mais novo). Agora, vamos continuar para o cabeçalho mais curioso, o <code>Sec-WebSocket-Key</code>.</p> + +<div class="note"> +<p><strong>Dica:</strong> Todos os browsers vão enviar um <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Origin</code> header</a>. Você pode usar esse cabeçalho por segurança (verifique pelo de mesma origem, whitelisting/ blacklisting, etc.) e envie uma <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a> se você não gostou do que viu. Sobretanto, fique ciente que os agentes non-browser podem apenas enviar uma falsa <code>Origin</code>. Muitas aplicações vão rejeitar requisições sem cabeçalho.</p> +</div> + +<div class="note"> +<p><strong>Dica:</strong> A request-uri (<code>/chat</code> aqui) não tem significado definido na especificação. Muitas pessoas utilizam habilmente para que servidores lidem com muiltíplas aplicações WebSocket. Por exemplo, <code>example.com/chat</code> deve invocar um app de chat com multiplos usuários, enquanto <code>/game</code> no mesmo servidor poderia invocar um jogo multiplayer.</p> +</div> + +<div class="note"> +<p><strong>Nota:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Regular HTTP status codes</a> podem apenas ser usados antes do handshake. Depois que o handshake sucede, você deve usar um conjunto de códigos diferentes (definidos na seção 7.4 da especificação).</p> +</div> + +<h3 id="Resposta_Handshake_do_Servidor">Resposta Handshake do Servidor</h3> + +<p>Quanto o servidor receber a requisição de handshake, ele deve enviar um resposta especifica (odd-looking) que indica que o protocolo está sendo alterado de HTTP para WebSocket. Essa resposta se parece com isso (lembre-se cada final do cabeçalho com <code>\r\n</code> e coloque um <code>\r\n</code> extra depois do último):</p> + +<pre><strong>HTTP/1.1 101 Switching Protocols</strong> +Upgrade: websocket +Connection: Upgrade +<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= + +</strong></pre> + +<p>Adicionalmente, o servidor pode decidir sobre os pedidos de extensão/subprotocolo aqui; veja <a href="#Miscellaneous">Miscellaneous</a> para mais detalhes. O <code>Sec-WebSocket-Accept</code> é uma parte interessante. O servidor deve deriva-lo do <code>Sec-WebSocket-Key</code> que o cliente enviou. Para obte-lo, concatene <span style="line-height: 1.5em;">o </span><code style="font-size: 14px;">Sec-WebSocket-Key</code><span style="line-height: 1.5em;"> do cliente e a string "</span><code style="font-size: 14px;">258EAFA5-E914-47DA-95CA-C5AB0DC85B11</code><span style="line-height: 1.5em;">" juntos (isso é uma "</span><a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a><span style="line-height: 1.5em;">"), pegue o </span><a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">SHA-1 hash</a><span style="line-height: 1.5em;"> do resultado, e retorne o</span><span style="line-height: 1.5em;"> codigo </span><a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a><span style="line-height: 1.5em;"> do hash.</span></p> + +<div class="note"> +<p><strong>FYI:</strong> Esse processo, aparentemente complicado existe para que seja óbvio para o cliente se o servidor suporta ou não o WebSockets. Isso é importante por causa de problemas com segurança que aparecem se o servidor aceita a conexão WebSocket mas interpreta que os dados são uma requisição HTTP.</p> +</div> + +<p>Então se a chave foi "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", o cabeçalho <code>Sec-WebSocket-Accept</code> aceito será "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Uma vez que o servidor envie estes cabeçalhos, o handshake esta completo e você pode começar a trocar dados!</p> + +<div class="note"> +<p>O servidor pode enviar outros cabeçalhos como Set-Cookie, ou perguntar por autenticação ou redirecionar via outros códigos de status, antes enviando a resposta do handshake.</p> +</div> + +<h3 id="Acompanhamento_dos_clientes">Acompanhamento dos clientes</h3> + +<p>Isso não está diretamente relacionado ao protocolo de WebSocket, mas vale apena mencionar aqui: seu servidor terá que acompanhar os soquetes dos clientes para que você não tenho que fazer o handshake novamente com clientes que já concluiram o handshake. O mesmo endereço IP do cliente pode tentar se conectar varias vezes (mas o servidor pode negar se tentarem fazer muitas conexões em razão de se defender de <a href="https://pt.wikipedia.org/wiki/Ataque_de_negação_de_serviço">ataques de negação de serviço</a>).</p> + +<h2 id="Trocando_Data_Frames">Trocando Data Frames</h2> + +<p>Tanto o cliente quanto o servidor podem enviar mensagens a qualquer momento — essa é a mágia do WebSocket. Entretanto, extrair informações desses chamados "frames" de dados não é um experiencia tão magica assim. Apesar de todos os <em>frames </em>seguirem um mesmo formato, os dados do cliente são enviados criptografados para o servidor, usando <a href="https://en.wikipedia.org/wiki/XOR_cipher">criptografia XOR</a> (com uma chave de 32 bits). A <a href="http://tools.ietf.org/html/rfc6455#section-5">seção 5 da especificação</a> do <a href="https://datatracker.ietf.org/doc/rfc6455/">protocolo de WebSocket</a> descreve isso em detalhes.</p> + +<h3 id="Formato">Formato</h3> + +<p>Cada <em>data frame</em> (do cliente para o servidor ou vice-versa) segue o mesmo formato:</p> + +<pre>Frame format: + + 0 1 2 3 + 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 + +-+-+-+-+-------+-+-------------+-------------------------------+ + |F|R|R|R| opcode|M| Payload len | Extended payload length | + |I|S|S|S| (4) |A| (7) | (16/64) | + |N|V|V|V| |S| | (if payload len==126/127) | + | |1|2|3| |K| | | + +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + + | Extended payload length continued, if payload len == 127 | + + - - - - - - - - - - - - - - - +-------------------------------+ + | |Masking-key, if MASK set to 1 | + +-------------------------------+-------------------------------+ + | Masking-key (continued) | Payload Data | + +-------------------------------- - - - - - - - - - - - - - - - + + : Payload Data continued ... : + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + | Payload Data continued ... | + +---------------------------------------------------------------+</pre> + +<p>O bit de MASK simplesmente diz se a mensagem está codificada. Mensagens do cliente devem estar mascaradas, então seu servidor deve esperar que o valor de MASK seja 1. De fato, a <a href="http://tools.ietf.org/html/rfc6455#section-5.1">seção 5.1 da especificação</a> diz que seu servidor deve se desconectar de um cliente se este cliente enviar mensagens que não estão mascaradas. Quando enviando um <em>frame</em> para o cliente, não mascare a mensagem e não defina o bit MASK. Explicaremos o mascaramento mais tarde.</p> + +<div class="blockIndicator note"> +<p>Você tem que mascarar as mensagens mesmo quando usando secure socket (SSL).<br> + Os campos RSV de 1 à 3 do cabeçalho podem ser ignorados, eles são para extenções.</p> +</div> + +<p>O campo <code>opcode</code> define como interpretar o <code>payload data</code>: <kbd>0x0</kbd> para continuo, <kbd>0x1</kbd> para texto (que sempre está codificadao em UTF-8), <kbd>0x2</kbd> para binário, e outros conhecidos como "control codes" seram discutidos posteriormente. Nessa versão de WebSockets, <kbd>0x3</kbd>, a <kbd>0x7</kbd> e <kbd>0xB</kbd> a <kbd>0xF</kbd> tem o mesmo significado.</p> + +<p>O bit FIN disso se é a ultima mensagem da serie. Se for <kbd>0</kbd>, então o servidor irá continuar esperando por mair partes da mensagem; caso contrário, o servidor pode considerar a mensagem como enviada.</p> + +<p>Se falará mais sobre isso depois.</p> + +<h3 id="Decodificando_o_Payload_Length">Decodificando o Payload Length</h3> + +<p>Para ler o <code>payload data</code>, você deve saber quando parar de ler. Por isso é importante saber o tamanho do payload (payload length). Infelizmente, conseguir essa informação é de certa forma complicado. Para obte-lá, seguimos esses passos:</p> + +<ol> + <li>Ler os bits 9-15 (inclusivo) e interpretar como um unsigned integer. Se o valor for de 125 ou menor, esse é o tamanho; temos a resposta. Se o valor é igual a 126, então vai para o passo 2, ou se for 127, então vai para o passo 3.</li> + <li>Ler os próximos 16 bits e interpretar como um unsined integer, esse é o tamanho; temos a resposta</li> + <li>Ler os próximos 64 bits e interpretar como um unsigned integer (o bit mais significante DEVE ser 0), esse é o tamanho; temos a resposta.</li> +</ol> + +<h3 id="Lendo_e_Desmascarando_o_Dado">Lendo e Desmascarando o Dado</h3> + +<p>Se o bit <code>MASK</code> for definido (e deve estar, para mensagens cliente-para-servidor), leia os próximos 4 octetos (32 bits); isso é a chave da mascara. Uma vez que o <code>payload length</code> e o <code>masking key</code> são decodificados, você pode seguir em frente e ler o número de bytes do socket.</p> + +<p>Vamos chamar os dados de <strong>ENCODED</strong>, e a chave de <strong>MASK</strong>.</p> + +<p>Para conseguir o <strong>DECODED</strong>, faça um loop sobre os octetos de <strong>ENCODED</strong> e um XOR do (i módulo 4) ezimo octeto de <strong>MASK</strong>. Em pseudo-código (isso é para ser valida em JavaScript):</p> + +<pre>var DECODED = ""; +for (var i = 0; i < ENCODED.length; i++) { + DECODED[i] = ENCODED[i] ^ MASK[i % 4]; +<span style="line-height: 1.5;">}</span></pre> + +<p>Agora você pode descobrir o que DECODED significa, dependendo da sua aplicação.</p> + +<h3 id="Fragmentação_de_Mensagens">Fragmentação de Mensagens</h3> + +<p>Os campos <code>FIN</code> e <code>opcode</code> trabalham juntos para enviar uma mensagens quebradas em mais de um <em>frame</em>. Isso é chamado de fragmentação. Fragmentação está disponível apenas sobre <code>opcode</code> <kbd>0x0</kbd> a <kbd>0x2</kbd>.</p> + +<p>Lembre que o <code>opcode</code> diz o que o <em>frame</em> deve fazer. Se for <kbd>0x1</kbd>, o payload um é texto. Se for <kbd>0x2</kbd>, o payload são dados binários. Entretanto, se for <kbd>0x0</kbd>, o <em>frame</em> é um<em>frame de continuação</em>. Isso significa que o servidor deve concatenar o <em>frame</em> de payload com o último frame recebido do cliente.</p> + +<p>Aqui está um exemplo, de como o servidor reage a um cliente enviando uma mensagem de texto. A primeira mensagem é enviada em um frame unico, enquanto a segunda mensagem é enviada através de tres frames. Os detalhes de <code>FIN</code> e <code>opcode</code> são mostrados apenas para o cliente:</p> + +<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello" +<strong>Server:</strong> <em>(process complete message immediately) </em>Hi. +<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a" +<strong>Server:</strong> <em>(listening, new message containing text started)</em> +<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new" +<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em> +<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!" +<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre> + +<p>Note que o primeiro <em>frame</em> que contém a mensagem inteira tem o <code>FIN igual a 1</code> e o <code>opcode igual a 0x1</code>, entao o servidor pode processar ou responder como achar melhor.<br> + O segundo frame enviado pelo cliente é uma mensagem de texto com payload <code>opcode igual a 0x1</code>, mas a mensagem inteira ainda não chegou (<code>FIN=0</code>). Todos as partes restantes da mensagem são enviados em frames continuos (<code>opcode=0x0</code>), e o frame final da mensagem é marcado com <code>FIN=1</code>. <a href="http://tools.ietf.org/html/rfc6455#section-5.4">Seção 5.4 da especificação</a> descreve a fragmentação de mensagens.</p> + +<h2 id="Pings_e_Pongs_O_Heartbeat_do_WebSockets">Pings e Pongs: O Heartbeat do WebSockets</h2> + +<p>Em qualquer momento do handshake, tanto o cliente quanto o servidor podem enviar um ping para a outra parte. Quando o ping é rescebido, o destinatário deve responder com um pong assim que possível. Você pode usar isso para garantir que o cliente está conectado, por exemplo.</p> + +<p>Um ping ou um pong é um frame comum, entretanto é usado para controle. Pings tem o valor de opcode <kbd>0x9</kbd>, enquanto que pongs tem o opcode <kbd>0xA</kbd>. Quando você recebe um ping, envia de volta um pong com o mesmo exato <code>payload data</code> do ping (para pings e pongs, o <code>payload length</code> máximo é 125). Você também pode ter um pong sem nunca receber um ping; ignore isso caso ocorra.</p> + +<div class="blockIndicator note"> +<p>Se você receber mais de um ping antes de ter a chance de enviar um pong, você envia apenas um pong.</p> +</div> + +<h2 id="Fechando_a_conexão">Fechando a conexão</h2> + +<p>Para fechar a conexão tanto cliente quanto servidor podem enviar um frame de controle com dados contendo a sequencia de controles especifica para iniciar o fim do handshake (detalhado na seção 5.5.1). Assim que receber esse tipo de frame, a outra parte envia um frame de fechamento em resposta. A primeira parte então fecha a conexão. Quais quer outros dados recebidos depois de fechar a conexão é descartado. </p> + +<h2 id="Diversos"><a name="Miscellaneous">Diversos</a></h2> + +<div class="note"> +<p>Códigos WebSocket, extensões, subprotocols, etc. são registrados na <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p> +</div> + +<p>As extensões e subprotocolos do WebSocket são negociados via headers durante the handshake. Algumas vezes extensões e subprotocolos paracem muito similares para serem coisas diferentes, mas eles tem claras distinções. Extensões controlam os <strong>frame</strong> do WebSocket e <strong>modificam</strong> o payload, enquanto os subprotocolos estruturam o <strong>payload</strong> do WebSocket e <strong>nunca modificam</strong> nada. Extensões são opcionais e generalizadas (como comporessam); subprotocolos são mandatórios e localizados (como os usados para chat e para jogos MMORPG).</p> + +<h3 id="Extensões">Extensões</h3> + +<div class="note"> +<p><strong>Essa sessão precisa ser mais desenvolvida. Por favor edite se você tiver conhecimento sobre.</strong></p> +</div> + +<p>Imagine um extensão que comprime um arquivo antes de ser enviado em um e-mail para alguem. Independente do que você faça, está enviando o <em>mesmo</em> dado de formas diferentes. O destinatário eventualmente terá os mesmos dados que a cópia local que você tem, mas foram enviadas de formas diferentes. Isso é o que extensões fazem. WebSockets definem um protocolo e um forma simples de envio de dados, mas uma extensão como um compressor pode enviar o mesmo dado em um formado menor.</p> + +<div class="note"> +<p>Extensões são explicadas nas sessões 5.8, 9, 11.3.2 e 11.4 da especificação.</p> +</div> + +<h3 id="Subprotocols">Subprotocols</h3> + +<p>Pense em um subprotocolo como um <a href="https://pt.wikipedia.org/wiki/XML">esquema XML</a> personalizado ou <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">doctype declaration</a>. Você ainda está usando XML e sua sintaxe, mas também é restringido por uma estrutura em que concordou. Os subprotocolo WebSocket são exatamente assim. Eles não apresentam nada sofisticado, apenas estabelecem estrutura. Como um doctype ou esquema, ambas as partes devem concordar com o subprotocolo; diferente de um doctype ou esquema, o subprotocolo é implementado no servidor e não pode ser referenciado externamente pelo cliente.</p> + +<div class="note"> +<p>Subprotocolos são explicados nas sessões 1.9, 4.2, 11.3.4 e 11.5 da especificação.</p> +</div> + +<p>Um cliente precisa solicitar um subprotocolo específico. Para fazer isso, ele enviará algo como isso <strong>como parte do handshake original</strong>:</p> + +<pre>GET /chat HTTP/1.1 +... +Sec-WebSocket-Protocol: soap, wamp + +</pre> + +<p>ou, equivalentemente:</p> + +<pre>... +Sec-WebSocket-Protocol: soap +Sec-WebSocket-Protocol: wamp + +</pre> + +<p>Agora, o servidor deve escolher um dos protocolos que o cliente sugeriu e suporta. Se houver mais de um, envie o primeiro que o cliente enviou. Imagine que nosso servidor possa usar <code>soap</code> e <code>wamp</code>. Em seguida, no handshake de resposta, ele enviará:</p> + +<pre>Sec-WebSocket-Protocol: soap + +</pre> + +<div class="warning"> +<p>O servidor não pode enviar mais de um cabeçalho <code>Sec-Websocket-Protocol</code>.<br> + Se o servidor não quiser usar nenhum subprotocolo, <strong>ele não deverá enviar nenhum cabeçalho <code>Sec-WebSocket-Protocol</code></strong>. O envio de um cabeçalho em branco está incorreto.<br> + O cliente pode fechar a conexão se não conseguir o subprotocolo desejado.</p> +</div> + +<p>Se você deseja que seu servidor obedeça a certos subprotocolo, então naturalmente precisará de código extra no servidor. Vamos imaginar que estamos usando um subprotocolo <code>json</code>. Neste subprotocolo, todos os dados são transmitidos como JSON. Se o cliente solicitar esse protocolo e o servidor quiser usá-lo, o servidor precisará ter um analisador JSON. Na prática, isso fará parte de uma biblioteca, mas o servidor precisará transmitir os dados.</p> + +<div class="note"> +<p><strong>Tip:</strong> Para evitar o conflito de nomes, recomenda-se que o subprotocolo seja nomeado como parte da string do domínio. Se você está desenvolvendo um aplicativo de bate-papo personalizado que usa um formato proprietário exclusivo da Exemplo Inc., então você pode usar isso: <code>Sec-WebSocket-Protocol: chat.example.com</code>. Note que isso não é necessário, é apenas uma convenção opcional, e você pode usar qualquer string que desejar.</p> +</div> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li><a href="https://github.com/alexhultman/libwshandshake">Biblioteca para o "<em>aperto de mão"</em> do WebSocket em C++</a></li> + <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Servidor Websocket em C#</a></li> + <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Escrevendo aplicações WebSocket do cliente</a></li> + <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Servidor Websocket em VB.NET</a></li> + <li><a href="https://datatracker.ietf.org/doc/rfc6455/">Especificação do protocolo (RFC 6455)</a></li> +</ul> diff --git a/files/pt-br/web/api/window/beforeunload_event/index.html b/files/pt-br/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..6d6034318c --- /dev/null +++ b/files/pt-br/web/api/window/beforeunload_event/index.html @@ -0,0 +1,106 @@ +--- +title: beforeunload +slug: Web/Events/beforeunload +translation_of: Web/API/Window/beforeunload_event +--- +<p>O evento <strong><code>beforeunload</code></strong> é disparado quando o <em>window</em>, o <em>document</em> e seus recursos estão prestes a ser descarregados.</p> + +<p>Quando uma <em>string</em> é atribuída na propriedade <code>returnValue</code> do <em>Event</em>, uma caixa de díalogo aparecerá solicitando ao usuário uma confirmação para sair da página (veja exemplo abaixo). Quando nenhum valor é fornecido, o evento é processado silenciosamente.</p> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Não</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Sim</td> + </tr> + <tr> + <td>Target objects</td> + <td>defaultView</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propriedade</th> + <th scope="col">Tipo</th> + <th scope="col">Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>O evento alvo (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>O tipo de evento.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readOnlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>O evento é normalmente <em>bubble</em>?</td> + </tr> + <tr> + <td><code>cancelable</code> {{readOnlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>É possível cancelar o evento?</td> + </tr> + <tr> + <td><code>returnValue</code></td> + <td>{{domxref("DOMString")}}</td> + <td>O valor de retorno do evento (a mensagem que será exibida ao usuário).</td> + </tr> + </tbody> +</table> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:js;">window.addEventListener("beforeunload", function (event) { + event.returnValue = "\o/"; +}); + +// equivalente a +window.addEventListener("beforeunload", function (event) { + event.preventDefault(); +});</pre> + +<p>Navegadores baseados no WebKit não seguem a especificação para caixas de diálogo. Um exemplo que funcionaria na maioria dos navegadores seria aproximadamente o seguinte:</p> + +<pre class="brush: js">window.addEventListener("beforeunload", function (e) { + var confirmationMessage = "\o/"; + + e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+ + return confirmationMessage; // Gecko, WebKit, Chrome <34 +});</pre> + +<h2 id="Notas">Notas</h2> + +<p>Quando este evento retorna um valor não vazio (<em>non-void</em>), é solicitada ao usuário uma confirmação para descarregar a página. Na maioria dos navegadores o valor retornado no evento é exibido como mensagem nessa confirmação. No Firefox 4 e versões anteriores a <em>string</em> retornada não é exibida para o usuário. Ao invés disso, o Firefox exibe a mensagem "Esta página está perguntanto se você deseja sair - é possível que as alterações feitas não sejam salvas." Veja {{bug("588292")}}.</p> + +<p>Desde 25 de maio de 2011 a especificação HTML5 define que chamadas aos métodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} e {{domxref("window.prompt()")}} serão ignoradas durante este evento. Para mais detalhes veja a <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">especificação HTML5</a> (em inglês).</p> + +<p>Note também que vários navegadores para celular ignoram o resultado deste evento (isso que dizer que eles não solicitam a confirmação do usuário). O Firefox possui uma configuração escondida em <em>about:config</em> que faz o mesmo. Em essência, isto significa que o usuário estará sempre confirmando que o documento pode ser descarregado.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Event("DOMContentLoaded")}}</li> + <li>{{Event("readystatechange")}}</li> + <li>{{Event("load")}}</li> + <li>{{Event("unload")}}</li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Descarregando documentos — Confirmando para descarregar o documento</a> (em inglês)</li> +</ul> diff --git a/files/pt-br/web/api/window/domcontentloaded_event/index.html b/files/pt-br/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..eb54671921 --- /dev/null +++ b/files/pt-br/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,177 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +<p>O evento <code>DOMContentLoaded</code> é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem <a href="/en-US/docs/Mozilla_event_reference/load" style="line-height: 19.0909080505371px;"><code>load</code></a><span style="line-height: 19.0909080505371px;"> quando </span><code style="font-style: normal; line-height: 19.0909080505371px;">DOMContentLoaded</code><span style="line-height: 19.0909080505371px;"> seria muito mais apropriado.</span></p> + +<div class="note"> +<p><strong>Nota:</strong> Javascript Síncrono pausa a análise do DOM.</p> +</div> + +<h2 id="Acelerando" style="line-height: 30px; font-size: 2.14285714285714rem;">Acelerando</h2> + +<p>Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">javascript assíncrono</a> e <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">otimizar o carregamento de folhas de estilo</a> pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.</p> + +<dl style="line-height: 19.0909080505371px;"> +</dl> + +<h2 id="Informações_gerais">Informações gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Propaga</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Sim (embora especificado como evento simples não-cancelável)</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Document</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Default</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma.</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Alvo do evento (O topo do DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Tipo de evento</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>O evento é por padrão bubbles ou não.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>O evento pode ser cancelado ou não.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Básico">Básico</h3> + +<pre class="brush: html" style="font-size: 14px;"><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM completamente carregado e analisado"); + }); +</script> +</pre> + +<h3 id="Forçando_o_atraso_do_DOMContentLoaded">Forçando o atraso do DOMContentLoaded</h3> + +<pre class="brush: html" style="font-size: 14px;"><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM completamente carregado e analisado"); + }); + +for(var i=0; i<1000000000; i++) +{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde. +</script> +</pre> + +<p> </p> + +<h3 id="Verificando_se_o_carregamento_está_completo">Verificando se o carregamento está completo</h3> + +<p><code>DOMContentLoaded</code> pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.</p> + +<pre>function doSomething() { + console.info("DOM carregado"); +} + +if (document.readyState === "loading") { // Ainda carregando + document.addEventListener("DOMContentLoaded", doSomething); +} else { // `DOMContentLoaded` foi disparado + doSomething(); +}</pre> + +<p> </p> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>0.2</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p><span style="font-size: 14px; line-height: 18px;">Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.</span></p> + +<h3 id="Cross-browser_fallback">Cross-browser fallback</h3> + +<p>O Internet Explorer 8 suporta o evento <code>readystatechange</code>, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar <code>document.documentElement.doScroll("left"); </code>repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.</p> + +<p>Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.</p> + +<h2 id="Eventos_Relacionados">Eventos Relacionados</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/load_event/index.html b/files/pt-br/web/api/window/load_event/index.html new file mode 100644 index 0000000000..db04b1ecbe --- /dev/null +++ b/files/pt-br/web/api/window/load_event/index.html @@ -0,0 +1,89 @@ +--- +title: load +slug: Web/Events/load +translation_of: Web/API/Window/load_event +--- +<pre dir="ltr" id="tw-target-text">O evento de <code>load</code> é acionado quando um recurso e seus recursos +dependentes terminaram de carregar.</pre> + +<h2 id="Informações_Gerais">Informações Gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelavel</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Window</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma.</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><script> + window.addEventListener("load", function(event) { + console.log("Todos os recursos terminaram o carregamento!"); + }); +</script> +</pre> + +<p> </p> + +<h2 id="Eventos_Relacionados">Eventos Relacionados</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/pt-br/web/api/window/window.localstorage/index.html b/files/pt-br/web/api/window/localstorage/index.html index 8c7c379435..8c7c379435 100644 --- a/files/pt-br/web/api/window/window.localstorage/index.html +++ b/files/pt-br/web/api/window/localstorage/index.html diff --git a/files/pt-br/web/api/window/onscroll/index.html b/files/pt-br/web/api/window/onscroll/index.html deleted file mode 100644 index e5e756482a..0000000000 --- a/files/pt-br/web/api/window/onscroll/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: window.onscroll -slug: Web/API/Window/onscroll -translation_of: Web/API/GlobalEventHandlers/onscroll -translation_of_original: Web/API/Window/onscroll ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">Sumário</h3> -<p>Especifica a função a ser chamada quando é feito o scroll na janela.</p> -<h3 id="Syntax" name="Syntax">Sintaxe</h3> -<pre class="eval">window.onscroll = <em>funcRef</em>; -</pre> -<ul> - <li><code>funcRef</code> é uma função de referência.</li> -</ul> -<h3 id="Example" name="Example">Exemplos</h3> -<h4 id="Exemplo_1_Genérico">Exemplo 1: Genérico</h4> -<pre class="brush: js">window.onscroll = function (oEvent) { - // executa um bloco de código ou funções, quando o scroll é feito na janela. -} -</pre> -<h4 id="Examplo_2_Dectando_a_rolagem">Examplo 2: Dectando a rolagem</h4> -<p>O exemplo a seguir, irá disparar um <code><a href="/pt-BR/docs/DOM/window.alert" title="/pt-BR/docs/DOM/window.alert">alerta</a></code> sempre que o usuário rolar a página .</p> -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>onscroll test</title> -<script type="text/javascript"> -window.onscroll = scroll; - -function scroll () { - alert("evento scroll detectado! " + window.pageXOffset + " " + window.pageYOffset); - // nota: você pode usar window.innerWidth e window.innerHeight para obter a largura e altura da área de visão. -} -</script> -</head> - -<body> -<p>Redimensione a janela</p> -<p>para um tamanho pequeno,</p> -<p>e use a barra de rolagem</p> -<p>para mover ao redor do conteúdo da página</p> -<p>na janela.</p> -</body> -</html> -</pre> -<h4 id="Examplo_3_Mostra_um_link_no_topo_da_página_depois_da_rolagem.">Examplo 3: Mostra um link no topo da página depois da rolagem.</h4> -<p>O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels</p> -<p> </p> -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>MDN Example</title> -<script type="text/javascript"> -var bAppended = false, oBookmark = document.createElement("div"); -oBookmark.id = "arrowUp"; -oBookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>"; - -onscroll = function() { - var nVScroll = document.documentElement.scrollTop || document.body.scrollTop; - bAppended = nVScroll > 500 ? - bAppended || (document.body.appendChild(oBookmark), true) - : bAppended && (document.body.removeChild(oBookmark), false); -}; -</script> -<style type="text/css"> -#arrowUp { - position: fixed; - height: auto; - width: auto; - right: 10px; - top: 10px; - font-size: 48px; -} -#arrowUp a { - text-decoration: none; - color: black; - font-weight: bold; - font-family: serif; -} -</style> -</head> - -<body> -<p>Conteúdo da página aqui!</p> -</body> - -</html></pre> -<h3 id="Notes" name="Notes">Notas</h3> -<p>{{ Bug(189308) }}, nas versões antigas do Gecko, o evento 'onscroll' era executado apenas quando a barra de rolagem era arrastada, não quando utilizada a seta do teclado ou scroll do mouse.<br> - Esse bug foi corrigido no Gecko 1.8/Firefox 1.5</p> -<p>Quando o window.scrollX/scrollY não é 0 -- considerando que o scroll ocorreu por algum script ou uma ação manual -- recarregando a página irá disparar o evento onscroll imediatamente.</p> -<h3 id="Specification" name="Specification">Especificação</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li> -</ul> -<p>{{ languages( { "zh-cn": "zh-cn/DOM/window.onscroll"} ) }}</p> diff --git a/files/pt-br/web/api/window/url/index.html b/files/pt-br/web/api/window/url/index.html deleted file mode 100644 index 1dec25bd24..0000000000 --- a/files/pt-br/web/api/window/url/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Window.URL -slug: Web/API/Window/URL -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p>A propriedade <strong><code>Window.URL</code></strong> retorna um objeto que fornece métodos estáticos usados para criar e gerenciar URLs de objeto. Também pode ser chamado como um construtor para construir objetos {{domxref("URL")}}.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>Chamando um método estático:</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>Construindo um novo objeto:</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> - -<h2 id="Especificação">Especificação</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Do Gecko 2 (Firefox 4) ao Gecko 18 incluído, o Gecko retornou um objeto com o tipo interno <code>nsIDOMMozURLProperty</code> não padrão. Na prática, isso não fez diferença.</p> - -<p>[2] Implementado sob o nome não padronizado <code>webkitURL</code>.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("URL")}} API.</li> -</ul> diff --git a/files/pt-br/web/api/windowbase64/index.html b/files/pt-br/web/api/windowbase64/index.html deleted file mode 100644 index f51b72c102..0000000000 --- a/files/pt-br/web/api/windowbase64/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This helper neither defines nor inherits any properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This helper does not inherit any methods.</em></p> - -<dl> - <dt>{{domxref("WindowBase64.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowBase64.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/pt-br/web/api/windowbase64/atob/index.html b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html index cb9058abe5..cb9058abe5 100644 --- a/files/pt-br/web/api/windowbase64/atob/index.html +++ b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html diff --git a/files/pt-br/web/api/windowtimers/cleartimeout/index.html b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html index f03f43979f..f03f43979f 100644 --- a/files/pt-br/web/api/windowtimers/cleartimeout/index.html +++ b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html diff --git a/files/pt-br/web/api/windowtimers/index.html b/files/pt-br/web/api/windowtimers/index.html deleted file mode 100644 index 8be6ca7e8b..0000000000 --- a/files/pt-br/web/api/windowtimers/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html b/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html index 81b8fb8d3e..81b8fb8d3e 100644 --- a/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html +++ b/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html diff --git a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html b/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html index b541e64bc1..b541e64bc1 100644 --- a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html +++ b/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html |