From 709e390d89b937e5e19f0e5cb269043a82d8be13 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Fri, 28 Jul 2023 08:50:10 -0700 Subject: [PATCH] pt-br: Format /web/api using Prettier (part 1) --- .../web/api/abortsignal/aborted/index.md | 10 +- files/pt-br/web/api/abortsignal/index.md | 6 +- .../web/api/angle_instanced_arrays/index.md | 8 +- files/pt-br/web/api/animation/cancel/index.md | 6 +- .../web/api/animation/currenttime/index.md | 6 +- files/pt-br/web/api/animation/index.md | 6 +- .../web/api/animation/playstate/index.md | 32 +- .../animationevent/animationevent/index.md | 6 +- .../api/animationevent/animationname/index.md | 7 +- .../api/animationevent/elapsedtime/index.md | 6 +- files/pt-br/web/api/animationevent/index.md | 8 +- .../api/animationevent/pseudoelement/index.md | 6 +- files/pt-br/web/api/atob/index.md | 10 +- files/pt-br/web/api/attr/localname/index.md | 8 +- files/pt-br/web/api/audiocontext/index.md | 6 +- files/pt-br/web/api/audionode/index.md | 6 +- .../web/api/background_tasks_api/index.md | 138 ++--- .../pt-br/web/api/battery_status_api/index.md | 7 +- files/pt-br/web/api/batterymanager/index.md | 6 +- files/pt-br/web/api/biquadfilternode/index.md | 24 +- files/pt-br/web/api/blob/blob/index.md | 8 +- files/pt-br/web/api/blob/index.md | 30 +- files/pt-br/web/api/blob/size/index.md | 6 +- files/pt-br/web/api/blob/slice/index.md | 6 +- files/pt-br/web/api/blob/type/index.md | 6 +- files/pt-br/web/api/broadcastchannel/index.md | 6 +- files/pt-br/web/api/cache/index.md | 57 +-- files/pt-br/web/api/canvas_api/index.md | 12 +- .../tutorial/advanced_animations/index.md | 126 +++-- .../applying_styles_and_colors/index.md | 191 +++---- .../tutorial/basic_animations/index.md | 204 ++++---- .../canvas_api/tutorial/basic_usage/index.md | 60 +-- .../tutorial/compositing/example/index.md | 478 ++++++++++-------- .../canvas_api/tutorial/compositing/index.md | 15 +- .../tutorial/drawing_shapes/index.md | 270 +++++----- .../canvas_api/tutorial/drawing_text/index.md | 45 +- .../tutorial/optimizing_canvas/index.md | 28 +- .../canvas_api/tutorial/using_images/index.md | 131 ++--- .../api/canvasrenderingcontext2d/arc/index.md | 26 +- .../canvasrenderingcontext2d/arcto/index.md | 25 +- .../beginpath/index.md | 23 +- .../clearrect/index.md | 19 +- .../canvasrenderingcontext2d/clip/index.md | 19 +- .../closepath/index.md | 19 +- .../canvasrenderingcontext2d/fill/index.md | 19 +- .../fillrect/index.md | 21 +- .../fillstyle/index.md | 60 +-- .../web/api/canvasrenderingcontext2d/index.md | 21 +- .../canvasrenderingcontext2d/lineto/index.md | 19 +- .../canvasrenderingcontext2d/moveto/index.md | 19 +- .../quadraticcurveto/index.md | 25 +- .../canvasrenderingcontext2d/rect/index.md | 19 +- .../canvasrenderingcontext2d/stroke/index.md | 19 +- .../strokerect/index.md | 21 +- files/pt-br/web/api/characterdata/index.md | 9 +- files/pt-br/web/api/cleartimeout/index.md | 29 +- files/pt-br/web/api/clipboardevent/index.md | 6 +- .../web/api/closeevent/closeevent/index.md | 6 +- files/pt-br/web/api/closeevent/index.md | 1 + files/pt-br/web/api/console/assert/index.md | 6 +- files/pt-br/web/api/console/clear/index.md | 4 +- files/pt-br/web/api/console/count/index.md | 6 +- files/pt-br/web/api/console/error/index.md | 6 +- files/pt-br/web/api/console/index.md | 9 +- files/pt-br/web/api/console/info/index.md | 6 +- files/pt-br/web/api/console/table/index.md | 10 +- files/pt-br/web/api/console/warn/index.md | 6 +- files/pt-br/web/api/console_api/index.md | 8 +- .../web/api/crypto/getrandomvalues/index.md | 12 +- files/pt-br/web/api/crypto/index.md | 6 +- files/pt-br/web/api/crypto/subtle/index.md | 6 +- files/pt-br/web/api/crypto_property/index.md | 16 +- files/pt-br/web/api/cryptokey/index.md | 6 +- files/pt-br/web/api/css/index.md | 7 +- files/pt-br/web/api/css_object_model/index.md | 13 +- .../api/customelementregistry/define/index.md | 145 +++--- .../api/customelementregistry/get/index.md | 14 +- .../web/api/customelementregistry/index.md | 26 +- .../customelementregistry/upgrade/index.md | 2 +- .../whendefined/index.md | 14 +- files/pt-br/web/api/datatransfer/index.md | 20 +- .../devicemotioneventacceleration/index.md | 4 +- .../devicemotioneventrotationrate/index.md | 6 +- .../web/api/document/activeelement/index.md | 70 +-- files/pt-br/web/api/document/anchors/index.md | 86 ++-- .../web/api/document/characterset/index.md | 6 +- .../web/api/document/contenttype/index.md | 6 +- .../web/api/document/createelement/index.md | 16 +- .../api/document/createnodeiterator/index.md | 24 +- .../web/api/document/designmode/index.md | 6 +- files/pt-br/web/api/document/doctype/index.md | 21 +- .../pt-br/web/api/document/document/index.md | 8 +- .../web/api/document/documentelement/index.md | 11 +- .../web/api/document/documenturi/index.md | 9 +- .../api/document/elementfrompoint/index.md | 40 +- .../web/api/document/fullscreen/index.md | 8 +- .../web/api/document/getelementbyid/index.md | 44 +- .../document/getelementsbyclassname/index.md | 23 +- .../api/document/getelementsbyname/index.md | 23 +- .../pt-br/web/api/document/hasfocus/index.md | 84 +-- 100 files changed, 1599 insertions(+), 1660 deletions(-) diff --git a/files/pt-br/web/api/abortsignal/aborted/index.md b/files/pt-br/web/api/abortsignal/aborted/index.md index e58d7f2415a18d..402315d5512fe3 100644 --- a/files/pt-br/web/api/abortsignal/aborted/index.md +++ b/files/pt-br/web/api/abortsignal/aborted/index.md @@ -27,18 +27,18 @@ var signal = controller.signal; // ... -signal.aborted ? console.log('Pedido foi abortado') : console.log('Pedido nao foi abortado'); +signal.aborted + ? console.log("Pedido foi abortado") + : console.log("Pedido nao foi abortado"); ``` ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'onabort')}} | {{Spec2('DOM WHATWG')}} | Definição Inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AbortSignal.aborted")}} +{{Compat}} ## Veja Também diff --git a/files/pt-br/web/api/abortsignal/index.md b/files/pt-br/web/api/abortsignal/index.md index a66459f0f322aa..df5c1155effcb5 100644 --- a/files/pt-br/web/api/abortsignal/index.md +++ b/files/pt-br/web/api/abortsignal/index.md @@ -61,13 +61,11 @@ Você pode encontrar um exemplo completo no GitHub — veja [abort-api](https:// ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}} | {{Spec2('DOM WHATWG')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AbortSignal")}} +{{Compat}} ## Veja Também diff --git a/files/pt-br/web/api/angle_instanced_arrays/index.md b/files/pt-br/web/api/angle_instanced_arrays/index.md index 579678a327b236..b5c2305a352000 100644 --- a/files/pt-br/web/api/angle_instanced_arrays/index.md +++ b/files/pt-br/web/api/angle_instanced_arrays/index.md @@ -36,18 +36,16 @@ Essa extensão expõe três novos métodos. Habilitando a extenção: ```js -var ext = gl.getExtension('ANGLE_instanced_arrays'); +var ext = gl.getExtension("ANGLE_instanced_arrays"); ``` ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ | -| {{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}} | {{Spec2('ANGLE_instanced_arrays')}} | definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.ANGLE_instanced_arrays")}} +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/animation/cancel/index.md b/files/pt-br/web/api/animation/cancel/index.md index a3fa39f5d60831..ffc89dd4a2aa4a 100644 --- a/files/pt-br/web/api/animation/cancel/index.md +++ b/files/pt-br/web/api/animation/cancel/index.md @@ -30,13 +30,11 @@ Se o método {{domxref("Animation.playState")}} da animação estiver executando ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------- | -| {{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}} | {{Spec2('Web Animations')}} | Editor's draft. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Animation.cancel")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/animation/currenttime/index.md b/files/pt-br/web/api/animation/currenttime/index.md index 6411a263bf938d..41c5e59d71360d 100644 --- a/files/pt-br/web/api/animation/currenttime/index.md +++ b/files/pt-br/web/api/animation/currenttime/index.md @@ -38,13 +38,11 @@ animation.currentTime = ## Especificações -| Especificações | Status | Comentário | -| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------- | -| {{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}} | {{Spec2("Web Animations")}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Animation.currentTime")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/animation/index.md b/files/pt-br/web/api/animation/index.md index 3cf1e1814d9da9..e4383e172ebd67 100644 --- a/files/pt-br/web/api/animation/index.md +++ b/files/pt-br/web/api/animation/index.md @@ -52,10 +52,8 @@ A interface **`Animation`** da [Web Animations API](/pt-BR/docs/Web/API/Web_Anim ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------------- | -| {{SpecName("Web Animations", "#the-animation-interface", "Animation")}} | {{Spec2("Web Animations")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Animation")}} +{{Compat}} diff --git a/files/pt-br/web/api/animation/playstate/index.md b/files/pt-br/web/api/animation/playstate/index.md index ef95ca94f88d96..f4820ce05603e2 100644 --- a/files/pt-br/web/api/animation/playstate/index.md +++ b/files/pt-br/web/api/animation/playstate/index.md @@ -37,29 +37,25 @@ No [jogo](http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010) [Growing/Shrin ```js // Configurando a animação das lágrimas -tears.forEach(function(el) { - el.animate( - tearsFalling, - { - delay: getRandomMsRange(-1000, 1000), // aleatório para cada lágrima - duration: getRandomMsRange(2000, 6000), // aleatório para cada lágrima - iterations: Infinity, - easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" - }); - el.playState = 'paused'; +tears.forEach(function (el) { + el.animate(tearsFalling, { + delay: getRandomMsRange(-1000, 1000), // aleatório para cada lágrima + duration: getRandomMsRange(2000, 6000), // aleatório para cada lágrima + iterations: Infinity, + easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)", + }); + el.playState = "paused"; }); - // Rodar as lágrimas caindo quando o final precisa aparecer. -tears.forEach(function(el) { - el.playState = 'playing'; +tears.forEach(function (el) { + el.playState = "playing"; }); - // Reseta a animação e coloca o estado em pause. -tears.forEach(function(el) { +tears.forEach(function (el) { el.playState = "paused"; el.currentTime = 0; }); @@ -67,13 +63,11 @@ tears.forEach(function(el) { ## Especificações -| Especificações | Status | Comentários | -| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------- | -| {{SpecName('Web Animations', '#play-state', 'playState')}} | {{Spec2("Web Animations")}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Animation.playState")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/animationevent/animationevent/index.md b/files/pt-br/web/api/animationevent/animationevent/index.md index cd6fd03dd350af..81906a93d837f8 100644 --- a/files/pt-br/web/api/animationevent/animationevent/index.md +++ b/files/pt-br/web/api/animationevent/animationevent/index.md @@ -30,13 +30,11 @@ _O construtor `AnimationEvent()`_ _também herda argumentos do {{domxref("Event. ## Especificações -| Especificações | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- | -| {{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }} | {{ Spec2('CSS3 Animations')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AnimationEvent.AnimationEvent")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/animationevent/animationname/index.md b/files/pt-br/web/api/animationevent/animationname/index.md index 2f3180c44b42e8..dad0ea3cfaedd2 100644 --- a/files/pt-br/web/api/animationevent/animationname/index.md +++ b/files/pt-br/web/api/animationevent/animationname/index.md @@ -2,6 +2,7 @@ title: AnimationEvent.animationName slug: Web/API/AnimationEvent/animationName --- + `{{SeeCompatTable}}{{ apiref("Web Animations API") }}` O `AnimationEvent.animationName` é uma propriedade só de leitura do{{domxref("DOMString")}} contendo o valor de {{cssxref("animation-name")}} propriedade CSS relacionada com a trasição. @@ -14,13 +15,11 @@ name = AnimationEvent.animationName ## Especificações -| Especificação | Estado | Comentário | -| -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------- | -| `{{ SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName') }}` | `{{ Spec2('CSS3 Animations')}}` | `Initial definition`. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AnimationEvent.animationName")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/animationevent/elapsedtime/index.md b/files/pt-br/web/api/animationevent/elapsedtime/index.md index ea89252df28ff2..5ad38ff2fce390 100644 --- a/files/pt-br/web/api/animationevent/elapsedtime/index.md +++ b/files/pt-br/web/api/animationevent/elapsedtime/index.md @@ -17,13 +17,11 @@ time = AnimationEvent.elapsedTime ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- | -| {{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }} | {{ Spec2('CSS3 Animations')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AnimationEvent.elapsedTime")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/animationevent/index.md b/files/pt-br/web/api/animationevent/index.md index 2bf7e471cdff3c..fe5e6a5a1f0967 100644 --- a/files/pt-br/web/api/animationevent/index.md +++ b/files/pt-br/web/api/animationevent/index.md @@ -18,7 +18,7 @@ _Também propriedades herdadas pelo pai `{{domxref("Event")}}`_. - `{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}` - : `É um ponto flutuante` dado pela quantidade de tempo que a animação está rodando, em segundos, quando esse evento termina, excluindo o tempo em que animação esteve pausada. Para o evento `"animationstart"`, `elapsedTime` é `0.0` a não ser que haja um valor negativo para `{{cssxref("animation-delay")}}`, nesse caso o evento terminará com `elapsedTime` contendo `(-1 * delay )`. - `{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}` - - : Um` {{domxref("DOMString")}} `começa com `'::'`, contendo o nome do [pseudo-elemento](/pt-BR/docs/Web/CSS/Pseudo-elements) onde a animação roda. Se a animação não rodar no pseudo-elemento mas no elemento, então teremos um _string_ vazio `' '`. + - : Um`{{domxref("DOMString")}}`começa com `'::'`, contendo o nome do [pseudo-elemento](/pt-BR/docs/Web/CSS/Pseudo-elements) onde a animação roda. Se a animação não rodar no pseudo-elemento mas no elemento, então teremos um _string_ vazio `' '`. ## Constructores @@ -34,13 +34,11 @@ _Também herda métodos do pai `{{domxref("Event")}}`_. ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ | -| {{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }} | {{ Spec2('CSS3 Animations') }} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AnimationEvent")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/animationevent/pseudoelement/index.md b/files/pt-br/web/api/animationevent/pseudoelement/index.md index 550fa55bb9c1f2..39dce6517b43f2 100644 --- a/files/pt-br/web/api/animationevent/pseudoelement/index.md +++ b/files/pt-br/web/api/animationevent/pseudoelement/index.md @@ -17,13 +17,11 @@ name = AnimationEvent.pseudoElement ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- | -| {{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }} | {{ Spec2('CSS3 Animations')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AnimationEvent.pseudoElement")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/atob/index.md b/files/pt-br/web/api/atob/index.md index 3631836a2d8303..17d06f10df9a6f 100644 --- a/files/pt-br/web/api/atob/index.md +++ b/files/pt-br/web/api/atob/index.md @@ -25,20 +25,12 @@ var dadoDecodificado = window.atob(dadoCodificado); // decodifica a string ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde a última versão, {{SpecName("HTML5.1")}}. | -| {{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML5.1')}} | Versão de {{SpecName("HTML WHATWG")}}. Nenhuma mudança. | -| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Versão de {{SpecName("HTML WHATWG")}}. Criação do `WindowBase64` (antes as propriedades ficavam no target). | +{{Specifications}} ## Compatibilidade com navegadores {{Compat}} -\[1] `atob()` também está disponível para os componentes do XPCOM implementado em JavaScript, porém o objeto [`window`](/pt-BR/docs/Web/API/Window) não é global nos componentes. - -\[2] A partir do [Firefox 27](/pt-BR/Firefox/Releases/27/Site_Compatibility), `atob()` ignora todos os caracteres de espaço no argumento para seguir as últimas especificações do HTML5. ([Erro do Firefox 711180](https://bugzil.la/711180)) - ## Veja também - [Base64 encoding and decoding](/pt-BR/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) diff --git a/files/pt-br/web/api/attr/localname/index.md b/files/pt-br/web/api/attr/localname/index.md index 1565b098341f83..185225f1180515 100644 --- a/files/pt-br/web/api/attr/localname/index.md +++ b/files/pt-br/web/api/attr/localname/index.md @@ -33,7 +33,7 @@ O seguinte exemplo mostra "id" em um diálogo de alerta. ```js const element = document.querySelector("#example"); -element.addEventListener("click", function() { +element.addEventListener("click", function () { const attribute = element.attributes[0]; alert(attribute.localName); }); @@ -49,13 +49,11 @@ O nome local de um atributo é a parte do nome qualificado do atributo the vem d ## Especificações -| Especificação | Status | Comment | -| ---------------------------------------------------------------------------- | ------------------------ | ----------------- | -| {{SpecName('DOM4', '#interface-attr', 'Attr.localName')}} | {{Spec2('DOM4')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Attr.localName")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/audiocontext/index.md b/files/pt-br/web/api/audiocontext/index.md index 95e6a5026364cd..6e59e9b3fef36b 100644 --- a/files/pt-br/web/api/audiocontext/index.md +++ b/files/pt-br/web/api/audiocontext/index.md @@ -121,13 +121,11 @@ var finish = audioCtx.destination; ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------- | -| {{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}} | {{Spec2('Web Audio API')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AudioContext")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/audionode/index.md b/files/pt-br/web/api/audionode/index.md index 14054a14a48e0b..71b741a77f26ab 100644 --- a/files/pt-br/web/api/audionode/index.md +++ b/files/pt-br/web/api/audionode/index.md @@ -65,13 +65,11 @@ oscillator.channelCount; ## Specifications -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | -| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.AudioNode")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/background_tasks_api/index.md b/files/pt-br/web/api/background_tasks_api/index.md index 0cab18124c03eb..76b7e2cdff6677 100644 --- a/files/pt-br/web/api/background_tasks_api/index.md +++ b/files/pt-br/web/api/background_tasks_api/index.md @@ -28,18 +28,20 @@ Because idle callbacks are intended to give your code a way to cooperate with th Because the Background Tasks API is fairly new, your code may need to be able to work on browsers that don't yet support it. You can do so with a simple shim that uses {{domxref("WindowTimers.setTimeout()", "setTimeout()")}} as a fallback option. This isn't a {{Glossary("polyfill")}}, since it's not functionally identical; `setTimeout()` doesn't let you make use of idle periods, but instead runs your code when possible, leaving us to do the best we can to avoid causing the user to experience performance lag. ```js -window.requestIdleCallback = window.requestIdleCallback || function(handler) { - let startTime = Date.now(); - - return setTimeout(function() { - handler({ - didTimeout: false, - timeRemaining: function() { - return Math.max(0, 50.0 - (Date.now() - startTime)); - } - }); - }, 1); -} +window.requestIdleCallback = + window.requestIdleCallback || + function (handler) { + let startTime = Date.now(); + + return setTimeout(function () { + handler({ + didTimeout: false, + timeRemaining: function () { + return Math.max(0, 50.0 - (Date.now() - startTime)); + }, + }); + }, 1); + }; ``` If {{domxref("Window.requestIdleCallback", "window.requestIdleCallback")}} is undefined, we create it here. The function begins by recording the time at which our implementation was called. We'll be using that to compute the value returned by our shim for {{domxref("IdleDeadline.timeRemaining()", "timeRemaining()")}}. @@ -51,9 +53,11 @@ As a result, while our shim doesn't constrain itself to the amount of idle time The implementation of our shim for {{domxref("Window.cancelIdleCallback", "cancelIdleCallback()")}} is much simpler: ```js -window.cancelIdleCallback = window.cancelIdleCallback || function(id) { - clearTimeout(id); -} +window.cancelIdleCallback = + window.cancelIdleCallback || + function (id) { + clearTimeout(id); + }; ``` If `cancelIdleCallback()` isn't defined, this creates one which simply passes the specified callback ID through to {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}. @@ -81,28 +85,28 @@ In order to be oriented about what we're trying to accomplish, let's have a look ```html

