mozilla

Revisão 327463 de Canvas tutorial

  • Slug da revisão: Canvas_tutorial
  • Título da revisão: Canvas tutorial
  • ID da revisão: 327463
  • Criado:
  • Criador: josivansilva
  • É a revisão atual? Sim
  • Comentar

Conteúdo da revisão

O <canvas> é um elemento HTML que pode ser usado para desenhar gráficos usando uma liguagem de script (normalmente JavaScript). Ele pode, por exemplo, ser usado para desenhar gráficos, fazer composição de fotografias ou simples (e não tão simples) animações. A imagem à direita mostra alguns exemplos de implementações do <canvas> que veremos mais adiante neste tutorial.

O <canvas> foi introduzido pela Apple para o Mac OS X Dashboard e mais tarde implementado no Safari e Google Chrome. Navegadores baseados no Gecko 1.8, como o Firefox 1.5, também suportam esse elemento. O elemento <canvas> é parte da especificação WhatWG Web applications 1.0 também conhecido como HTML5.

Este tutorial descreve como implementar o elemento <canvas> em suas páginas HTML. Os exemplos apresentados devem dar-lhe algumas ideias claras que você pode fazer com <canvas> e pode ser usado para iniciar a construção de suas próprias implementações.

Antes de começar

Usar o elemento <canvas> não é muito difícil, mas você precisa de um conhecimento básico de HTML e JavaScript.

O elemento <canvas> não é suportado em alguns navegadores mais antigos, mas é suportada no Firefox 1.5 e posterior, Opera 9 e posterior, as versões mais recentes do Safari, Chrome e Internet Explorer 9.

Neste tutorial

veja também

{{ Next("Canvas_tutorial/Basic_usage") }}

Fonte da revisão