- Demonstration of using - cooperatively scheduled background tasks using the requestIdleCallback() + Demonstration of using + + cooperatively scheduled background tasks + using the requestIdleCallback() method.

Decoding quantum filament tachyon emissions...
-
- Start -
+
Start
- Task 0 of 0 + Task 0 of + 0
-
- Log -
-
-
+
Log
+
``` @@ -117,7 +121,7 @@ body { .logBox { margin-top: 16px; width: 400px; - height:500px; + height: 500px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; @@ -133,7 +137,9 @@ body { } #log { - font: 12px "Courier", monospace; + font: + 12px "Courier", + monospace; padding: 6px; overflow: auto; overflow-y: scroll; @@ -228,22 +234,26 @@ Finally, we set up a couple of variables for other items: - `statusRefreshScheduled` is used to track whether or not we've already scheduled an update of the status display box for the upcoming frame, so that we only do it once per frame ```js hidden -window.requestIdleCallback = window.requestIdleCallback || function(handler) { - let startTime = Date.now(); - - return setTimeout(function() { - handler({ - didTimeout: false, - timeRemaining: function() { - return Math.max(0, 50.0 - (Date.now() - startTime)); - } - }); - }, 1); -}; - -window.cancelIdleCallback = window.cancelIdleCallback || function(id) { - clearTimeout(id); -}; +window.requestIdleCallback = + window.requestIdleCallback || + function (handler) { + let startTime = Date.now(); + + return setTimeout(function () { + handler({ + didTimeout: false, + timeRemaining: function () { + return Math.max(0, 50.0 - (Date.now() - startTime)); + }, + }); + }, 1); + }; + +window.cancelIdleCallback = + window.cancelIdleCallback || + function (id) { + clearTimeout(id); + }; ``` #### Gerenciando a lista de tarefas @@ -258,7 +268,7 @@ First, we need a function that enqueues tasks for future execution. That functio function enqueueTask(taskHandler, taskData) { taskList.push({ handler: taskHandler, - data: taskData + data: taskData, }); totalTaskCount++; @@ -286,7 +296,10 @@ Our idle callback handler, runTaskQueue(), gets called when the browser determin ```js function runTaskQueue(deadline) { - while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && taskList.length) { + while ( + (deadline.timeRemaining() > 0 || deadline.didTimeout) && + taskList.length + ) { let task = taskList.shift(); currentTaskNumber++; @@ -295,7 +308,7 @@ function runTaskQueue(deadline) { } if (taskList.length) { - taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000} ); + taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000 }); } else { taskHandle = 0; } @@ -323,9 +336,9 @@ DOM changes are scheduled by calling the `scheduleStatusRefresh()` function. ```js function scheduleStatusRefresh() { - if (!statusRefreshScheduled) { - requestAnimationFrame(updateDisplay); - statusRefreshScheduled = true; + if (!statusRefreshScheduled) { + requestAnimationFrame(updateDisplay); + statusRefreshScheduled = true; } } ``` @@ -338,7 +351,8 @@ The `updateDisplay()` function is responsible for drawing the contents of the pr ```js function updateDisplay() { - let scrolledToEnd = logElem.scrollHeight - logElem.clientHeight <= logElem.scrollTop + 1; + let scrolledToEnd = + logElem.scrollHeight - logElem.clientHeight <= logElem.scrollTop + 1; if (totalTaskCount) { if (progressBarElem.max != totalTaskCount) { @@ -358,7 +372,7 @@ function updateDisplay() { } if (scrolledToEnd) { - logElem.scrollTop = logElem.scrollHeight - logElem.clientHeight; + logElem.scrollTop = logElem.scrollHeight - logElem.clientHeight; } statusRefreshScheduled = false; @@ -383,7 +397,7 @@ The `log()` function adds the specified text to the log. Since we don't know at ```js function log(text) { if (!logFragment) { - logFragment = document.createDocumentFragment(); + logFragment = document.createDocumentFragment(); } let el = document.createElement("div"); @@ -408,8 +422,8 @@ The function we'll be using as our task handler—that is, the function that wil function logTaskHandler(data) { log("Running task #" + currentTaskNumber + ""); - for (i=0; ihey!']; // an array consisting of a single DOMString -var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob +var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // the blob ``` ## Especificação -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------ | ---------------------------- | ------------------ | -| {{SpecName('File API', '#constructorBlob', 'Blob()')}} | {{Spec2('File API')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Blob.Blob")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/blob/index.md b/files/pt-br/web/api/blob/index.md index 47845d8513b9ab..201d1ae9051dd9 100644 --- a/files/pt-br/web/api/blob/index.md +++ b/files/pt-br/web/api/blob/index.md @@ -42,7 +42,7 @@ O código a seguir: ```js var aFileParts = ['hey!']; -var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // o blob +var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // o blob ``` equivale a: @@ -51,7 +51,7 @@ equivale a: var oBuilder = new BlobBuilder(); var aFileParts = ['hey!']; oBuilder.append(aFileParts[0]); -var oMyBlob = oBuilder.getBlob('text/xml'); // o blob +var oMyBlob = oBuilder.getBlob("text/xml"); // o blob ``` > **Aviso:** O {{ domxref("BlobBuilder") }} oferece outra maneira para criar Blobs, mas é depreciado e não deveria mais ser usado. @@ -62,7 +62,7 @@ O código a seguir: ```js var typedArray = GetTheTypedArraySomehow(); -var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // passe um MIME-type útil aqui +var blob = new Blob([typedArray], { type: "application/octet-binary" }); // passe um MIME-type útil aqui var url = URL.createObjectURL(blob); // url será algo do tipo: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf // agora você pode usar a URL em qualquer contexto em que URLs regulares podem ser usadas, por exemplo: img.src, etc. @@ -74,8 +74,8 @@ O único jeito de ler o conteúdo de um Blob é usando {{domxref("FileReader")}} ```js var reader = new FileReader(); -reader.addEventListener("loadend", function() { - // reader.result contém o conteúdo do blob como uma array tipada +reader.addEventListener("loadend", function () { + // reader.result contém o conteúdo do blob como uma array tipada }); reader.readAsArrayBuffer(blob); ``` @@ -84,27 +84,11 @@ Ao usar outros métodos de {{domxref("FileReader")}}, é possível ler o conteú ## Especificações -| Especificações | Status | Comentário | -| ---------------------------------------------------- | ---------------------------- | ------------------ | -| {{SpecName('File API','#blob','Blob')}} | {{Spec2('File API')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Blob")}} - -### Notas para Gecko - -Anterior ao Gecko 12.0, havia um bug que afetava o comportamento do [slice](#slice); que não funcionava para as posições `start` e `end` fora do intervalo de valores assinados como 64-bit; este bug foi corrigido para dar suporte a valores assinados como 64-bit. - -## Chrome Code - Disponibilidade de Escopo - -No escopo JSM, `Blob` é disponivel sem a necessidade de nada especial. - -No escopo Bootstrap, ele deve ser importado como tal: - -```js -const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {}); -``` +{{Compat}} ## Veja Também diff --git a/files/pt-br/web/api/blob/size/index.md b/files/pt-br/web/api/blob/size/index.md index be62c21b24a1fd..4a660ce1fdfe85 100644 --- a/files/pt-br/web/api/blob/size/index.md +++ b/files/pt-br/web/api/blob/size/index.md @@ -33,13 +33,11 @@ for (var i = 0; i < files.length; i++) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------ | ---------------------------- | ------------------ | -| {{SpecName('File API', '#dfn-size', 'size')}} | {{Spec2('File API')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Blob.size")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/blob/slice/index.md b/files/pt-br/web/api/blob/slice/index.md index 2404a76013895d..64afee83f992d2 100644 --- a/files/pt-br/web/api/blob/slice/index.md +++ b/files/pt-br/web/api/blob/slice/index.md @@ -30,13 +30,11 @@ A new {{domxref("Blob")}} object containing the specified data from the source { ## Specifications -| Specification | Status | Comment | -| ------------------------------------------------------------------------ | ---------------------------- | ------------------ | -| {{SpecName("File API", "#dfn-slice", "Blob.slice()")}} | {{Spec2("File API")}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Blob.slice")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/blob/type/index.md b/files/pt-br/web/api/blob/type/index.md index 3cb423a2585304..222721941560f8 100644 --- a/files/pt-br/web/api/blob/type/index.md +++ b/files/pt-br/web/api/blob/type/index.md @@ -41,13 +41,11 @@ for (i = 0; i < files.length; i++) { ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------ | ---------------------------- | ------------------ | -| {{SpecName('File API', '#dfn-type', 'type')}} | {{Spec2('File API')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Blob.type")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/broadcastchannel/index.md b/files/pt-br/web/api/broadcastchannel/index.md index 511ee36bbad471..3b9a3c6515eae6 100644 --- a/files/pt-br/web/api/broadcastchannel/index.md +++ b/files/pt-br/web/api/broadcastchannel/index.md @@ -39,13 +39,11 @@ _Essa interface também herda métodos de seu pai, {{domxref("EventTarget")}}._ ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}} | {{Spec2('HTML WHATWG')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.BroadcastChannel")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/cache/index.md b/files/pt-br/web/api/cache/index.md index c14ef3a2d0d9e9..233ef9bea24a59 100644 --- a/files/pt-br/web/api/cache/index.md +++ b/files/pt-br/web/api/cache/index.md @@ -55,64 +55,63 @@ var CACHE_VERSION = 1; // Identificador menor para uma versão específica do cache var CURRENT_CACHES = { - font: 'font-cache-v' + CACHE_VERSION + font: "font-cache-v" + CACHE_VERSION, }; -self.addEventListener('activate', function(event) { - var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { +self.addEventListener("activate", function (event) { + var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) { return CURRENT_CACHES[key]; }); // O worker não vai ser tratado como ativo até que a Promise se resolva. event.waitUntil( - caches.keys().then(function(cacheNames) { + caches.keys().then(function (cacheNames) { return Promise.all( - cacheNames.map(function(cacheName) { + cacheNames.map(function (cacheName) { if (expectedCacheNames.indexOf(cacheName) == -1) { - console.log('Deletando cache expirado:', cacheName); + console.log("Deletando cache expirado:", cacheName); return caches.delete(cacheName); } - }) + }), ); - }) + }), ); }); -self.addEventListener('fetch', function(event) { - console.log('Obtendo evento fetch para', event.request.url); +self.addEventListener("fetch", function (event) { + console.log("Obtendo evento fetch para", event.request.url); event.respondWith( - // Abre o objeto de cache que inicia com 'font' - caches.open(CURRENT_CACHES['font']).then(function(cache) { - return cache.match(event.request).then(function(response) { - if (response) { - console.log(' Encontrou resposta em cache:', response); - - return response; - } - }).catch(function(error) { - - // Trata exceções que vem de match() ou fetch(). - console.error(' Erro na handler:', error); + caches.open(CURRENT_CACHES["font"]).then(function (cache) { + return cache + .match(event.request) + .then(function (response) { + if (response) { + console.log(" Encontrou resposta em cache:", response); + + return response; + } + }) + .catch(function (error) { + // Trata exceções que vem de match() ou fetch(). + console.error(" Erro na handler:", error); - throw error; - }); - }) + throw error; + }); + }), ); }); ``` ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------- | ------------------------------------ | ----------------- | -| {{SpecName('Service Workers', '#cache', 'Cache')}} | {{Spec2('Service Workers')}} | Definição inicial | +{{Specifications}} ## Tabela de compatibilidade -{{Compat("api.Cache")}} +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/canvas_api/index.md b/files/pt-br/web/api/canvas_api/index.md index 732647a68e4856..963aa4ee2627bb 100644 --- a/files/pt-br/web/api/canvas_api/index.md +++ b/files/pt-br/web/api/canvas_api/index.md @@ -27,10 +27,10 @@ O método {{domxref("Document.getElementById()")}} pega uma referência para o e 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. ```js -const canvas = document.getElementById('canvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); -ctx.fillStyle = 'green'; +ctx.fillStyle = "green"; ctx.fillRect(10, 10, 150, 100); ``` @@ -94,13 +94,11 @@ A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bib ## Especificações -| Especificações | Estado | Comentário | -| -------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -Aplicações Mozilla ganharam suporte para `` a partir do Gecko 1.8 ([Firefox 1.5](/pt-BR/docs/Mozilla/Firefox/Releases/1.5)). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta `` quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam ``. +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.md index d0c4f1f08673f3..76f03b470f57aa 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -19,21 +19,21 @@ Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pin 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. ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var ball = { x: 100, y: 100, radius: 25, - color: 'blue', - draw: function() { + 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(); @@ -48,8 +48,8 @@ Nada de especial aqui, a bola é atualmente um simples círculos e desenha com a Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no [último capítulo](/pt-BR/docs/Web/API/Canvas_API/Tutorial/Basic_animations) 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. ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var ball = { @@ -58,29 +58,29 @@ var ball = { vx: 5, vy: 2, radius: 25, - color: 'blue', - draw: function() { + 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); + 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) { +canvas.addEventListener("mouseover", function (e) { raf = window.requestAnimationFrame(draw); }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); }); @@ -109,8 +109,8 @@ Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canva ``` ```js hidden -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var ball = { @@ -119,39 +119,37 @@ var ball = { vx: 5, vy: 2, radius: 25, - color: 'blue', - draw: function() { + 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); + 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) { + 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) { + 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) { +canvas.addEventListener("mouseover", function (e) { raf = window.requestAnimationFrame(draw); }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); }); @@ -165,8 +163,8 @@ ball.draw(); Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo: ```js -ball.vy *= .99; -ball.vy += .25; +ball.vy *= 0.99; +ball.vy += 0.25; ``` Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final. @@ -176,8 +174,8 @@ Esta diminuição da velocidade vertical para cada frame. Assim que a bola somen ``` ```js hidden -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var ball = { @@ -186,41 +184,39 @@ var ball = { vx: 5, vy: 2, radius: 25, - color: 'blue', - draw: function() { + 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); + ctx.clearRect(0, 0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; - ball.vy *= .99; - ball.vy += .25; + ball.vy *= 0.99; + ball.vy += 0.25; - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { + 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) { + 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) { +canvas.addEventListener("mouseover", function (e) { raf = window.requestAnimationFrame(draw); }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); }); @@ -234,7 +230,7 @@ ball.draw(); 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. ```js -ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; +ctx.fillStyle = "rgba(255, 255, 255, 0.3)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ``` @@ -243,8 +239,8 @@ ctx.fillRect(0, 0, canvas.width, canvas.height); ``` ```js hidden -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var ball = { @@ -253,42 +249,40 @@ var ball = { vx: 5, vy: 2, radius: 25, - color: 'blue', - draw: function() { + 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.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; + ball.vy *= 0.99; + ball.vy += 0.25; - if (ball.y + ball.vy > canvas.height || - ball.y + ball.vy < 0) { + 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) { + 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) { +canvas.addEventListener("mouseover", function (e) { raf = window.requestAnimationFrame(draw); }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); }); @@ -306,8 +300,8 @@ Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo n ``` ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); var raf; var running = false; @@ -317,19 +311,19 @@ var ball = { vx: 5, vy: 1, radius: 25, - color: 'blue', - draw: function() { + 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); + ctx.fillStyle = "rgba(255, 255, 255, 0.3)"; + ctx.fillRect(0, 0, canvas.width, canvas.height); } function draw() { @@ -348,7 +342,7 @@ function draw() { raf = window.requestAnimationFrame(draw); } -canvas.addEventListener('mousemove', function(e) { +canvas.addEventListener("mousemove", function (e) { if (!running) { clear(); ball.x = e.clientX; @@ -357,14 +351,14 @@ canvas.addEventListener('mousemove', function(e) { } }); -canvas.addEventListener('click', function(e) { +canvas.addEventListener("click", function (e) { if (!running) { raf = window.requestAnimationFrame(draw); running = true; } }); -canvas.addEventListener('mouseout', function(e) { +canvas.addEventListener("mouseout", function (e) { window.cancelAnimationFrame(raf); running = false; }); diff --git a/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 57c4871af3777b..b55b862819e16c 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -26,10 +26,10 @@ As strings validas que você pode inserir devem, de acordo com a especificação ```js // 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)'; +ctx.fillStyle = "orange"; +ctx.fillStyle = "#FFA500"; +ctx.fillStyle = "rgb(255, 165, 0)"; +ctx.fillStyle = "rgba(255, 165, 0, 1)"; ``` ### Um `fillStyle` exemplo @@ -38,11 +38,15 @@ Neste exemplo, nós vamos mais uma vez utilizar dois `for` loops para desenhar u ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + 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.fillStyle = + "rgb(" + + Math.floor(255 - 42.5 * i) + + "," + + Math.floor(255 - 42.5 * j) + + ",0)"; ctx.fillRect(j * 25, i * 25, 25, 25); } } @@ -66,18 +70,22 @@ O resultado se parece com isto: Este exemplo é similar com o anterior, porém utiliza a propriedade `strokeStyle` para alterar a cor de contorno das formas. Nós usamos o método `arc()` para desenhar círculos ao invés de quadrados. ```js - 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(); - } +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(); } } +} ``` ```html hidden @@ -107,8 +115,8 @@ Como as propriedades strokeStyle e fillStyle aceitam os valores de cor CSS rgba, ```js // Assigning transparent colors to stroke and fill style -ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'; -ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; +ctx.strokeStyle = "rgba(255, 0, 0, 0.5)"; +ctx.fillStyle = "rgba(255, 0, 0, 0.5)"; ``` 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). @@ -119,17 +127,17 @@ Neste exemplo, desenharemos um plano de fundo de quatro quadrados coloridos dife ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); // draw background - ctx.fillStyle = '#FD0'; + ctx.fillStyle = "#FD0"; ctx.fillRect(0, 0, 75, 75); - ctx.fillStyle = '#6C0'; + ctx.fillStyle = "#6C0"; ctx.fillRect(75, 0, 75, 75); - ctx.fillStyle = '#09F'; + ctx.fillStyle = "#09F"; ctx.fillRect(0, 75, 75, 75); - ctx.fillStyle = '#F30'; + ctx.fillStyle = "#F30"; ctx.fillRect(75, 75, 75, 75); - ctx.fillStyle = '#FFF'; + ctx.fillStyle = "#FFF"; // set transparency value ctx.globalAlpha = 0.2; @@ -159,21 +167,21 @@ Neste segundo exemplo, fazemos algo semelhante ao anterior, mas em vez de desenh ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); // Draw background - ctx.fillStyle = 'rgb(255, 221, 0)'; + ctx.fillStyle = "rgb(255, 221, 0)"; ctx.fillRect(0, 0, 150, 37.5); - ctx.fillStyle = 'rgb(102, 204, 0)'; + ctx.fillStyle = "rgb(102, 204, 0)"; ctx.fillRect(0, 37.5, 150, 37.5); - ctx.fillStyle = 'rgb(0, 153, 255)'; + ctx.fillStyle = "rgb(0, 153, 255)"; ctx.fillRect(0, 75, 150, 37.5); - ctx.fillStyle = 'rgb(255, 51, 0)'; + 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 + ')'; + 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); } @@ -222,7 +230,7 @@ No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linhas cresce ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); for (var i = 0; i < 10; i++) { ctx.lineWidth = 1 + i; ctx.beginPath(); @@ -276,11 +284,11 @@ A linha à esquerda usa a opção de topo padrão. Você notará que está desen ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var lineCap = ['butt', 'round', 'square']; + var ctx = document.getElementById("canvas").getContext("2d"); + var lineCap = ["butt", "round", "square"]; // Draw guides - ctx.strokeStyle = '#09f'; + ctx.strokeStyle = "#09f"; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(140, 10); @@ -289,7 +297,7 @@ function draw() { ctx.stroke(); // Draw lines - ctx.strokeStyle = 'black'; + ctx.strokeStyle = "black"; for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; @@ -328,8 +336,8 @@ O exemplo abaixo desenha três caminhos diferentes, demonstrando cada uma dessas ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var lineJoin = ['round', 'bevel', 'miter']; + 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]; @@ -374,32 +382,32 @@ Se você especificar um valor de miterLimite abaixo de 4.2 nesta demonstração, ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); // Clear canvas ctx.clearRect(0, 0, 150, 150); // Draw guides - ctx.strokeStyle = '#09f'; - ctx.lineWidth = 2; + ctx.strokeStyle = "#09f"; + ctx.lineWidth = 2; ctx.strokeRect(-5, 50, 160, 50); // Set line styles - ctx.strokeStyle = '#000'; + ctx.strokeStyle = "#000"; ctx.lineWidth = 10; // check input - if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { - ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); + if (document.getElementById("miterLimit").value.match(/\d+(\.\d+)?/)) { + ctx.miterLimit = parseFloat(document.getElementById("miterLimit").value); } else { - alert('Value must be a positive number'); + 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 ; + 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(); @@ -411,11 +419,13 @@ function draw() { - @@ -423,7 +433,9 @@ function draw() { ``` ```js hidden -document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +document.getElementById("miterLimit").value = document + .getElementById("canvas") + .getContext("2d").miterLimit; draw(); ``` @@ -440,7 +452,7 @@ Neste exemplo, criaremos um efeito de formigas caminhando. É uma técnica de an ``` ```js -var ctx = document.getElementById('canvas').getContext('2d'); +var ctx = document.getElementById("canvas").getContext("2d"); var offset = 0; function draw() { @@ -489,8 +501,8 @@ You can add as many color stops to a gradient as you need. Below is a very simpl ```js var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); -lineargradient.addColorStop(0, 'white'); -lineargradient.addColorStop(1, 'black'); +lineargradient.addColorStop(0, "white"); +lineargradient.addColorStop(1, "black"); ``` ### A `createLinearGradient` example @@ -499,18 +511,18 @@ In this example, we'll create two different gradients. As you can see here, both ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + 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'); + 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)'); + lingrad2.addColorStop(0.5, "#000"); + lingrad2.addColorStop(1, "rgba(0, 0, 0, 0)"); // assign gradients to fill and stroke styles ctx.fillStyle = lingrad; @@ -519,7 +531,6 @@ function draw() { // draw shapes ctx.fillRect(10, 10, 130, 130); ctx.strokeRect(50, 50, 50, 50); - } ``` @@ -543,28 +554,28 @@ In this example, we'll define four different radial gradients. Because we have c ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + 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)'); + 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)'); + 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)'); + 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)'); + radgrad4.addColorStop(0, "#F4F201"); + radgrad4.addColorStop(0.8, "#E4C700"); + radgrad4.addColorStop(1, "rgba(228, 199, 0, 0)"); // draw shapes ctx.fillStyle = radgrad4; @@ -614,8 +625,8 @@ We use this method to create a {{domxref("CanvasPattern")}} object which is very ```js var img = new Image(); -img.src = 'someimage.png'; -var ptrn = ctx.createPattern(img, 'repeat'); +img.src = "someimage.png"; +var ptrn = ctx.createPattern(img, "repeat"); ``` > **Nota:** Like with the `drawImage()` method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly. @@ -626,19 +637,17 @@ In this last example, we'll create a pattern to assign to the `fillStyle` proper ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); // create new image object to use as pattern var img = new Image(); - img.src = 'canvas_createpattern.png'; - img.onload = function() { - + img.src = "canvas_createpattern.png"; + img.onload = function () { // create pattern - var ptrn = ctx.createPattern(img, 'repeat'); + var ptrn = ctx.createPattern(img, "repeat"); ctx.fillStyle = ptrn; ctx.fillRect(0, 0, 150, 150); - - } + }; } ``` @@ -679,16 +688,16 @@ This example draws a text string with a shadowing effect. ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + 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.shadowColor = "rgba(0, 0, 0, 0.5)"; - ctx.font = '20px Times New Roman'; - ctx.fillStyle = 'Black'; - ctx.fillText('Sample String', 5, 30); + ctx.font = "20px Times New Roman"; + ctx.fillStyle = "Black"; + ctx.fillText("Sample String", 5, 30); } ``` @@ -719,11 +728,11 @@ In this example we are using the `evenodd` rule. ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + 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'); + ctx.fill("evenodd"); } ``` diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.md b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.md index 91312d9cc533e6..8fec2af7ea1af0 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.md @@ -13,13 +13,13 @@ Provavelmente a maior limitação é que uma vez que uma forma é desenhada, ela Estes são os passos que você precisa para desenhar um frame: 1. **Limpe o canvas** - 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(). + 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(). 2. **Salve o estado da tela** - 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. + 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. 3. **Desenhe formas animadas** - A etapa em que você faz a renderização real do quadro. + A etapa em que você faz a renderização real do quadro. 4. **Restaure o estado do canvas** - Se você salvou o estado, restaure-o antes de desenhar um novo quadro. + Se você salvou o estado, restaure-o antes de desenhar um novo quadro. ## Controlando uma animação @@ -66,45 +66,51 @@ Esse exemplo anima um pequeno modelo do nosso sistema solar. var sun = new Image(); var moon = new Image(); var earth = new Image(); -function init(){ - sun.src = 'canvas_sun.png'; - moon.src = 'canvas_moon.png'; - earth.src = 'canvas_earth.png'; - setInterval(draw,100); +function init() { + sun.src = "canvas_sun.png"; + moon.src = "canvas_moon.png"; + earth.src = "canvas_earth.png"; + setInterval(draw, 100); } function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); - ctx.globalCompositeOperation = 'destination-over'; - ctx.clearRect(0,0,300,300); // clear canvas + 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.fillStyle = "rgba(0,0,0,0.4)"; + ctx.strokeStyle = "rgba(0,153,255,0.4)"; ctx.save(); - ctx.translate(150,150); + 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); + 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.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.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit ctx.stroke(); - ctx.drawImage(sun,0,0,300,300); + ctx.drawImage(sun, 0, 0, 300, 300); } ``` @@ -123,19 +129,19 @@ init(); Esse exemplos desenha um relógio animado, mostrando sua hora atual. ```js -function init(){ +function init() { clock(); - setInterval(clock,1000); + setInterval(clock, 1000); } -function clock(){ +function clock() { var now = new Date(); - var ctx = document.getElementById('canvas').getContext('2d'); + 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.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; @@ -143,11 +149,11 @@ function clock(){ // Hour marks ctx.save(); - for (var i=0;i<12;i++){ + for (var i = 0; i < 12; i++) { ctx.beginPath(); - ctx.rotate(Math.PI/6); - ctx.moveTo(100,0); - ctx.lineTo(120,0); + ctx.rotate(Math.PI / 6); + ctx.moveTo(100, 0); + ctx.lineTo(120, 0); ctx.stroke(); } ctx.restore(); @@ -155,69 +161,71 @@ function clock(){ // Minute marks ctx.save(); ctx.lineWidth = 5; - for (i=0;i<60;i++){ - if (i%5!=0) { + for (i = 0; i < 60; i++) { + if (i % 5 != 0) { ctx.beginPath(); - ctx.moveTo(117,0); - ctx.lineTo(120,0); + ctx.moveTo(117, 0); + ctx.lineTo(120, 0); ctx.stroke(); } - ctx.rotate(Math.PI/30); + 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; + 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.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.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.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec); ctx.lineWidth = 10; ctx.beginPath(); - ctx.moveTo(-28,0); - ctx.lineTo(112,0); + ctx.moveTo(-28, 0); + ctx.lineTo(112, 0); ctx.stroke(); ctx.restore(); // Write seconds ctx.save(); - ctx.rotate(sec * Math.PI/30); + 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.moveTo(-30, 0); + ctx.lineTo(83, 0); ctx.stroke(); ctx.beginPath(); - ctx.arc(0,0,10,0,Math.PI*2,true); + 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.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.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.strokeStyle = "#325FA2"; + ctx.arc(0, 0, 142, 0, Math.PI * 2, true); ctx.stroke(); ctx.restore(); @@ -244,7 +252,7 @@ var img = new Image(); // User Variables - customize these to change the image being scrolled, its // direction, and the speed. -img.src = 'capitan_meadows,_yosemite_national_park.jpg'; +img.src = "capitan_meadows,_yosemite_national_park.jpg"; var CanvasXSize = 800; var CanvasYSize = 200; var speed = 30; //lower is faster @@ -261,41 +269,59 @@ 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); -} +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); } + //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; } - //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 aditional image + if (x > CanvasXSize - imgW) { + ctx.drawImage(img, x - CanvasXSize + 1, y, imgW, imgH); } - //draw image - ctx.drawImage(img,x,y,imgW,imgH); - //amount to move - x += dx; + } + //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; } ``` diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.md b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.md index 933539fc6697b3..a5da3ae06de68d 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.md @@ -36,7 +36,7 @@ Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estátic - + ``` @@ -55,8 +55,8 @@ Se o conteúdo alternativo não for necessário, um simples ` Canvas tutorial @@ -114,25 +116,25 @@ Para começar, vamos dar uma olhada num exemplo simples que desenha a interseç ```html - - - - - - + + + + + ``` diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.md b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.md index a793c8d72343a3..bf0a03d57678df 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.md @@ -17,40 +17,62 @@ Este código configura os valores globais usados pelo restante do programa. ```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 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 = [ -'Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente.', -'A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem. Todo o resto é transparente. ', -'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.', -'Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior. Uma imagem mais escura é o resultado. ', -'Os pixels são invertidos, multiplicados e invertidos novamente. Uma imagem mais clara é o resultado (oposto de multiplicar)', -'Uma combinação de multiplicação e tela. As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.', -'Mantêm os pixels mais escuro de ambas camadas.', -'Mantêm os pixels mais claro de ambas camadas.', -'Divide a camada inferior pela camada superior invertida.', -'Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.', -'Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.', -'Uma versão mais suave da luz. Preto ou branco puro não resulta em preto ou branco puro.', -'Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.', -'Como diferença, mas com menor contraste.', -'Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.', -'Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.', -'Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.', -'Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.' - ].reverse(); + "Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente.", + "A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem. Todo o resto é transparente. ", + "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.", + "Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior. Uma imagem mais escura é o resultado. ", + "Os pixels são invertidos, multiplicados e invertidos novamente. Uma imagem mais clara é o resultado (oposto de multiplicar)", + "Uma combinação de multiplicação e tela. As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.", + "Mantêm os pixels mais escuro de ambas camadas.", + "Mantêm os pixels mais claro de ambas camadas.", + "Divide a camada inferior pela camada superior invertida.", + "Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.", + "Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.", + "Uma versão mais suave da luz. Preto ou branco puro não resulta em preto ou branco puro.", + "Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.", + "Como diferença, mas com menor contraste.", + "Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.", + "Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.", + "Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.", + "Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.", +].reverse(); var width = 320; var height = 340; ``` @@ -60,22 +82,22 @@ var height = 340; Quando a página é carregada, esse código é executado para configurar e executar o exemplo: ```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; +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; }; ``` @@ -83,75 +105,75 @@ E esse código, `runComposite ()`, manipula a maior parte do trabalho, contando ```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; + 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 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 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 = 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 = 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(); + 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); + dd.appendChild(canvasToDrawOn); + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); - dl.appendChild(dd); - } -}; + dl.appendChild(dd); + } +} ``` ### Funções Utilitárias @@ -159,60 +181,68 @@ function runComposite() { O programa depende de várias funções utilitárias. ```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(); +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(); }; ``` ```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)); - } +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.fillStyle = "#00f"; - ctx.fillRect(15,15,30,30) + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; ctx.fill(); - return ctx.canvas; + 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; }; ``` @@ -222,76 +252,78 @@ var colorSphere = function(element) { // 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; - } + 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 - }; + } + 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 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"); diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/index.md b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.md index 0831d5ba8da243..553bc4508fa54b 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/compositing/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.md @@ -42,7 +42,7 @@ Neste exemplo, Nós usaremos um recorte circular para restringir o desenho do co ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); ctx.fillRect(0, 0, 150, 150); ctx.translate(75, 75); @@ -53,8 +53,8 @@ function draw() { // draw background var lingrad = ctx.createLinearGradient(0, -75, 0, 75); - lingrad.addColorStop(0, '#232256'); - lingrad.addColorStop(1, '#143778'); + lingrad.addColorStop(0, "#232256"); + lingrad.addColorStop(1, "#143778"); ctx.fillStyle = lingrad; ctx.fillRect(-75, -75, 150, 150); @@ -62,13 +62,14 @@ function draw() { // 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)); + 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) { diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.md index aa6b748fae691a..23a62d44d545bc 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -33,17 +33,17 @@ Abaixo esta listado a função `draw()` da página anterior, porém utilizando a ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); + var canvas = document.getElementById("canvas"); if (canvas.getContext) { - var ctx = canvas.getContext('2d'); + var ctx = canvas.getContext("2d"); ctx.fillRect(25, 25, 100, 100); ctx.clearRect(45, 45, 60, 60); @@ -93,22 +93,22 @@ Por exemplo, o código para desenhar um triângulo seria algo parecido com isto: ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext){ - var ctx = canvas.getContext('2d'); + 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.moveTo(75, 50); + ctx.lineTo(100, 75); + ctx.lineTo(100, 25); ctx.fill(); } } @@ -131,26 +131,26 @@ Caso queira tentar fazer isso, você pode usar o snippet de código abaixo. Bast ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); + var canvas = document.getElementById("canvas"); if (canvas.getContext) { - var ctx = canvas.getContext('2d'); + 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.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.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.arc(90, 65, 5, 0, Math.PI * 2, true); // Olho direito ctx.stroke(); } } @@ -177,30 +177,30 @@ O exemplo abaixo desenha dois triângulos, um preenchido e um delineado. ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext){ - var ctx = canvas.getContext('2d'); + 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.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.moveTo(125, 125); + ctx.lineTo(125, 45); + ctx.lineTo(45, 125); ctx.closePath(); ctx.stroke(); } @@ -238,31 +238,31 @@ A manipulação do parâmetro `clockwise` faz com que a primeira e terceira linh ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext){ - var ctx = canvas.getContext('2d'); + 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++){ + 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 + 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){ + if (i > 1) { ctx.fill(); } else { ctx.stroke(); @@ -298,27 +298,27 @@ Este exemplo usa múltiplas curvas de Bézier quadráticas para renderizar um ba ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); + var canvas = document.getElementById("canvas"); if (canvas.getContext) { - var ctx = canvas.getContext('2d'); + 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.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(); } } @@ -332,27 +332,27 @@ Este exemplo desenha um coração usando curvas de Bézier cúbicas. ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext){ - var ctx = canvas.getContext('2d'); + 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.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(); } } @@ -375,94 +375,94 @@ Até agora, em cada exemplo dessa página foi usada apenas um tipo de função d ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext){ - var ctx = canvas.getContext('2d'); + 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); + 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.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 (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 < 6; i++) { + ctx.fillRect(115, 51 + i * 16, 4, 4); } - for(i=0;i<8;i++){ - ctx.fillRect(51+i*16,99,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.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.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.arc(101, 102, 2, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); - ctx.arc(89,102,2,0,Math.PI*2,true); + 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){ +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.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(); } ``` @@ -484,9 +484,9 @@ Vamos ver como podemos construir um objeto de `Path2D`: - : O construtor de **`Path2D()`** retorna um objeto `Path2D` instanciado recentemente, opcionalmente através de um outro objeto `Path2D` como argumento (cria uma cópia) ou, opcionalmente, com uma _string_ que representam dados de [_paths_ em SVG](/pt-BR/docs/Web/SVG/Tutorial/Paths). ```js -new Path2D(); // objeto vazio de Path2D +new Path2D(); // objeto vazio de Path2D new Path2D(path); // cópia de outro objeto de Path2D -new Path2D(d); // objeto criado a partir de paths em SVG +new Path2D(d); // objeto criado a partir de paths em SVG ``` Todos os [métodos de caminho (path methods)](/pt-BR/docs/Web/API/CanvasRenderingContext2D#Paths) como `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que temos de saber acima, estão disponíveis em `Path2D`. @@ -502,17 +502,17 @@ Neste exemplo, estamos criando um retângulo e um círculo. Ambos são armazenad ```html hidden - - - + + + ``` ```js function draw() { - var canvas = document.getElementById('canvas'); + var canvas = document.getElementById("canvas"); if (canvas.getContext) { - var ctx = canvas.getContext('2d'); + var ctx = canvas.getContext("2d"); var rectangle = new Path2D(); rectangle.rect(10, 10, 50, 50); @@ -536,7 +536,7 @@ Outro recurso poderoso da nova API de Path2D é a utilização de dados de _path O caminho se moverá para o ponto `(M10 10)` e então se moverá horizontalmente 80 pontos para a direita `(h 80)`, depois 80 pontos para baixo `(v 80)`, então 80 pontos para a esquerda (h -80) e, por fim, volta para o início (`z`). Você pode ver este exemplo na página do [construtor do Path2D](/pt-BR/docs/Web/API/Path2D.Path2D#Using_SVG_paths). ```js -var p = new Path2D('M10 10 h 80 v 80 h -80 Z'); +var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); ``` {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}} diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.md b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.md index 04287b102fa4e7..ae5757dc61c275 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.md @@ -23,9 +23,9 @@ O texto a seguir é rederizado utilizando `fillStyle`. ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - ctx.font = '48px serif'; - ctx.fillText('Hello world', 10, 50); + var ctx = document.getElementById("canvas").getContext("2d"); + ctx.font = "48px serif"; + ctx.fillText("Hello world", 10, 50); } ``` @@ -45,9 +45,9 @@ O texto é preenchido usando o strokeStyle atual. ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - ctx.font = '48px serif'; - ctx.strokeText('Hello world', 10, 50); + var ctx = document.getElementById("canvas").getContext("2d"); + ctx.font = "48px serif"; + ctx.strokeText("Hello world", 10, 50); } ``` @@ -92,9 +92,9 @@ baselines, due to glyphs extending far outside the em square.](http://www.whatwg Edite o código abaixo e veja as atualizações em tempo real no canvas. ```js -ctx.font = '48px serif'; -ctx.textBaseline = 'hanging'; -ctx.strokeText('Hello world', 0, 100); +ctx.font = "48px serif"; +ctx.textBaseline = "hanging"; +ctx.strokeText("Hello world", 0, 100); ``` ```html hidden @@ -106,15 +106,16 @@ ctx.strokeText('Hello world', 0, 100); +ctx.strokeText("Hello world", 0, 100); ``` ```js hidden -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 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() { @@ -122,17 +123,17 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener('click', function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener('click', function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); -textarea.addEventListener('input', drawCanvas); -window.addEventListener('load', drawCanvas); +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); ``` {{ EmbedLiveSample('Playable_code', 700, 360) }} @@ -148,8 +149,8 @@ The following code snippet shows how you can measure a text and get its width. ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var text = ctx.measureText('foo'); // TextMetrics object + var ctx = document.getElementById("canvas").getContext("2d"); + var text = ctx.measureText("foo"); // TextMetrics object text.width; // 16; } ``` diff --git a/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 959409f8d34ecf..151cb0243e3ff2 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -17,10 +17,10 @@ O que segue é uma coleção de dicas para melhorar a performance. 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. ```js -myEntity.offscreenCanvas = document.createElement('canvas'); +myEntity.offscreenCanvas = document.createElement("canvas"); myEntity.offscreenCanvas.width = myEntity.width; myEntity.offscreenCanvas.height = myEntity.height; -myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d'); +myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d"); myEntity.render(myEntity.offscreenContext); ``` @@ -57,12 +57,20 @@ For example you could create a UI layer that sits on top of everything and is on width: 480px; height: 320px; position: relative; - border: 2px solid black + border: 2px solid black; + } + canvas { + position: absolute; + } + #ui-layer { + z-index: 3; + } + #game-layer { + z-index: 2; + } + #background-layer { + z-index: 1; } - canvas { position: absolute; } - #ui-layer { z-index: 3 } - #game-layer { z-index: 2 } - #background-layer { z-index: 1 } ``` @@ -81,8 +89,8 @@ 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 + ')'; +stage.style.transformOrigin = "0 0"; //scale from top left +stage.style.transform = "scale(" + scaleToFit + ")"; ``` ### Turn off transparency @@ -90,7 +98,7 @@ stage.style.transform = 'scale(' + scaleToFit + ')'; If your game uses canvas and doesn't need to be transparent, set the `alpha` option to `false` when creating a drawing context with [`HTMLCanvasElement.getContext()`](/pt-BR/docs/Web/API/HTMLCanvasElement/getContext). This information can be used internally to optimize rendering. ```js -var ctx = canvas.getContext('2d', { alpha: false }); +var ctx = canvas.getContext("2d", { alpha: false }); ``` ### More tips diff --git a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.md b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.md index b482d635dede6f..46ff092c4b1063 100644 --- a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.md +++ b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.md @@ -55,8 +55,8 @@ One of the more practical uses of this would be to use a second canvas element a Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient `Image()` constructor: ```js -var img = new Image(); // Create new img element -img.src = 'myImage.png'; // Set source path +var img = new Image(); // Create new img element +img.src = "myImage.png"; // Set source path ``` When this script gets executed, the image starts loading. @@ -64,11 +64,15 @@ When this script gets executed, the image starts loading. If you try to call `drawImage()` 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: ```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 +var img = new Image(); // Create new img element +img.addEventListener( + "load", + function () { + // execute drawImage statements here + }, + false, +); +img.src = "myImage.png"; // Set source path ``` 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. @@ -78,8 +82,9 @@ If you're only using one external image this can be a good approach, but once yo Another possible way to include images is via the [data: url](/pt-BR/docs/Web/HTTP/data_URIs). Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code. ```js -var img = new Image(); // Create new img element -img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; +var img = new Image(); // Create new img element +img.src = + "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=="; ``` 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 [CSS](/pt-BR/docs/Web/CSS), [JavaScript](/pt-BR/docs/Web/JavaScript), [HTML](/pt-BR/docs/Web/HTML), and images, making it more portable to other locations. @@ -92,11 +97,11 @@ You can also use frames from a video being presented by a {{HTMLElement("video") ```js function getMyVideo() { - var canvas = document.getElementById('canvas'); + var canvas = document.getElementById("canvas"); if (canvas.getContext) { - var ctx = canvas.getContext('2d'); + var ctx = canvas.getContext("2d"); - return document.getElementById('myvideo'); + return document.getElementById("myvideo"); } } ``` @@ -118,17 +123,17 @@ In the following example, we will use an external image as the backdrop for a sm ```html hidden - - - + + + ``` ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); var img = new Image(); - img.onload = function() { + img.onload = function () { ctx.drawImage(img, 0, 0); ctx.beginPath(); ctx.moveTo(30, 96); @@ -137,7 +142,7 @@ function draw() { ctx.lineTo(170, 15); ctx.stroke(); }; - img.src = 'backdrop.png'; + img.src = "backdrop.png"; } ``` @@ -160,24 +165,24 @@ In this example, we'll use an image as a wallpaper and repeat it several times o ```html hidden - - - + + + ``` ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); var img = new Image(); - img.onload = function() { + 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 = 'rhino.jpg'; + img.src = "rhino.jpg"; } ``` @@ -202,27 +207,36 @@ In this example, we'll use the same rhino as in the previous example, but we'll ```html - - -
- - -
- + + +
+ + +
+ ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - var ctx = canvas.getContext('2d'); + 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); + ctx.drawImage( + document.getElementById("source"), + 33, + 71, + 104, + 124, + 21, + 20, + 87, + 104, + ); // Draw frame - ctx.drawImage(document.getElementById('frame'), 0, 0); + ctx.drawImage(document.getElementById("frame"), 0, 0); } ``` @@ -242,23 +256,23 @@ The code below should be self-explanatory. We loop through the {{domxref("docume ```html - -
Change the miterLimit by entering a new value below and clicking the redraw button.

+ 		+ Change the miterLimit by entering a new value below and + clicking the redraw button.

- - + +
+ +
- - - - + + + + - - - - + + + + -
- - + + + ``` @@ -266,7 +280,7 @@ And here's some CSS to make things look nice: ```css body { - background: 0 -100px repeat-x url(bg_gallery.png) #4F191A; + background: 0 -100px repeat-x url(bg_gallery.png) #4f191a; margin: 10px; } @@ -287,28 +301,25 @@ Tying it all together is the JavaScript to draw our framed images: ```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') { - + if (document.images[i].getAttribute("id") != "frame") { // Create canvas element - canvas = document.createElement('canvas'); - canvas.setAttribute('width', 132); - canvas.setAttribute('height', 150); + 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]); + document.images[i].parentNode.insertBefore(canvas, document.images[i]); - ctx = canvas.getContext('2d'); + ctx = canvas.getContext("2d"); // Draw image to canvas ctx.drawImage(document.images[i], 15, 20); // Add frame - ctx.drawImage(document.getElementById('frame'), 0, 0); + ctx.drawImage(document.getElementById("frame"), 0, 0); } } } diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.md index fbfaea6e362d20..24dc4625dcf41b 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.md @@ -47,8 +47,8 @@ O exemplo desenha um círculo completo com o método `arc()`. O arco recebe 100 como uma coordenada x, e 75 como uma coordenada y e um raio de 50. para fazer um círculo completo, o arco inicia no ângulo 0 (0º) em radianos e finaliza em um ângulo de 2π radianos (360**°**). ```js -const canvas = document.querySelector('canvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.querySelector("canvas"); +const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); @@ -68,19 +68,19 @@ Este exemplo desenha diversas formas para mostrar o que é possível fazer com o ``` ```js -const canvas = document.querySelector('canvas'); -const ctx = canvas.getContext('2d'); +const canvas = document.querySelector("canvas"); +const ctx = canvas.getContext("2d"); // Draw shapes for (let i = 0; i <= 3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginPath(); - let x = 25 + j * 50; // coordenada x - let y = 25 + i * 50; // coordenada y - let radius = 20; // raio - let startAngle = 0; // angulo inicial - let endAngle = Math.PI + (Math.PI * j) / 2; // angulo final - let anticlockwise = i % 2 == 1; // sentido anti-horário + let x = 25 + j * 50; // coordenada x + let y = 25 + i * 50; // coordenada y + let radius = 20; // raio + let startAngle = 0; // angulo inicial + let endAngle = Math.PI + (Math.PI * j) / 2; // angulo final + let anticlockwise = i % 2 == 1; // sentido anti-horário ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); @@ -99,13 +99,11 @@ for (let i = 0; i <= 3; i++) { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.arc")}} +{{Compat}} ## Veja mais diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.md index cb04fd1a1a307b..1744e3f8bc5db2 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.md @@ -49,20 +49,20 @@ Esse é um trecho simples de código que desenha um arco. O ponto de partida é #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150, 100, 50, 20, 30); -ctx.lineTo(50, 20) +ctx.lineTo(50, 20); ctx.stroke(); -ctx.fillStyle = 'blue'; +ctx.fillStyle = "blue"; // starting point ctx.fillRect(150, 20, 10, 10); -ctx.fillStyle = 'red'; +ctx.fillStyle = "red"; // control point one ctx.fillRect(150, 100, 10, 10); // control point two @@ -85,7 +85,8 @@ Altere o código abaixo e veja suas alterações atualizadas na tela: ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150,100,50,100,20); -ctx.stroke(); +ctx.stroke(); ``` ```js hidden @@ -101,14 +102,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -118,13 +119,11 @@ window.addEventListener("load", drawCanvas); ## Espeficicações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.arcTo")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.md index 83a74b27966921..59c4878cb401fb 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -28,19 +28,19 @@ Isto é só um simples trecho de código que usa o método `fillRect`. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); // Primeiro path ctx.beginPath(); -ctx.strokeStyle = 'blue'; +ctx.strokeStyle = "blue"; ctx.moveTo(20, 20); ctx.lineTo(200, 20); ctx.stroke(); // Segundo path ctx.beginPath(); -ctx.strokeStyle = 'green'; +ctx.strokeStyle = "green"; ctx.moveTo(20, 20); ctx.lineTo(120, 120); ctx.stroke(); @@ -67,7 +67,8 @@ ctx.beginPath(); ctx.strokeStyle = 'green'; ctx.moveTo(20,20); ctx.lineTo(120, 120); -ctx.stroke(); +ctx.stroke(); ``` ```js hidden @@ -83,14 +84,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -100,13 +101,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.beginPath")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.md index 90cd3e3eabc650..a87df3c8a0bd66 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -43,8 +43,8 @@ Isto é só um simples trecho de código que usa o método `clearRect`. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); @@ -75,7 +75,8 @@ ctx.lineTo(120,120); ctx.closePath(); // draws last line of the triangle ctx.stroke(); -ctx.clearRect(10, 10, 100, 100); +ctx.clearRect(10, 10, 100, 100); ``` ```js hidden @@ -91,14 +92,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -108,13 +109,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.clearRect")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.md index 3a62f61ea9fb63..f76e83a83c5c4c 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.md @@ -51,10 +51,10 @@ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // Cria uma região de recorte -ctx.arc(100, 100, 75, 0, Math.PI*2, false); +ctx.arc(100, 100, 75, 0, Math.PI * 2, false); ctx.clip(); -ctx.fillRect(0, 0, 100,100); +ctx.fillRect(0, 0, 100, 100); ``` Edite o código abaixo e veja suas mudanças atualizadas ao vivo no canvas: @@ -68,7 +68,8 @@ Edite o código abaixo e veja suas mudanças atualizadas ao vivo no canvas: +ctx.fillRect(0, 0, 100,100); ``` ```js hidden @@ -84,14 +85,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -103,13 +104,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clip", "CanvasRenderingContext2D.clip")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.clip")}} +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.md index a756dce78c57c1..ccc33c8769e765 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.md @@ -28,8 +28,8 @@ Isto é só um simples trecho de código que usa o método `fillRect`. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); @@ -53,7 +53,8 @@ ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); // draws last line of the triangle -ctx.stroke(); +ctx.stroke(); ``` ```js hidden @@ -69,14 +70,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -86,13 +87,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.closePath")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.md index ffe0739b8b63ab..876205d832b117 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.md @@ -45,8 +45,8 @@ Isto é só um simples trecho de código que usa o métod `fill` para contornar #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.rect(10, 10, 100, 100); ctx.fill(); ``` @@ -61,7 +61,8 @@ Edite o código abaixo e veja as alterações instantâneas no canvas: +ctx.fill(); ``` ```js hidden @@ -77,14 +78,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -94,13 +95,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.fill")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.md index ba56a01e76c345..3be9087fe51fb3 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -39,9 +39,9 @@ Isto é só um simples trecho de código que usa o método `fillRect`. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -ctx.fillStyle = 'green'; +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); // preenche todo o canvas @@ -58,7 +58,8 @@ Edite o código abaixo e veja as alterações instantâneas no canvas: +ctx.fillRect(10, 10, 100, 100); ``` ```js hidden @@ -74,14 +75,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -91,13 +92,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.fillRect")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.md index 99b731155dcc79..c78d8df0aa6bdc 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -41,10 +41,10 @@ Isto é apenas um trecho de código simples usando a propriedade `fillStyle` par #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); -ctx.fillStyle = 'blue'; +ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 100, 100); ``` @@ -58,15 +58,16 @@ Edite o código abaixo e veja as alterações atualizadas na tela: +ctx.fillRect(10, 10, 100, 100); ``` ```js hidden -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 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() { @@ -74,17 +75,17 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener('click', function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener('click', function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); -textarea.addEventListener('input', drawCanvas); -window.addEventListener('load', drawCanvas); +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); ``` {{ EmbedLiveSample('Playable_code', 700, 360) }} @@ -98,11 +99,15 @@ Neste exemplo, nós usamos dois laços `for` para desenhar uma grade de retângu ``` ```js -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)'; +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); } } @@ -114,24 +119,11 @@ O resultado fica assim: ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibibidade com o Navegador -{{Compat("api.CanvasRenderingContext2D.fillStyle")}} - -## Notas específicas doWebKit/Blink - -- Nos navegadores baseados em WebKit e Blink, além da propriedade `fillStyle`, o método não padrão e obsoleto `ctx.setFillColor()` é implementado. - - ```js - setFillColor(color, optional alpha); - setFillColor(grayLevel, optional alpha); - setFillColor(r, g, b, a); - setFillColor(c, m, y, k, a); - ``` +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/index.md index 43562a0b05fee8..06763129a8c5fc 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/index.md @@ -8,15 +8,15 @@ slug: Web/API/CanvasRenderingContext2D Para obter um objeto desta interface, chama-se {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} em um `elemento `, adicionando "2d" como argumento, veja o exemplo abaixo: ```js -var canvas = document.getElementById('meuCanvas'); // em seu HTML esse elemento se parece com -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("meuCanvas"); // em seu HTML esse elemento se parece com +var ctx = canvas.getContext("2d"); ``` Agora que você possui o contexto de renderização 2D, você pode desenhar dentro deste canvas. Por exemplo: ```js ctx.fillStyle = "rgb(200,0,0)"; // define a cor de preenchimento do retângulo -ctx.fillRect(10, 10, 55, 50); // desenha o retângulo na posição 10, 10 com 55 pixels de largura e uma altura de 50 +ctx.fillRect(10, 10, 55, 50); // desenha o retângulo na posição 10, 10 com 55 pixels de largura e uma altura de 50 ``` Veja as propriedades e métodos no menu lateral e abaixo. O [tutorial canvas](/pt-BR/docs/Web/API/Canvas_API/Tutorial) tem mais informações, exemplos e recursos. @@ -303,24 +303,13 @@ Most of these APIs are [deprecated and will be removed in the future](https://co - {{non-standard_inline}} `CanvasRenderingContext2D.demote()` - : This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved. -### Internet Explorer - -- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` - - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). - ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D")}} - -## Compatibility notes - -- Starting with Gecko 5.0, specifying invalid values are now silently ignored for the following methods and properties: `translate()`, `transform()`, `rotate()`, `scale()`, `rect()`, `clearRect()`, `fillRect()`, `strokeRect()`, `lineTo()`, `moveTo()`, `quadraticCurveTo()`, `arc()`, `shadowOffsetX`, `shadowOffsetY`, `shadowBlur`. +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.md index b647f9951322d1..3a4c6ed0287b17 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.md @@ -35,8 +35,8 @@ sto é só um simples trecho de código que usa o método `lineTo`. Use o {{domx #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); @@ -56,7 +56,8 @@ Edite o código abaixo e veja as alterações instantâneas no canvas: ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(100, 100); -ctx.stroke(); +ctx.stroke(); ``` ```js hidden @@ -72,14 +73,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -89,13 +90,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.lineTo")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.md index bfe7a3899fe3bc..774a79a4098f57 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.md @@ -35,8 +35,8 @@ Isto é só um simples trecho de código que usa o método `moveTo` para mover a #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); @@ -56,7 +56,8 @@ Edite o código abaixo e veja as alterações instantâneas no canvas: ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(200, 50); -ctx.stroke() +ctx.stroke() ``` ```js hidden @@ -72,14 +73,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -89,13 +90,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.moveTo")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index 7d5d94a4425f33..8d89f3f20cf95b 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -39,21 +39,21 @@ This is just a simple code snippet drawing a quadratic bezier curve. The control #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.beginPath(); -ctx.moveTo(50,20); +ctx.moveTo(50, 20); ctx.quadraticCurveTo(230, 30, 50, 100); ctx.stroke(); -ctx.fillStyle = 'blue'; +ctx.fillStyle = "blue"; // start point ctx.fillRect(50, 20, 10, 10); // end point ctx.fillRect(50, 100, 10, 10); -ctx.fillStyle = 'red'; +ctx.fillStyle = "red"; // control point ctx.fillRect(230, 30, 10, 10); ``` @@ -74,7 +74,8 @@ Edit the code below and see your changes update live in the canvas: ctx.beginPath(); ctx.moveTo(50,20); ctx.quadraticCurveTo(230, 30, 50, 100); -ctx.stroke(); +ctx.stroke(); ``` ```js hidden @@ -90,14 +91,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -107,13 +108,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.md index 3232f59efaee2d..9a032ca6dd20ce 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.md @@ -39,8 +39,8 @@ Isto é somente um simples fragmentode código que usa o método `rect` para cri #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.rect(10, 10, 100, 100); ctx.fill(); ``` @@ -55,7 +55,8 @@ Edite o código abaixo e veja as alterações instantâneas no canvas: +ctx.fill(); ``` ```js hidden @@ -71,14 +72,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -88,13 +89,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.rect")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.md index e6d837c702b148..470f71302904f1 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.md @@ -34,8 +34,8 @@ Isto é só um simples trecho de código que usa o método `stroke` para contorn #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); ctx.rect(10, 10, 100, 100); ctx.stroke(); ``` @@ -50,7 +50,8 @@ Edite o código abaixo e veja as alterações instantâneas no canvas: +ctx.stroke(); ``` ```js hidden @@ -66,14 +67,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -83,13 +84,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.stroke")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.md index 1590f208007227..b78b26a4288c4e 100644 --- a/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -39,10 +39,10 @@ Isto é só um simples trecho de código que usa o método `strokeRect`. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); -ctx.strokeStyle = 'green'; +ctx.strokeStyle = "green"; ctx.strokeRect(10, 10, 100, 100); ``` @@ -56,7 +56,8 @@ Edite o código abaixo e veja as alterações instantâneas no canvas: +ctx.strokeRect(10, 10, 100, 100); ``` ```js hidden @@ -72,14 +73,14 @@ function drawCanvas() { eval(textarea.value); } -reset.addEventListener("click", function() { +reset.addEventListener("click", function () { textarea.value = code; drawCanvas(); }); -edit.addEventListener("click", function() { +edit.addEventListener("click", function () { textarea.focus(); -}) +}); textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); @@ -89,13 +90,11 @@ window.addEventListener("load", drawCanvas); ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CanvasRenderingContext2D.strokeRect")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/characterdata/index.md b/files/pt-br/web/api/characterdata/index.md index 8cfcbfecf1c78f..b03c93af819d08 100644 --- a/files/pt-br/web/api/characterdata/index.md +++ b/files/pt-br/web/api/characterdata/index.md @@ -41,16 +41,11 @@ _Inherits methods from its parent, {{domxref("Node")}}, and implements the {{dom ## Specifications -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}} | {{Spec2('DOM WHATWG')}} | Added implemention of the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface. | -| {{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}} | {{Spec2('DOM3 Core')}} | No change from {{SpecName('DOM2 Core')}}. | -| {{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | No change from {{SpecName('DOM1')}}. | -| {{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}} | {{Spec2('DOM1')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CharacterData")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/cleartimeout/index.md b/files/pt-br/web/api/cleartimeout/index.md index e196e848eecba2..e242ba25eb890f 100644 --- a/files/pt-br/web/api/cleartimeout/index.md +++ b/files/pt-br/web/api/cleartimeout/index.md @@ -29,26 +29,32 @@ Execute o script abaixo em uma página web e clique na página uma vez. Você ve ```js var alarme = { - relembrar: function(aMessage) { + relembrar: function (aMessage) { alert(aMessage); delete this.timeoutID; }, - setup: function() { - if (typeof this.timeoutID === 'number') { - this.cancelar(); + setup: function () { + if (typeof this.timeoutID === "number") { + this.cancelar(); } - this.timeoutID = window.setTimeout(function(msg) { + this.timeoutID = window.setTimeout( + function (msg) { this.relembrar(msg); - }.bind(this), 1000, 'Wake up!'); + }.bind(this), + 1000, + "Wake up!", + ); }, - cancelar: function() { + cancelar: function () { window.clearTimeout(this.timeoutID); - } + }, +}; +window.onclick = function () { + alarme.setup(); }; -window.onclick = function() { alarme.setup() }; ``` ## Notas @@ -57,10 +63,7 @@ Passar um _ID_ inválido para `clearTimeout` não causa nenhum efeito (não lan ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------ | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}} | {{Spec2("HTML WHATWG")}} | Método movido para `WindowOrWorkerGlobalScope` . | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade diff --git a/files/pt-br/web/api/clipboardevent/index.md b/files/pt-br/web/api/clipboardevent/index.md index b507dcad3399b2..3b89b2887aa1ff 100644 --- a/files/pt-br/web/api/clipboardevent/index.md +++ b/files/pt-br/web/api/clipboardevent/index.md @@ -25,13 +25,11 @@ _Não há método próprio; métodos herdados de {{domxref("Event")}}_. ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------------- | -| {{ SpecName('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }} | {{ Spec2('Clipboard API') }} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.ClipboardEvent")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/closeevent/closeevent/index.md b/files/pt-br/web/api/closeevent/closeevent/index.md index 7499e319156f63..da80a37b88a8b7 100644 --- a/files/pt-br/web/api/closeevent/closeevent/index.md +++ b/files/pt-br/web/api/closeevent/closeevent/index.md @@ -29,13 +29,11 @@ var event = new CloseEvent(typeArg, closeEventInit); ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName('HTML WHATWG','comms.html#closeevent','CloseEvent()')}} | {{Spec2('HTML WHATWG')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CloseEvent.CloseEvent")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/closeevent/index.md b/files/pt-br/web/api/closeevent/index.md index 7dfa90b2a85267..cf849b317f9cf9 100644 --- a/files/pt-br/web/api/closeevent/index.md +++ b/files/pt-br/web/api/closeevent/index.md @@ -2,6 +2,7 @@ title: CloseEvent slug: Web/API/CloseEvent --- + {{APIRef("Websockets API")}} Um `CloseEvent` é enviado aos clientes que usam {{Glossary("WebSockets")}} quando a conexão está fechada (closed). Ele é enviado ao ouvinte(listener) pelo atributo `onclose` do objeto `WebSocket`. diff --git a/files/pt-br/web/api/console/assert/index.md b/files/pt-br/web/api/console/assert/index.md index 4ea670f81d5fbb..2cdf2e86286986 100644 --- a/files/pt-br/web/api/console/assert/index.md +++ b/files/pt-br/web/api/console/assert/index.md @@ -34,13 +34,11 @@ Ver [Outputting text to the console](/pt-BR/docs/Web/API/console#Outputting_text **Especificações** -| Especificações | Status | Comentário | -| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | -| {{SpecName("Console API", "#consoleassertexpression-object", "console.assert()")}} | {{Spec2("Console API")}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.console.assert")}} +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/console/clear/index.md b/files/pt-br/web/api/console/clear/index.md index a34374a16fb131..ac1ea936fb8fc4 100644 --- a/files/pt-br/web/api/console/clear/index.md +++ b/files/pt-br/web/api/console/clear/index.md @@ -15,9 +15,7 @@ console.clear(); ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName("Console API", "#clear", "console.clear()")}} | {{Spec2("Console API")}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/api/console/count/index.md b/files/pt-br/web/api/console/count/index.md index 3648f5a446ee20..1054ebb3a2b85a 100644 --- a/files/pt-br/web/api/console/count/index.md +++ b/files/pt-br/web/api/console/count/index.md @@ -84,10 +84,8 @@ console.count([label]); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName("Console API", "#count", "console.count()")}} | {{Spec2("Console API")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.console.count")}} +{{Compat}} diff --git a/files/pt-br/web/api/console/error/index.md b/files/pt-br/web/api/console/error/index.md index f95a08933ee393..afa8dd70f8c6ca 100644 --- a/files/pt-br/web/api/console/error/index.md +++ b/files/pt-br/web/api/console/error/index.md @@ -33,13 +33,11 @@ Veja [Outputting text to the console](/pt-BR/docs/Web/API/console#Outputting_tex ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName("Console API", "#consoleerrorobject--object-", "console.error()")}} | {{Spec2("Console API")}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.console.error")}} +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/console/index.md b/files/pt-br/web/api/console/index.md index 58e85a43f53a4d..61863f109103d7 100644 --- a/files/pt-br/web/api/console/index.md +++ b/files/pt-br/web/api/console/index.md @@ -81,8 +81,13 @@ Você também pode realizar o output de múltiplos objetos ao simplesmente list ```js var carro = "Fusca"; -var algumObjeto = {str:"Algum texto", id:5}; -console.info("Meu primeiro carro era um ", carro, ". O objeto é: ", algumObjeto); +var algumObjeto = { str: "Algum texto", id: 5 }; +console.info( + "Meu primeiro carro era um ", + carro, + ". O objeto é: ", + algumObjeto, +); ``` O output será algo assim: diff --git a/files/pt-br/web/api/console/info/index.md b/files/pt-br/web/api/console/info/index.md index 98367c8c1a538b..0d277e43f0c81f 100644 --- a/files/pt-br/web/api/console/info/index.md +++ b/files/pt-br/web/api/console/info/index.md @@ -29,13 +29,11 @@ Veja [Outputting text to the console](/pt-BR/docs/Web/API/console#Outputting_tex ## Especificações -| Especificações | Status | Comentários | -| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName("Console API", "#consoleinfoobject--object-", "console.info()")}} | {{Spec2("Console API")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.console.info")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/console/table/index.md b/files/pt-br/web/api/console/table/index.md index 6f2877c898ac8d..31c8da4b26029e 100644 --- a/files/pt-br/web/api/console/table/index.md +++ b/files/pt-br/web/api/console/table/index.md @@ -49,7 +49,11 @@ Se os elementos no array, ou propriedades no objeto, forem arrays ou objetos, se ```js // um array de arrays -var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] +var people = [ + ["John", "Smith"], + ["Jane", "Doe"], + ["Emily", "Jones"], +]; console.table(people); ``` @@ -128,9 +132,7 @@ console.table(data [, columns]); ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName("Console API", "#table", "console.table()")}} | {{Spec2("Console API")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/api/console/warn/index.md b/files/pt-br/web/api/console/warn/index.md index 9687ba0bbad6bd..32e9bf7a0292c8 100644 --- a/files/pt-br/web/api/console/warn/index.md +++ b/files/pt-br/web/api/console/warn/index.md @@ -31,13 +31,11 @@ Ver [Outputting text to the console](/pt-BR/docs/Web/API/console#Outputting_text ## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName("Console API", "#consolewarnobject--object-", "console.warn()")}} | {{Spec2("Console API")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.console.warn")}} +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/console_api/index.md b/files/pt-br/web/api/console_api/index.md index f864b666b0b3ff..14125f7620403b 100644 --- a/files/pt-br/web/api/console_api/index.md +++ b/files/pt-br/web/api/console_api/index.md @@ -26,19 +26,17 @@ De longe o método mais comum usado é o {{domxref("console.log")}}, que é usad ## Examples ```js -let myString = 'Hello world'; +let myString = "Hello world"; // Output "Hello world" to the console -console.log(myString) +console.log(myString); ``` See the [Console reference page](/pt-BR/docs/Web/API/Console#Usage) for more examples. ## Specifications -| Specification | Status | Comment | -| ------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName('Console API')}} | {{Spec2('Console API')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores diff --git a/files/pt-br/web/api/crypto/getrandomvalues/index.md b/files/pt-br/web/api/crypto/getrandomvalues/index.md index 28d62f08c52959..f5b620af702460 100644 --- a/files/pt-br/web/api/crypto/getrandomvalues/index.md +++ b/files/pt-br/web/api/crypto/getrandomvalues/index.md @@ -35,19 +35,17 @@ window.crypto.getRandomValues(array); console.log("Seus números da sorte são:"); for (var i = 0; i < array.length; i++) { - console.log(array[i]); + console.log(array[i]); } ``` -## Especificação +## Especificações -| Especificação | Estado | Comentário | -| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------- | -| {{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}} | {{Spec2('Web Crypto API')}} | Definição inicial | +{{Specifications}} -## Navegadores compatíveis +## Compatibilidade com navegadores -{{Compat("api.Crypto.getRandomValues")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/crypto/index.md b/files/pt-br/web/api/crypto/index.md index 7ac62f8a4e7a0e..b26d37f601b88c 100644 --- a/files/pt-br/web/api/crypto/index.md +++ b/files/pt-br/web/api/crypto/index.md @@ -25,13 +25,11 @@ _Esta interface implementa métodos definidos em {{domxref("RandomSource")}}._ ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------ | -| {{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}} | {{Spec2("Web Crypto API")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Crypto")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/crypto/subtle/index.md b/files/pt-br/web/api/crypto/subtle/index.md index 3c4bced7dad277..d6332eea6807b3 100644 --- a/files/pt-br/web/api/crypto/subtle/index.md +++ b/files/pt-br/web/api/crypto/subtle/index.md @@ -15,13 +15,11 @@ var crypto = crypto.subtle; ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ | -| {{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }} | {{ Spec2('Web Crypto API') }} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Crypto.subtle")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/crypto_property/index.md b/files/pt-br/web/api/crypto_property/index.md index 757ccae517495b..682a635afffae7 100644 --- a/files/pt-br/web/api/crypto_property/index.md +++ b/files/pt-br/web/api/crypto_property/index.md @@ -26,18 +26,20 @@ genRandomNumbers = function getRandomNumbers() { window.crypto.getRandomValues(array); var randText = document.getElementById("myRandText"); - randText.innerHTML = "The random numbers are: " + randText.innerHTML = "The random numbers are: "; for (var i = 0; i < array.length; i++) { randText.innerHTML += array[i] + " "; } -} +}; ``` ### HTML ```html -

The random numbers are:

- +

The random numbers are:

+ ``` ### Resultado @@ -46,13 +48,11 @@ genRandomNumbers = function getRandomNumbers() { ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ | -| {{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}} | {{Spec2("Web Crypto API")}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.crypto")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/cryptokey/index.md b/files/pt-br/web/api/cryptokey/index.md index 39ec7206b833ce..bdb23bebb8b5c9 100644 --- a/files/pt-br/web/api/cryptokey/index.md +++ b/files/pt-br/web/api/cryptokey/index.md @@ -28,13 +28,11 @@ _Esta interface não herda, nem implementa nenhum método._ ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ | -| {{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }} | {{ Spec2('Web Crypto API') }} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CryptoKey")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/css/index.md b/files/pt-br/web/api/css/index.md index 69a0ef4c5a9847..67906918fea88b 100644 --- a/files/pt-br/web/api/css/index.md +++ b/files/pt-br/web/api/css/index.md @@ -26,14 +26,11 @@ _Nenhuma método estático herdado_. ## Especificações -| Especificações | Estado | Comentário | -| -------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| {{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}} | {{Spec2('CSSOM')}} | Adicionado o `escape()` método estático. | -| {{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}} | {{Spec2('CSS3 Conditional')}} | Definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CSS")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/css_object_model/index.md b/files/pt-br/web/api/css_object_model/index.md index 854a04127c5ece..29951e63f416b7 100644 --- a/files/pt-br/web/api/css_object_model/index.md +++ b/files/pt-br/web/api/css_object_model/index.md @@ -56,18 +56,7 @@ Outras interfaces podem ser usadas com CSSOM: ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------ | -------------------------------------------- | ---------- | -| {{SpecName("CSSOM")}} | {{Spec2("CSSOM")}} | | -| {{SpecName("CSSOM View")}} | {{Spec2("CSSOM View")}} | | -| {{SpecName("Screen Orientation")}} | {{Spec2("Screen Orientation")}} | | -| {{SpecName("CSS3 Fonts")}} | {{Spec2("CSS3 Fonts")}} | | -| {{SpecName("CSS3 Animations")}} | {{Spec2("CSS3 Animations")}} | | -| {{SpecName("CSS3 Transitions")}} | {{Spec2("CSS3 Transitions")}} | | -| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | | -| {{SpecName("CSS3 Conditional")}} | {{Spec2("CSS3 Conditional")}} | | -| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | | -| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} | | +{{Specifications}} ## Notas de compatibilidade do navegador diff --git a/files/pt-br/web/api/customelementregistry/define/index.md b/files/pt-br/web/api/customelementregistry/define/index.md index 39bf5635c7fff6..2e01e08bc86981 100644 --- a/files/pt-br/web/api/customelementregistry/define/index.md +++ b/files/pt-br/web/api/customelementregistry/define/index.md @@ -37,11 +37,11 @@ Void. ### Exceções -| Exceção | Descrição | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Exceção | Descrição | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `NotSupportedError` | El {{domxref("CustomElementRegistry")}} já contém uma entrada com o mesmo nome ou o mesmo construtor (ou já foi definido de alguma outra forma), ou foi especificado `extends` mas o elemento do qual você está tentando estender é desconhecido. | -| `SyntaxError` | O nome fornecido não é um [nome de elemento personalizado válido](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name). | -| `TypeError` | O constructor referenciado não é um constructor | +| `SyntaxError` | O nome fornecido não é um [nome de elemento personalizado válido](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name). | +| `TypeError` | O constructor referenciado não é um constructor | > **Nota:** Exceções são frequentemente obtidas `NotSupportedError`s quando o método `define()` está falhando, mas é realmente um problema relacionado a > {{domxref("Element.attachShadow()")}}. @@ -60,66 +60,64 @@ class PopUpInfo extends HTMLElement { super(); // crie um shadow root - var shadow = this.attachShadow({mode: 'open'}); + var shadow = this.attachShadow({ mode: "open" }); // Crie três elementos span - var wrapper = document.createElement('span'); - wrapper.setAttribute('class','wrapper'); + var wrapper = document.createElement("span"); + wrapper.setAttribute("class", "wrapper"); - var icon = document.createElement('span'); - icon.setAttribute('class','icon'); - icon.setAttribute('tabindex', 0); + var icon = document.createElement("span"); + icon.setAttribute("class", "icon"); + icon.setAttribute("tabindex", 0); - var info = document.createElement('span'); - info.setAttribute('class','info'); + var info = document.createElement("span"); + info.setAttribute("class", "info"); // Pegue o conteúdo do atributo de texto e coloque-o no span info - var text = this.getAttribute('text'); + var text = this.getAttribute("text"); info.textContent = text; // Pegue o conteúdo do atributo img (se existir) e coloque-o no ícone de span var imgUrl; - if(this.hasAttribute('img')) { - imgUrl = this.getAttribute('img'); + if (this.hasAttribute("img")) { + imgUrl = this.getAttribute("img"); } else { - imgUrl = 'img/default.png'; + imgUrl = "img/default.png"; } // A extensão não pode ter diretamente uma imagem, mas se contiver um elemento img - var img = document.createElement('img'); + var img = document.createElement("img"); img.src = imgUrl; icon.appendChild(img); // Crie os estilos CSS e inclua-os no shadow DOM - var style = document.createElement('style'); - - style.textContent = '.wrapper {' + - 'position: relative;' + - '}' + - - '.info {' + - 'font-size: 0.8rem;' + - 'width: 200px;' + - 'display: inline-block;' + - 'border: 1px solid black;' + - 'padding: 10px;' + - 'background: white;' + - 'border-radius: 10px;' + - 'opacity: 0;' + - 'transition: 0.6s all;' + - 'position: absolute;' + - 'bottom: 20px;' + - 'left: 10px;' + - 'z-index: 3;' + - '}' + - - 'img {' + - 'width: 1.2rem' + - '}' + - - '.icon:hover + .info, .icon:focus + .info {' + - 'opacity: 1;' + - '}'; + var style = document.createElement("style"); + + style.textContent = + ".wrapper {" + + "position: relative;" + + "}" + + ".info {" + + "font-size: 0.8rem;" + + "width: 200px;" + + "display: inline-block;" + + "border: 1px solid black;" + + "padding: 10px;" + + "background: white;" + + "border-radius: 10px;" + + "opacity: 0;" + + "transition: 0.6s all;" + + "position: absolute;" + + "bottom: 20px;" + + "left: 10px;" + + "z-index: 3;" + + "}" + + "img {" + + "width: 1.2rem" + + "}" + + ".icon:hover + .info, .icon:focus + .info {" + + "opacity: 1;" + + "}"; // anexar os elementos criados (extensões e estilo) ao shadow DOM // observe que o span wrapper contém o ícone e os spans de informações @@ -131,12 +129,14 @@ class PopUpInfo extends HTMLElement { } } - // Defina um novo elemento -customElements.define('popup-info', PopUpInfo); +// Defina um novo elemento +customElements.define("popup-info", PopUpInfo); ``` ```html - + ``` > **Nota:** Construtores de elementos personalizados autocontidos devem estender {{domxref("HTMLElement")}}. @@ -146,8 +146,7 @@ customElements.define('popup-info', PopUpInfo); O código a seguir é retirado do nosso exemplo [word-count-web-component](https://github.com/mdn/web-components-examples/tree/master/word-count-web-component) ([ver ao vivo](https://mdn.github.io/web-components-examples/word-count-web-component/)). ```js - - // Crie uma classe para o elemento +// Crie uma classe para o elemento class WordCount extends HTMLParagraphElement { constructor() { // Sempre a primeira coisa a fazer é chamar super no construtor @@ -161,35 +160,33 @@ class WordCount extends HTMLParagraphElement { // innerText está definido para objetos HTMLElement, enquanto textContent para todos os objetos Node // o operador || nos faz pegar pelo menos um dos dois - function countWords(node){ - var text = node.innerText || node.textContent + function countWords(node) { + var text = node.innerText || node.textContent; return text.split(/\s+/g).length; } - var count = 'Words: ' + countWords(wcParent); + var count = "Words: " + countWords(wcParent); // crie um shadow root - var shadow = this.attachShadow({mode: 'open'}); + var shadow = this.attachShadow({ mode: "open" }); // Crie um nó span com o número de palavras - var text = document.createElement('span'); + var text = document.createElement("span"); text.textContent = count; // Adicione ao shadow root shadow.appendChild(text); - // Atualize o contador quando o conteúdo do elemento mudar - setInterval(function() { - var count = 'Words: ' + countWords(wcParent); + setInterval(function () { + var count = "Words: " + countWords(wcParent); text.textContent = count; - }, 200) - + }, 200); } } // Defina o novo elemento -customElements.define('word-count', WordCount, { extends: 'p' }); +customElements.define("word-count", WordCount, { extends: "p" }); ``` ```html @@ -202,24 +199,24 @@ Se a classe usada para o elemento contém a propriedade estática `disabledFeatu {{domxref("DOMException")}} `NotSupportedError`. ```js - class PopUpInfo extends HTMLElement { - static get disabledFeatures() { return ['shadow']; } +class PopUpInfo extends HTMLElement { + static get disabledFeatures() { + return ["shadow"]; + } - constructor() { - super(); + constructor() { + super(); - var shadow = this.attachShadow({mode: 'open'}); - // isso fará com que um erro seja lançado quando o elemento for definido. - } - } + var shadow = this.attachShadow({ mode: "open" }); + // isso fará com que um erro seja lançado quando o elemento for definido. + } +} ``` ## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}} | {{Spec2("HTML WHATWG")}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CustomElementRegistry.define")}} +{{Compat}} diff --git a/files/pt-br/web/api/customelementregistry/get/index.md b/files/pt-br/web/api/customelementregistry/get/index.md index c2f0a022c59f83..1ad8b91cd4d38a 100644 --- a/files/pt-br/web/api/customelementregistry/get/index.md +++ b/files/pt-br/web/api/customelementregistry/get/index.md @@ -25,18 +25,20 @@ O construtor do elemento personalizado nomeado, ou `undefined`se não há defini ## Examples ```js -customElements.define('my-paragraph', +customElements.define( + "my-paragraph", class extends HTMLElement { constructor() { - let templateContent = document.getElementById('my-paragraph').content; + let templateContent = document.getElementById("my-paragraph").content; super() // returns element this scope - .attachShadow({mode: 'open'}) // sets AND returns this.shadowRoot + .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot .append(templateContent.cloneNode(true)); - } -}) + } + }, +); // Retorne uma referência ao construtor my-paragraph -let ctor = customElements.get('my-paragraph'); +let ctor = customElements.get("my-paragraph"); ``` ## Especificações diff --git a/files/pt-br/web/api/customelementregistry/index.md b/files/pt-br/web/api/customelementregistry/index.md index 49346f748ff689..25948fd20cb1a5 100644 --- a/files/pt-br/web/api/customelementregistry/index.md +++ b/files/pt-br/web/api/customelementregistry/index.md @@ -30,45 +30,41 @@ class WordCount extends HTMLParagraphElement { // Conta as palavras no elemento pai var wcParent = this.parentNode; - function countWords(node){ - var text = node.innerText || node.textContent + function countWords(node) { + var text = node.innerText || node.textContent; return text.split(/\s+/g).length; } - var count = 'Words: ' + countWords(wcParent); + var count = "Words: " + countWords(wcParent); // Cria um shadow root - var shadow = this.attachShadow({mode: 'open'}); + var shadow = this.attachShadow({ mode: "open" }); // Cria um nó de texto e adiciona o contador de palavra nele - var text = document.createElement('span'); + var text = document.createElement("span"); text.textContent = count; // Acrescenta ao shadow root shadow.appendChild(text); - // Atualiza o contador quando houver mudança - setInterval(function() { - var count = 'Words: ' + countWords(wcParent); + setInterval(function () { + var count = "Words: " + countWords(wcParent); text.textContent = count; - }, 200) - + }, 200); } } // Define um novo elemento -customElements.define('word-count', WordCount, { extends: 'p' }); +customElements.define("word-count", WordCount, { extends: "p" }); ``` > **Nota:** Note: The CustomElementsRegistry is available through the {{domxref("Window.customElements")}} property. ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------- | -| {{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}} | {{Spec2("HTML WHATWG")}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.CustomElementRegistry")}} +{{Compat}} diff --git a/files/pt-br/web/api/customelementregistry/upgrade/index.md b/files/pt-br/web/api/customelementregistry/upgrade/index.md index 86202a4f10cc3f..9e71e187ffae22 100644 --- a/files/pt-br/web/api/customelementregistry/upgrade/index.md +++ b/files/pt-br/web/api/customelementregistry/upgrade/index.md @@ -37,7 +37,7 @@ customElements.define("spider-man", SpiderMan); console.assert(!(el instanceof SpiderMan)); // Ainda não atualizado customElements.upgrade(el); -console.assert(el instanceof SpiderMan); // Atualizado! +console.assert(el instanceof SpiderMan); // Atualizado! ``` ## Especificações diff --git a/files/pt-br/web/api/customelementregistry/whendefined/index.md b/files/pt-br/web/api/customelementregistry/whendefined/index.md index d5be47c3154321..9eabe0ab5307cd 100644 --- a/files/pt-br/web/api/customelementregistry/whendefined/index.md +++ b/files/pt-br/web/api/customelementregistry/whendefined/index.md @@ -42,21 +42,21 @@ menu real esteja pronto para ser exibido. Item 1 Item 2 - ... + ... Item N ``` ```js -const container = document.getElementById('menu-container'); -const placeholder = container.querySelector('.menu-placeholder'); +const container = document.getElementById("menu-container"); +const placeholder = container.querySelector(".menu-placeholder"); // Busca todos os filhos do menu que ainda não foram definidos. -const undefinedElements = container.querySelectorAll(':not(:defined)'); +const undefinedElements = container.querySelectorAll(":not(:defined)"); -async function removePlaceholder(){ - const promises = [...undefinedElements].map( - button => customElements.whenDefined(button.localName) +async function removePlaceholder() { + const promises = [...undefinedElements].map((button) => + customElements.whenDefined(button.localName), ); // Espere que todos os filhos sejam atualizados diff --git a/files/pt-br/web/api/datatransfer/index.md b/files/pt-br/web/api/datatransfer/index.md index 99863d6ab454f8..8326aa797c32b0 100644 --- a/files/pt-br/web/api/datatransfer/index.md +++ b/files/pt-br/web/api/datatransfer/index.md @@ -11,16 +11,16 @@ Esse objeto está disponível pela propriedade `dataTransfer` de todos os evento ## Visão geral das propriedades -| Propriedades | Tipo | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -| [`dropEffect`](#dropEffect.28.29) | [`String`](/pt-BR/docs/JavaScript/Reference/Global_Objects/String) | -| [`effectAllowed`](#effectAllowed.28.29) | [`String`](/pt-BR/docs/JavaScript/Reference/Global_Objects/String) | -| [`files`](#files.28.29) | {{ domxref("FileList") }} | -| [`mozCursor`](#mozCursor) {{ non-standard_inline() }} | [`String`](/pt-BR/docs/JavaScript/Reference/Global_Objects/String) | -| [`mozItemCount`](#mozItemCount.28.29) {{ non-standard_inline() }} | `unsigned long` | -| [`mozSourceNode`](#mozSourceNode) {{ non-standard_inline() }} | {{ domxref("Node") }} | -| [`mozUserCancelled`](#mozUserCancelled) | [`Boolean`](/pt-BR/JavaScript/Reference/Global_Objects/Boolean) | -| [`types`](#types.28.29) | [`DOMStringList`](/pt-BR/docs/Web/API/DOMStringList) | +| Propriedades | Tipo | +| ----------------------------------------------------------------- | ------------------------------------------------------------------ | +| [`dropEffect`](#dropEffect.28.29) | [`String`](/pt-BR/docs/JavaScript/Reference/Global_Objects/String) | +| [`effectAllowed`](#effectAllowed.28.29) | [`String`](/pt-BR/docs/JavaScript/Reference/Global_Objects/String) | +| [`files`](#files.28.29) | {{ domxref("FileList") }} | +| [`mozCursor`](#mozCursor) {{ non-standard_inline() }} | [`String`](/pt-BR/docs/JavaScript/Reference/Global_Objects/String) | +| [`mozItemCount`](#mozItemCount.28.29) {{ non-standard_inline() }} | `unsigned long` | +| [`mozSourceNode`](#mozSourceNode) {{ non-standard_inline() }} | {{ domxref("Node") }} | +| [`mozUserCancelled`](#mozUserCancelled) | [`Boolean`](/pt-BR/JavaScript/Reference/Global_Objects/Boolean) | +| [`types`](#types.28.29) | [`DOMStringList`](/pt-BR/docs/Web/API/DOMStringList) | ## Visão geral dos métodos diff --git a/files/pt-br/web/api/devicemotioneventacceleration/index.md b/files/pt-br/web/api/devicemotioneventacceleration/index.md index 51bd29da49a1f5..ecbcdfc964fe01 100644 --- a/files/pt-br/web/api/devicemotioneventacceleration/index.md +++ b/files/pt-br/web/api/devicemotioneventacceleration/index.md @@ -19,6 +19,4 @@ Um objeto `DeviceAcceleration` fornece informações sobre a quantidade de acele ## Especificações -| Especificações | Status | Comentario | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------- | -| {{SpecName("Device Orientation", "#device_acceleration", "DeviceAcceleration")}} | {{Spec2("Device Orientation")}} | Definição inicial | +{{Specifications}} diff --git a/files/pt-br/web/api/devicemotioneventrotationrate/index.md b/files/pt-br/web/api/devicemotioneventrotationrate/index.md index a6b6860fb4a2eb..9f1a876e2472f5 100644 --- a/files/pt-br/web/api/devicemotioneventrotationrate/index.md +++ b/files/pt-br/web/api/devicemotioneventrotationrate/index.md @@ -19,10 +19,8 @@ Um objeto `DeviceRotationRate` fornece informações sobre a taxa na qual o disp ## Especificações -| Especificacões | Status | Comentario | -| -------------------------------------------- | ---------------------------------------- | ------------------ | -| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Definição inicial. | +{{Specifications}} ## Navegador compativeís -{{Compat("api.DeviceMotionEventRotationRate")}} +{{Compat}} diff --git a/files/pt-br/web/api/document/activeelement/index.md b/files/pt-br/web/api/document/activeelement/index.md index 839eaf6635cff5..4d81e327570089 100644 --- a/files/pt-br/web/api/document/activeelement/index.md +++ b/files/pt-br/web/api/document/activeelement/index.md @@ -29,46 +29,50 @@ var curElement = document.activeElement; ## Exemplo ```html - + - + - - -
- Select some text from one of the Textareas below: -
-
- - + -
-Active Element Id:
-Selected Text: - - + + + Active Element Id:
+ Selected Text: + ``` @@ -80,13 +84,11 @@ Originalmente apresentada como extensão DOM proprietária no Internet Explorer ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.activeElement")}} +{{Compat}} ## Eventos relacionados diff --git a/files/pt-br/web/api/document/anchors/index.md b/files/pt-br/web/api/document/anchors/index.md index 149bfb5b3ea694..07e505c446917e 100644 --- a/files/pt-br/web/api/document/anchors/index.md +++ b/files/pt-br/web/api/document/anchors/index.md @@ -18,7 +18,7 @@ nodeList = document.anchors; ## Exemplo ```js -if ( document.anchors.length >= 5 ) { +if (document.anchors.length >= 5) { dump("dump found too many anchors"); window.location = "http://www.google.com"; } @@ -27,48 +27,45 @@ if ( document.anchors.length >= 5 ) { O código a seguir é um exemplo que popula automaticamente um índice de conteúdo com cada âncora encontrada na página: ```html - + - - -Test - - - - - -

Title

-

Contents

-
    - -

    Plants

    -
      -
    1. Apples
      2. -
    2. Oranges
      3. -
    3. Pears
      4. -
    - -

    Veggies

    -
      -
    1. Carrots
      2. -
    2. Celery
      3. -
    3. Beats
      4. -
    - - + + + Test + + + +

    Title

    +

    Contents

    +
      + +

      Plants

      +
        +
      1. Apples
        2. +
      2. Oranges
        3. +
      3. Pears
        4. +
      + +

      Veggies

      +
        +
      1. Carrots
        2. +
      2. Celery
        3. +
      3. Beats
        4. +
      + ``` @@ -80,7 +77,4 @@ Por motivos de compatibilidade, o conjunto de âncoras retornadas por `anchors` ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | -| {{SpecName('HTML WHATWG', '#dom-document-anchors', 'Document.anchors')}} | {{ Spec2('HTML WHATWG') }} | Obsoleted. | -| {{SpecName('DOM2 HTML', 'html.html#ID-7577272', 'Document.anchors')}} | {{ Spec2('DOM2 Events') }} | Initial definition. | +{{Specifications}} diff --git a/files/pt-br/web/api/document/characterset/index.md b/files/pt-br/web/api/document/characterset/index.md index 896a83771acdb3..28a84e894fa21a 100644 --- a/files/pt-br/web/api/document/characterset/index.md +++ b/files/pt-br/web/api/document/characterset/index.md @@ -28,10 +28,8 @@ var string = document.characterSet; ## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | -| {{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}} | {{Spec2('DOM WHATWG')}} | Definição Inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.characterSet")}} +{{Compat}} diff --git a/files/pt-br/web/api/document/contenttype/index.md b/files/pt-br/web/api/document/contenttype/index.md index 28b62dbf234416..7eb0995dc79a78 100644 --- a/files/pt-br/web/api/document/contenttype/index.md +++ b/files/pt-br/web/api/document/contenttype/index.md @@ -21,10 +21,8 @@ contentType = document.contentType; ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName('DOM WHATWG', '#dom-document-contenttype', 'Document.contentType')}} | {{Spec2('DOM WHATWG')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.contentType")}} +{{Compat}} diff --git a/files/pt-br/web/api/document/createelement/index.md b/files/pt-br/web/api/document/createelement/index.md index 55defefe910c53..9c09ef48575b4c 100644 --- a/files/pt-br/web/api/document/createelement/index.md +++ b/files/pt-br/web/api/document/createelement/index.md @@ -27,14 +27,14 @@ Este código cria uma nova `
      ` e a insere antes do elemento com ID "`div1`". ### HTML ```html - + - - ||Trabalhando com elementos|| - - -
      O texto acima foi criado dinamicamente.
      - + + ||Trabalhando com elementos|| + + +
      O texto acima foi criado dinamicamente.
      + ``` @@ -43,7 +43,7 @@ Este código cria uma nova `
      ` e a insere antes do elemento com ID "`div1`". ```js document.body.onload = adcElemento; -function adcElemento () { +function adcElemento() { // cria um novo elemento div // e dá à ele conteúdo var divNova = document.createElement("div"); diff --git a/files/pt-br/web/api/document/createnodeiterator/index.md b/files/pt-br/web/api/document/createnodeiterator/index.md index b9ea095eb7536c..17199e02af2e27 100644 --- a/files/pt-br/web/api/document/createnodeiterator/index.md +++ b/files/pt-br/web/api/document/createnodeiterator/index.md @@ -20,9 +20,9 @@ _Essa interface não herda nenhum método._ - : Returns an `unsigned short` that will be used to tell if a given {{domxref("Node")}} must be accepted or not by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} iteration algorithm. This method is expected to be written by the user of a `NodeFilter`. Possible return values are: - | Constant | Description | - | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - | `FILTER_ACCEPT` | Value returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be accepted. | + | Constant | Description | + | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | `FILTER_ACCEPT` | Value returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be accepted. | | `FILTER_REJECT` | Value to be returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be rejected. For {{ domxref("TreeWalker") }}, child nodes are also rejected. For {{ domxref("NodeIterator") }}, this flag is synonymous with FILTER_SKIP. | | `FILTER_SKIP` | Value to be returned by {{ domxref("NodeFilter.acceptNode()") }} for nodes to be skipped by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} object. The children of skipped nodes are still considered. This is treated as "skip this node but not its children". | @@ -31,23 +31,24 @@ _Essa interface não herda nenhum método._ ```js var nodeIterator = document.createNodeIterator( // Node to use as root - document.getElementById('someId'), + document.getElementById("someId"), // Only consider nodes that are text nodes (nodeType 3) NodeFilter.SHOW_TEXT, // Object containing the function to use for the acceptNode method // of the NodeFilter - { acceptNode: function(node) { + { + acceptNode: function (node) { // Logic to determine whether to accept, reject or skip node // In this case, only accept nodes that have content // other than whitespace - if ( ! /^\s*$/.test(node.data) ) { + if (!/^\s*$/.test(node.data)) { return NodeFilter.FILTER_ACCEPT; } - } + }, }, - false + false, ); // Show the content of every non-empty text node that is a child of root @@ -60,14 +61,11 @@ while ((node = nodeIterator.nextNode())) { ## Specifications -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- | -| {{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}} | {{Spec2('DOM WHATWG')}} | | -| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}} | {{Spec2('DOM2 Traversal_Range')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.createNodeIterator")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/document/designmode/index.md b/files/pt-br/web/api/document/designmode/index.md index 622f85908ea273..1742c07fd8b748 100644 --- a/files/pt-br/web/api/document/designmode/index.md +++ b/files/pt-br/web/api/document/designmode/index.md @@ -27,13 +27,11 @@ iframe_node.contentDocument.designMode = "on"; ## Especificação -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}} | {{Spec2('HTML WHATWG')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.designMode")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/document/doctype/index.md b/files/pt-br/web/api/document/doctype/index.md index 1acc6a3fa05884..dd6d6d68894a71 100644 --- a/files/pt-br/web/api/document/doctype/index.md +++ b/files/pt-br/web/api/document/doctype/index.md @@ -21,10 +21,17 @@ doctype = document.doctype; var doctypeObj = document.doctype; console.log( - "doctypeObj.name: " + doctypeObj.name + "\n" + - "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + - "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + - "doctypeObj.systemId: " + doctypeObj.systemId + "doctypeObj.name: " + + doctypeObj.name + + "\n" + + "doctypeObj.internalSubset: " + + doctypeObj.internalSubset + + "\n" + + "doctypeObj.publicId: " + + doctypeObj.publicId + + "\n" + + "doctypeObj.systemId: " + + doctypeObj.systemId, ); ``` @@ -36,10 +43,8 @@ O nível 2 do DOM não suporta a edição da declaração do tipo de documento. ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('DOM WHATWG', '#dom-document-doctype', 'Document: doctype')}} | {{Spec2('DOM WHATWG')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.doctype")}} +{{Compat}} diff --git a/files/pt-br/web/api/document/document/index.md b/files/pt-br/web/api/document/document/index.md index 389adf7cc6f0cb..c030c30b103c0e 100644 --- a/files/pt-br/web/api/document/document/index.md +++ b/files/pt-br/web/api/document/document/index.md @@ -17,12 +17,10 @@ var document = new Document() Nenhum. -Especificações +## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName('DOM WHATWG','#interface-document','Document')}} | {{Spec2('DOM WHATWG')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.Document")}} +{{Compat}} diff --git a/files/pt-br/web/api/document/documentelement/index.md b/files/pt-br/web/api/document/documentelement/index.md index 96b8e01b4b632b..721de0858b2066 100644 --- a/files/pt-br/web/api/document/documentelement/index.md +++ b/files/pt-br/web/api/document/documentelement/index.md @@ -21,9 +21,8 @@ var primeiroNivel = rootElement.childNodes; // primeiroNivel é a NodeList do filho direto do elemento raíz for (var i = 0; i < primeiroNivel.length; i++) { - // faça algo com cada filho direto do elemento raiz - // como primeiroNivel[i] - + // faça algo com cada filho direto do elemento raiz + // como primeiroNivel[i] } ``` @@ -37,4 +36,8 @@ Documentos HTML tipicamente contém somente um único nó filho, ``, talve ## Especificações -- [Núcleo DOM Nível 2: document.documentElement](https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092) +{{Specifications}} + +## Compatibilidade com navegadores + +{{Compat}} diff --git a/files/pt-br/web/api/document/documenturi/index.md b/files/pt-br/web/api/document/documenturi/index.md index 09885a3d32bd87..ad63600496cc39 100644 --- a/files/pt-br/web/api/document/documenturi/index.md +++ b/files/pt-br/web/api/document/documenturi/index.md @@ -17,13 +17,10 @@ Os Documentos HTML tem uma propriedade {{domxref("document.URL")}} que retorna o A diferençã é que **`document.URL`** só pode ser usado em documentos HTML, enquanto **`documentURI`** está disponivel para todos os documentos web. -## Specificações +## Especificações -| Specificação | Status | Comentário | -| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} | | -| {{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}} | {{Spec2('DOM3 Core')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.documentURI")}} +{{Compat}} diff --git a/files/pt-br/web/api/document/elementfrompoint/index.md b/files/pt-br/web/api/document/elementfrompoint/index.md index 254121d3302ca9..93cb99fd8323a0 100644 --- a/files/pt-br/web/api/document/elementfrompoint/index.md +++ b/files/pt-br/web/api/document/elementfrompoint/index.md @@ -36,33 +36,31 @@ O objeto de nível mais alto {{domxref("Element")}} dentro das coordenadas decla ## Exemplo ```html - + - -exemplo de elementFromPoint - - - - - -

      Algum texto aqui

      - - - + + exemplo de elementFromPoint + + + + + +

      Algum texto aqui

      + + + ``` ## Especificações -| Especificação | Status | Comment | -| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | -| {{SpecName('CSSOM View', '#dom-document-elementfrompoint', 'elementFromPoint')}} | {{Spec2('CSSOM View')}} | Definição Inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.elementFromPoint")}} +{{Compat}} diff --git a/files/pt-br/web/api/document/fullscreen/index.md b/files/pt-br/web/api/document/fullscreen/index.md index 7f64b1f88a909b..d40f568e551d84 100644 --- a/files/pt-br/web/api/document/fullscreen/index.md +++ b/files/pt-br/web/api/document/fullscreen/index.md @@ -41,15 +41,13 @@ function isDocumentInFullScreenMode() { Se `fullscreenElement` não é `null`, retorna `true`, indicando se modo full-screen está sendo usado. -## Específicações +## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | -| {{SpecName("Fullscreen", "#dom-document-fullscreen", "Document.fullscreen")}} | {{Spec2("Fullscreen")}} | Definição inicial (como uma proprieda obsoleta). | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.fullscreen")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/document/getelementbyid/index.md b/files/pt-br/web/api/document/getelementbyid/index.md index 619277333d4844..8bfe263d7e8482 100644 --- a/files/pt-br/web/api/document/getelementbyid/index.md +++ b/files/pt-br/web/api/document/getelementbyid/index.md @@ -23,22 +23,22 @@ onde ## Exemplo ```html - + - - Exemplo getElementById - - - -

      Algum texto de exemplo

      - - - + + Exemplo getElementById + + + +

      Algum texto de exemplo

      + + + ``` @@ -52,21 +52,19 @@ Se não existe um elemento com o id fornecido, esta função retorna `null`. Not ```js var elemento = document.createElement("div"); -elemento.id = 'testqq'; -var el = document.getElementById('testqq'); // el será null! +elemento.id = "testqq"; +var el = document.getElementById("testqq"); // el será null! ``` **Documentos não-HTML.** A implementação do DOM deve ter informações que diz quais atributos são do tipo ID. Atributos com o nome "id" não são do tipo ID a menos que assim sejam definidos nos documentos DTD. O atributo `id` é definido para ser um tipo ID em casos comuns de [XHTML](/pt-BR/docs/XHTML), [XUL](/pt-BR/docs/XUL), e outros. Implementações que não reconhecem se os atributos são do tipo ID, ou não são esperados retornam `null`. -## Compatibilidade do Navegador - -{{Compat("api.Document.getElementById")}} - ## Especificações -`getElementById` foi introduzido no DOM Level 1 para documentos HTML e movidos para todos documentos no DOM Level 2 +{{Specifications}} + +## Compatibilidade com navegadores -- Especificação núcleo DOM Level 2: [getElementById](https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId) +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/document/getelementsbyclassname/index.md b/files/pt-br/web/api/document/getelementsbyclassname/index.md index 33dfdd1cb5ae91..69d04136761985 100644 --- a/files/pt-br/web/api/document/getelementsbyclassname/index.md +++ b/files/pt-br/web/api/document/getelementsbyclassname/index.md @@ -23,33 +23,40 @@ var elementos = rootElement.getElementsByClassName(nomes); Retorna todos os elementos que possuem a classe 'teste' ```js -document.getElementsByClassName('teste'); +document.getElementsByClassName("teste"); ``` Retorna todos os elementos que possuem as classes 'vermelho' e 'teste' ```js -document.getElementsByClassName('vermelho teste'); +document.getElementsByClassName("vermelho teste"); ``` Retorna todos os elementos que possuem a classe 'teste' dentro do elemento que possui o ID 'principal' ```js -document.getElementById('principal').getElementsByClassName('teste'); +document.getElementById("principal").getElementsByClassName("teste"); ``` Nós podemos também usar os métodos do Array.prototype em qualquer dos elementos {{ domxref("HTMLCollection") }} passando o _HTMLCollection_ como valor deste método. Aqui podemos encontrar todos os elementos do tipo _div_ que possuem a classe 'teste': ```js -var elementosTeste = document.getElementsByClassName('teste'); -var divsTeste = Array.prototype.filter.call(elementosTeste, function(elementoTeste) { - return elementoTeste.nodeName === 'DIV'; -}); +var elementosTeste = document.getElementsByClassName("teste"); +var divsTeste = Array.prototype.filter.call( + elementosTeste, + function (elementoTeste) { + return elementoTeste.nodeName === "DIV"; + }, +); ``` +## Especificações + +{{Specifications}} + ## Compatibilidade com navegadores -{{Compat("api.Document.getElementsByClassName")}} +{{Compat}} ## Especificação diff --git a/files/pt-br/web/api/document/getelementsbyname/index.md b/files/pt-br/web/api/document/getelementsbyname/index.md index 76aa33fc6fab10..db869383fe7111 100644 --- a/files/pt-br/web/api/document/getelementsbyname/index.md +++ b/files/pt-br/web/api/document/getelementsbyname/index.md @@ -19,17 +19,17 @@ var elementos = document.getElementsByName(nome); ## Exemplo ```html - + -Exemplo: usando document.getElementsByName + Exemplo: usando document.getElementsByName - - + + - + ``` @@ -47,14 +47,11 @@ A coleção retornada {{domxref("NodeList")}} contém _todos_ os elementos com o ## Especificações -| Epecificação | Status | Comentário | -| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------- | -| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} | | -| {{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}} | {{Spec2("DOM2 HTML")}} | Definição Inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.getElementsByName")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/document/hasfocus/index.md b/files/pt-br/web/api/document/hasfocus/index.md index a453c28683e22c..0b46c74091b88c 100644 --- a/files/pt-br/web/api/document/hasfocus/index.md +++ b/files/pt-br/web/api/document/hasfocus/index.md @@ -20,56 +20,56 @@ focused = document.hasFocus(); ## Exemplo ```html - + - - -TEST - - - - -

      Exemplo do JavaScript hasFocus

      -
      Esperando por ação do usuário
      -
      - + + + TEST + + + + +

      Exemplo do JavaScript hasFocus

      +
      Esperando por ação do usuário
      +
      + ``` -## Especificação +## Especificações -| Especificação | Estado | Comentário | -| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | -| {{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}} | {{Spec2('HTML WHATWG')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.Document.hasFocus")}} +{{Compat}} ## Veja também