<p><span id="result_box" lang="pt"><span class="hps">O </span></span><strong><code><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">&lt;canvas&gt;</a></code></strong><span id="result_box" lang="pt"> <span class="hps">é um elemento </span></span><a href="https://developer.mozilla.org/en-US/docs/HTML" title="HTML">HTML</a> <span id="result_box" lang="pt"><span class="hps">que pode</span> <span class="hps">ser usado para desenhar</span> <span class="hps">gráficos usando</span> uma liguagem de script <span class="hps atn">(</span><span>normalmente </span></span><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="JavaScript">JavaScript</a><span id="result_box" lang="pt"><span>).</span> <span class="hps">Ele pode</span><span>, por exemplo,</span> <span class="hps">ser usado para</span> <span class="hps">desenhar gráficos, fazer</span> <span class="hps">composição de fotografias ou</span> <span class="hps atn">simples (</span><span>e </span></span><a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster"><span id="result_box" lang="pt"><span>não tão simples</span></span></a><span id="result_box" lang="pt"><span>)</span> <span class="hps">animações.</span> <span class="hps">A imagem</span> <span class="hps">à direita mostra</span> <span class="hps">alguns exemplos de implementações</span> do </span><code>&lt;canvas&gt;</code><span id="result_box" lang="pt"><span class="hps"> que</span> <span class="hps">veremos mais adiante</span> <span class="hps">neste tutorial.</span></span></p>
<p><span id="result_box" lang="pt"><span class="hps">O</span></span><code> &lt;canvas&gt;</code><span id="result_box" lang="pt"> <span class="hps">foi introduzido</span> <span class="hps">pela Apple</span> <span class="hps">para o Mac OS</span> <span class="hps">X</span> <span class="hps">Dashboard e mais tarde</span> <span class="hps">implementado no Safari</span> <span class="hps">e Google Chrome.</span> </span><span id="result_box" lang="pt"><span class="hps">Navegadores</span></span><span id="result_box" lang="pt"><span class="hps"> baseados no </span></span><a href="https://developer.mozilla.org/en-US/docs/Gecko" title="Gecko">Gecko</a><span id="result_box" lang="pt"><span class="hps"> 1.8</span><span class="hps">, como o</span> <span class="hps">Firefox 1.5</span><span>, também suportam</span> <span class="hps">esse elemento.</span> <span class="hps">O elemento </span></span><code>&lt;canvas&gt;</code><span id="result_box" lang="pt"> <span class="hps">é</span> <span class="hps">parte da especificação</span> </span><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a><span id="result_box" lang="pt"><span class="hps"> também</span> <span class="hps">conhecido como</span> <span class="hps">HTML5.</span></span></p>
<p><span id="result_box" lang="pt"><span class="hps">Este tutorial</span> <span class="hps">descreve como implementar</span> <span class="hps">o elemento </span></span><code>&lt;canvas&gt;</code><span id="result_box" lang="pt"> <span class="hps">em suas páginas HTML</span><span>.</span> <span class="hps">Os exemplos apresentados</span> <span class="hps">devem</span> <span class="hps">dar-lhe algumas</span> <span class="hps">ideias claras</span> <span class="hps">que você pode</span> <span class="hps">fazer com </span></span><code>&lt;canvas&gt;</code><span id="result_box" lang="pt"><span class="hps"> e</span> <span class="hps">pode ser usado para</span> <span class="hps">iniciar a construção de</span> <span class="hps">suas próprias implementações.</span></span></p>
<h2 id="Before_you_start" name="Before_you_start"><span class="short_text" id="result_box" lang="pt"><span class="hps alt-edited">Antes de começar</span></span></h2>
<p><span id="result_box" lang="pt"><span class="hps">Usar o</span> <span class="hps">elemento </span></span><code>&lt;canvas&gt;</code><span id="result_box" lang="pt"> <span class="hps">não é muito</span> <span class="hps">difícil, mas você</span> <span class="hps">precisa de um</span> <span class="hps">conhecimento básico de </span></span><a href="https://developer.mozilla.org/en-US/docs/HTML" title="HTML">HTML</a> <span id="result_box" lang="pt"><span class="hps">e </span></span><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="JavaScript">JavaScript</a><span id="result_box" lang="pt"><span class="hps">.</span></span></p>
<p><span id="result_box" lang="pt"><span class="hps">O elemento</span> </span><code>&lt;canvas&gt;</code><span id="result_box" lang="pt"><span class="hps"> não é suportado</span> <span class="hps">em alguns</span> <span class="hps">navegadores mais antigos</span><span>, mas</span> <span class="hps">é suportada no Firefox</span> <span class="hps">1.5 e posterior</span><span>, Opera 9</span> <span class="hps alt-edited">e posterior</span><span>, as versões</span> <span class="hps">mais recentes do</span> <span class="hps">Safari</span><span>, Chrome e</span> <span class="hps">Internet Explorer 9.</span></span></p>
<h2 id="In_this_tutorial" name="In_this_tutorial"><span class="short_text" id="result_box" lang="pt"><span class="hps">Neste tutorial</span></span></h2>
<ul>
  <li><a href="/en-US/docs/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Basic usage</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Using images</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li>
</ul>
<h2 id="See_also" name="See_also"><span class="short_text" id="result_box" lang="pt"><span class="hps">veja também</span></span></h2>
<ul>
  <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
  <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
  <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li>
  <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
  <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li>
  <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li>
  <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas Demos - Games, applications, tools and tutorials</a></li>
  <li><a class="link-https" href="https://sites.google.com/site/canvasdraw/" title="https://sites.google.com/site/canvasdraw/">Canvas Drawing Tool</a></li>
  <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Animation Application</a></li>
  <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">interactive canvas tutorial</a></li>
  <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet with all attributes and methods</a></li>
  <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
  <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api" title="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api">How to draw a point with the Canvas API</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li>
  <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
</ul>
<div>
  {{ Next("Canvas_tutorial/Basic_usage") }}</div>
Reverter para esta revisão