{"json_modified": "2016-10-21T23:21:16.560848", "uuid": "ddffca8a-3221-4aa7-abc9-900f6ef75ca6", "title": "Basic usage of canvas", "url": "/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage", "tags": ["Canvas", "Graphics", "HTML", "Tutorial", "Intermediate"], "translations": [{"uuid": "ffdb2849-8e69-42eb-a10f-0f43d0cfc92b", "title": "Canvas \u098f\u09b0 \u09ae\u09cc\u09b2\u09bf\u0995 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0", "url": "/bn-BD/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage", "tags": ["Canvas", "\u099f\u09bf\u0989\u099f\u09cb\u09b0\u09bf\u09df\u09be\u09b2", "NeedsReview", "\u0995\u09cd\u09af\u09be\u09a8\u09ad\u09be\u09b8", "HTML", "Tutorial", "\u0997\u09cd\u09b0\u09be\u09ab\u09bf\u0995\u09cd\u09b8"], "summary": "<a href=\"/bn-BD/docs/HTML/Element/canvas\" title=\"This article hasn't been written yet. Please consider contributing!\"><code>&lt;canvas&gt;</code></a> \u09ac\u09bf\u09b7\u09df\u09c7 \u0986\u09ae\u09be\u09a6\u09c7\u09b0 \u0986\u099c\u0995\u09c7\u09b0 \u099f\u09bf\u0989\u099f\u09cb\u09b0\u09bf\u09df\u09be\u09b2 \u099a\u09b2\u09c1\u09a8 \u09b6\u09c1\u09b0\u09c1 \u0995\u09b0\u09be \u09af\u09be\u0995\u0964", "localization_tags": ["inprogress"], "locale": "bn-BD", "last_edit": "2014-01-07T01:03:14", "review_tags": []}, {"uuid": "f1fe0505-235f-451a-8767-4415cdb0876e", "title": "Z\u00e1kladn\u00ed pou\u017eit\u00ed", "url": "/cs/docs/Canvas_tutori%C3%A1l/Z%C3%A1kladn%C3%AD_pou%C5%BEit%C3%AD", "tags": ["Canvas tutorial"], "summary": "", "localization_tags": [], "locale": "cs", "last_edit": "2014-05-24T09:18:55", "review_tags": []}, {"uuid": "a30a51a2-986b-4513-b887-9fb51784a05f", "title": "Grundlagen Canvas", "url": "/de/docs/Web/Guide/HTML/Canvas_Tutorial/Grundlagen", "tags": [], "summary": "Beginnen wir mit dem <a href=\"/de/docs/Web/HTML/Element/canvas\" title=\"Das Canvas Element ist ein gro&#xDF;er Fortschritt in der Entwicklung des HTML, bietet es doch die M&#xF6;glichkeit zur dynamischen Darstellung grafischer Informationen. Dazu wird eine Canvas (engl. Leinwand) definiert und mittels JavaScript verschiedene Methoden zur Anwendung gebracht und Attribute gesetzt (siehe Canvas Attribute). Es sollte ein Fallbackinhalt in den &lt;canvas&gt;Tag eingef&#xFC;gt werden, welcher nur angezeigt wird, wenn Browser das &lt;canvas&gt; Element nicht unterst&#xFC;tzt oder Javascript deaktiviert ist.\"><code>&lt;canvas&gt;</code></a> Element:", "localization_tags": ["inprogress"], "locale": "de", "last_edit": "2016-07-15T03:32:05", "review_tags": []}, {"uuid": "d9bb9a9a-6c36-4c1b-b9bc-5ecfc2e2c6c5", "title": "Uso b\u00e1sico de Canvas", "url": "/es/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage", "tags": [], "summary": "A primera vista, un elemento <a href=\"/es/docs/Web/HTML/Elemento/canvas\" title=\"\"><code>&lt;canvas&gt;</code></a> es parecido al elemento <a href=\"/es/docs/Web/HTML/Elemento/img\" title=\"&lt;img&gt;\"><code>&lt;img&gt;</code></a>, con la\u00a0diferencia que este no tiene los atributos <code>src</code> y <code>alt</code>. El elemento <code>&lt;canvas&gt;</code> tiene solo dos atributos - <code><a href=\"/es/docs/Web/HTML/Element/canvas#attr-width\">width</a></code> y <code><a href=\"/es/docs/Web/HTML/Element/canvas#attr-height\">height</a></code>. Ambos son opcionales y pueden ser definidos usando propiedades <a href=\"/en-US/docs/DOM\" rel=\"internal\" title=\"en/DOM\">DOM</a>. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con\u00a0<strong>300 pixels</strong> ancho y <strong>150 pixels</strong> de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tama\u00f1o de su layout.", "localization_tags": [], "locale": "es", "last_edit": "2016-09-29T02:01:31", "review_tags": []}, {"uuid": "4278d457-2b82-4422-abbb-f2a1e450d0a9", "title": "Utilisation de base des canvas", "url": "/fr/docs/Tutoriel_canvas/Utilisation_de_base", "tags": ["Canvas", "Tutoriel_canvas", "Tutoriels", "NeedsLiveSamples", "HTML", "Graphics", "Intermediate"], "summary": "Commen\u00e7ons par regarder l'\u00e9l\u00e9ment <a href=\"/fr/docs/Web/HTML/Element/canvas\" title=\"L'&#xE9;l&#xE9;ment HTML Canvas (&lt;canvas&gt;) permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple, il peut &#xEA;tre utilis&#xE9; pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut &#xEA;tre utilis&#xE9; pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommand&#xE9; de fournir un contenu alternatif au contenu du bloc &lt;canvas&gt;. Ce contenu pourra &#xEA;tre utilis&#xE9; par les navigateurs plus anciens ne supportant pas l'&#xE9;l&#xE9;ment &lt;canvas&gt; et ceux pour lesquels JavaScript est d&#xE9;sactiv&#xE9;.\"><code>&lt;canvas&gt;</code></a> lui-m\u00eame.", "localization_tags": [], "locale": "fr", "last_edit": "2016-09-23T02:45:33", "review_tags": []}, {"uuid": "91b6667f-2ad6-4c03-a733-51c3a0b991ab", "title": "Basic usage of canvas", "url": "/ja/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage", "tags": [], "summary": "<a href=\"/ja/docs/Web/HTML/Element/canvas\" title=\"HTML &#x306E; &lt;canvas&gt; &#x8981;&#x7D20;&#x306F;&#x3001;&#x30B9;&#x30AF;&#x30EA;&#x30D7;&#x30C6;&#x30A3;&#x30F3;&#x30B0; (&#x57FA;&#x672C;&#x7684;&#x306B;&#x306F; JavaScript) &#x306B;&#x3088;&#x308A;&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30C3;&#x30AF;&#x3092;&#x63CF;&#x753B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x4F8B;&#x3048;&#x3070;&#x3001;&#x30B0;&#x30E9;&#x30D5;&#x306E;&#x63CF;&#x753B;&#x3001;&#x5199;&#x771F;&#x306E;&#x5408;&#x6210;&#x3001;&#x3055;&#x3089;&#x306B;&#x306F;&#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x4F5C;&#x6210;&#x307E;&#x3067;&#x304C;&#x53EF;&#x80FD;&#x3067;&#x3059;&#x3002;&lt;canvas&gt; &#x306E;&#x30D6;&#x30ED;&#x30C3;&#x30AF;&#x5185;&#x3067;&#x3001;&#x4EE3;&#x66FF;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x3092;&#x63D0;&#x4F9B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x53EF;&#x80FD; (&#x307E;&#x305F;&#x3001;&#x63D0;&#x4F9B;&#x3059;&#x3079;&#x304D;) &#x3067;&#x3059;&#x3002;&#x305D;&#x306E;&#x5185;&#x5BB9;&#x7269;&#x306F;&#x3001;canvas &#x3092;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3057;&#x306A;&#x3044;&#x53E4;&#x3044;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x304A;&#x3088;&#x3073; JavaScript &#x304C;&#x7121;&#x52B9;&#x3067;&#x3042;&#x308B;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x63CF;&#x753B;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;\"><code>&lt;canvas&gt;</code></a> \u306f <a href=\"/ja/docs/Web/HTML/Element/img\" title=\"HTML &lt;img&gt; &#x8981;&#x7D20; (HTML &#x753B;&#x50CF;&#x8981;&#x7D20;) &#x306F;&#x3001;&#x30C9;&#x30AD;&#x30E5;&#x30E1;&#x30F3;&#x30C8;&#x306B;&#x753B;&#x50CF;&#x3092;&#x8868;&#x793A;&#x3057;&#x307E;&#x3059;&#x3002;\"><code>&lt;img&gt;</code></a> \u3068\u4f3c\u3066\u3044\u307e\u3059\u3002<code>src</code> \u5c5e\u6027\u3068 <code>alt</code> \u5c5e\u6027\u304c\u306a\u3044\u70b9\u304c\u660e\u78ba\u306b\u7570\u306a\u308a\u307e\u3059\u304c\u3001<code><a href=\"/ja/docs/Web/HTML/Element/canvas#attr-width\">width</a></code> \u3068 <code><a href=\"/ja/docs/Web/HTML/Element/canvas#attr-height\">height</a></code> \u306e\u5c5e\u6027\u304c\u3042\u308b\u70b9\u306a\u3069\u306f\u5171\u901a\u3057\u3066\u3044\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u5c5e\u6027\u306f\u5fc5\u305a\u6307\u5b9a\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u3082\u306e\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u307b\u304b\u306b\u69d8\u3005\u306a <a class=\"glossaryLink\" href=\"/ja/docs/Glossary/DOM\" title=\"DOM: DOM (Document Object Model)&#x3068;&#x306F;&#x3001;HTML &#x307E;&#x305F;&#x306F; XML &#x30C9;&#x30AD;&#x30E5;&#x30E1;&#x30F3;&#x30C8;&#x3078;&#x306E; API &#x3067;&#x3059;&#x3002;&#10; DOM &#x306F;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x6587;&#x66F8;&#x69CB;&#x9020;&#x3092;&#x30CE;&#x30FC;&#x30C9;&#x306E;&#x30C4;&#x30EA;&#x30FC;&#x3068;&#x3057;&#x3066;&#x8AAD;&#x307F;&#x8FBC;&#x307F;&#x3001;&#x305D;&#x308C;&#x305E;&#x308C;&#x306E;&#x30CE;&#x30FC;&#x30C9;&#x3092;&#x6587;&#x66F8;&#xFF08;&#x4F8B;&#xFF1A;&#x8981;&#x7D20;&#x3001;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x6587;&#x5B57;&#x5217;&#x307E;&#x305F;&#x306F;&#x30B3;&#x30E1;&#x30F3;&#x30C8;&#xFF09;&#x306E;&#x4E00;&#x90E8;&#x3068;&#x3057;&#x3066;&#x8868;&#x3057;&#x307E;&#x3059;&#x3002;\">DOM</a> <a href=\"/docs/Web/API/HTMLCanvasElement\">\u5c5e\u6027</a>\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002 <code>width</code> \u3068 <code>height</code> \u5c5e\u6027\u304c\u6307\u5b9a\u3055\u308c\u306a\u304b\u3063\u305f\u5834\u5408\u3001canvas \u306f\u5e45 <strong>300 \u30d4\u30af\u30bb\u30eb</strong>\u3001\u9ad8\u3055 <strong>150 \u30d4\u30af\u30bb\u30eb</strong>\u306e\u8981\u7d20\u3068\u3057\u3066\u521d\u671f\u5316\u3055\u308c\u307e\u3059\u3002\u753b\u9762\u4e0a\u306e\u5927\u304d\u3055\u306f <a class=\"glossaryLink\" href=\"/ja/docs/Glossary/CSS\" title=\"CSS: CSS (Cascading StyleSheets) &#x306F; &#x30D6;&#x30E9;&#x30A6;&#x30B6; &#x3067; Web &#x30DA;&#x30FC;&#x30B8;&#x306E;&#x898B;&#x305F;&#x76EE;&#x3092;&#x8ABF;&#x6574;&#x3059;&#x308B;&#x5BA3;&#x8A00;&#x578B;&#x306E;&#x8A00;&#x8A9E;&#x3067;&#x3059;&#x3002;\">CSS</a> \u306b\u3088\u3063\u3066\u5909\u66f4\u3067\u304d\u307e\u3059\u304c\u3001\u305d\u306e\u5834\u5408 canvas \u306b\u63cf\u753b\u3055\u308c\u308b\u753b\u50cf\u306f CSS \u306e\u6307\u5b9a\u306b\u5408\u308f\u305b\u3066\u62e1\u5927 / \u7e2e\u5c0f\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u969b\u3001\u5143\u306e\u753b\u50cf\u306e\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u306f\u8003\u616e\u3055\u308c\u306a\u3044\u305f\u3081\u3001\u6307\u5b9a\u306e\u4ed5\u65b9\u306b\u3088\u3063\u3066\u306f\u753b\u50cf\u304c\u6b6a\u3093\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-10-21T23:20:33", "review_tags": ["editorial"]}, {"uuid": "98009c3a-32a9-4000-b6e0-65304846ca56", "title": "\uae30\ubcf8 \uc0ac\uc6a9\ubc95", "url": "/ko/docs/Canvas_tutorial/Basic_usage", "tags": ["Tutorials", "HTML:Canvas", "Canvas tutorial"], "summary": "\uc774 \uc785\ubb38\uc11c\ub294 <code>&lt;canvas&gt;</code> \uc5d8\ub9ac\uba3c\ud2b8 \uc790\uccb4\ub97c \uc0b4\ud3b4\ubcf4\ub294 \uac83\uc73c\ub85c \uc2dc\uc791\ud558\uaca0\uc2b5\ub2c8\ub2e4.", "localization_tags": [], "locale": "ko", "last_edit": "2016-07-17T20:07:56", "review_tags": []}, {"uuid": "4fdb57ba-2abf-4d67-9882-fdcbe95e0ad8", "title": "Utiliza\u00e7\u00e3o b\u00e1sica do Canvas", "url": "/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica", "tags": ["Canvas", "graficos", "Gr\u00e1ficos", "Intermedi\u00e1rio", "HTML", "Tutorial"], "summary": "Vamos come\u00e7ar esse tutorial olhando o elemento \u00a0<a href=\"/pt-BR/docs/Web/HTML/Element/canvas\" title=\"O elemento HTML Canvas (&lt;canvas&gt;) pode ser utilizado para desenhar gr&#xE1;ficos utilizando scripts (geralmente JavaScript). Por exemplo, al&#xE9;m de desenhar gr&#xE1;ficos, ele pode ser usado para fazer composi&#xE7;&#xF5;es de fotos e tamb&#xE9;m para anima&#xE7;&#xF5;es. Voc&#xEA; poder&#xE1; colocar conte&#xFA;dos alternativos dentro do bloco &lt;canvas&gt;. Este conte&#xFA;do ser&#xE1; renderizado tamb&#xE9;m em navegadores antigos e em navegadores com JavaScript desabilitado.\"><code>&lt;canvas&gt;</code></a> em si.", "localization_tags": [], "locale": "pt-BR", "last_edit": "2014-09-03T13:58:26", "review_tags": []}, {"uuid": "4023712f-81cf-4085-8f82-73886352afba", "title": "\u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Canvas", "url": "/ru/docs/Web/API/Canvas_API/Tutorial/Basic_usage", "tags": [], "summary": "\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u044d\u0442\u043e\u0442 \u0443\u0440\u043e\u043a\u00a0\u0441 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <a href=\"/ru/docs/Web/HTML/Element/canvas\" title=\"HTML &lt;canvas&gt;&#xA0;&#x42D;&#x43B;&#x435;&#x43C;&#x435;&#x43D;&#x442; &#x43C;&#x43E;&#x436;&#x435;&#x442; &#x431;&#x44B;&#x442;&#x44C; &#x438;&#x441;&#x43F;&#x43E;&#x43B;&#x44C;&#x437;&#x43E;&#x432;&#x430;&#x43D; &#x434;&#x43B;&#x44F; &#x440;&#x438;&#x441;&#x43E;&#x432;&#x430;&#x43D;&#x438;&#x44F; &#x433;&#x440;&#x430;&#x444;&#x438;&#x43A;&#x438; &#x447;&#x435;&#x440;&#x435;&#x437; &#x441;&#x43A;&#x440;&#x438;&#x43F;&#x442;&#x44B;&#xA0;(&#x43E;&#x431;&#x44B;&#x447;&#x43D;&#x43E; &#x438;&#x441;&#x43F;&#x43E;&#x43B;&#x44C;&#x437;&#x443;&#x435;&#x442;&#x441;&#x44F;&#xA0;JavaScript). &#x41D;&#x430; &#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;, &#x435;&#x433;&#x43E; &#x43C;&#x43E;&#x436;&#x43D;&#x43E; &#x438;&#x441;&#x43F;&#x43E;&#x43B;&#x44C;&#x437;&#x43E;&#x432;&#x430;&#x442;&#x44C; &#x434;&#x43B;&#x44F; &#x440;&#x438;&#x441;&#x43E;&#x432;&#x430;&#x43D;&#x438;&#x44F; &#x433;&#x440;&#x430;&#x444;&#x438;&#x43A;&#x43E;&#x432;, &#x434;&#x435;&#x43B;&#x430;&#x442;&#x44C; &#x43A;&#x43E;&#x43C;&#x43F;&#x43E;&#x437;&#x438;&#x446;&#x438;&#x438; &#x444;&#x43E;&#x442;&#x43E; &#x438;&#x43B;&#x438; &#x434;&#x430;&#x436;&#x435;&#xA0;&#x432;&#x44B;&#x43F;&#x43E;&#x43B;&#x43D;&#x44F;&#x442;&#x44C; &#x430;&#x43D;&#x438;&#x43C;&#x430;&#x446;&#x438;&#x438;. &#x412;&#x44B; &#x43C;&#x43E;&#x436;&#x435;&#x442;&#x435; (&#x438; &#x434;&#x43E;&#x43B;&#x436;&#x43D;&#x44B;) &#x434;&#x430;&#x442;&#x44C; &#x430;&#x43B;&#x44C;&#x442;&#x435;&#x440;&#x43D;&#x430;&#x442;&#x438;&#x432;&#x43D;&#x43E;&#x435; &#x441;&#x43E;&#x434;&#x435;&#x440;&#x436;&#x430;&#x43D;&#x438;&#x435;&#xA0;&#x432;&#x43D;&#x443;&#x440;&#x438;&#xA0;&#x431;&#x43B;&#x43E;&#x43A;&#x430;&#xA0;&lt;canvas&gt;. &#x42D;&#x442;&#x43E;&#x442; &#x43A;&#x43E;&#x43D;&#x442;&#x435;&#x43D;&#x442; &#x431;&#x443;&#x434;&#x435;&#x442; &#x440;&#x435;&#x43D;&#x434;&#x435;&#x440;&#x438;&#x442;&#x441;&#x44F; &#x432; &#x43E;&#x431;&#x43E;&#x438;&#x445; &#x431;&#x440;&#x430;&#x443;&#x437;&#x435;&#x440;&#x430;&#x445;, &#x432; &#x441;&#x442;&#x430;&#x440;&#x44B;&#x445; &#x43A;&#x43E;&#x442;&#x43E;&#x440;&#x44B;&#x435; &#x43D;&#x435; &#x43F;&#x43E;&#x434;&#x434;&#x435;&#x440;&#x436;&#x438;&#x432;&#x430;&#x44E;&#x442; canvas &#x438; &#x432; &#x431;&#x440;&#x430;&#x443;&#x437;&#x435;&#x440;&#x430;&#x445; &#x441; &#x43E;&#x442;&#x43A;&#x43B;&#x44E;&#x447;&#x451;&#x43D;&#x43D;&#x44B;&#x43C; JavaScript.\"><code>&lt;canvas&gt;</code></a> \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u0433\u043e. \u0412 \u043a\u043e\u043d\u0446\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0412\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435 \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c canvas 2D context \u0438 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.", "localization_tags": [], "locale": "ru", "last_edit": "2016-02-08T23:28:06", "review_tags": ["technical"]}, {"uuid": "0721b048-b432-4f6a-8c02-a3b96c03a25c", "title": "Canvas\u7684\u57fa\u672c\u7528\u6cd5", "url": "/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage", "tags": ["\u56fe\u50cf", "Canvas", "\u4e2d\u7ea7", "HTML", "\u6559\u7a0b"], "summary": "<a href=\"/zh-CN/docs/Web/HTML/Element/canvas\" title=\"&lt;canvas&gt;&#x5143;&#x7D20;&#x53EF;&#x88AB;&#x7528;&#x6765;&#x901A;&#x8FC7;&#x811A;&#x672C;&#xFF08;&#x901A;&#x5E38;&#x662F;JavaScript&#xFF09;&#x7ED8;&#x5236;&#x56FE;&#x5F62;&#x3002;&#x6BD4;&#x5982;,&#x5B83;&#x53EF;&#x4EE5;&#x88AB;&#x7528;&#x6765;&#x7ED8;&#x5236;&#x56FE;&#x5F62;,&#x5236;&#x4F5C;&#x56FE;&#x7247;&#x96C6;&#x5408;,&#x751A;&#x81F3;&#x7528;&#x6765;&#x5B9E;&#x73B0;&#x52A8;&#x753B;&#x6548;&#x679C;&#x3002;&#x4F60;&#x53EF;&#x4EE5;(&#x4E5F;&#x5E94;&#x8BE5;)&#x5728;&#x5143;&#x7D20;&#x6807;&#x7B7E;&#x5185;&#x5199;&#x5165;&#x53EF;&#x63D0;&#x4F9B;&#x66FF;&#x4EE3;&#x7684;&#x7684;&#x4EE3;&#x7801;&#x5185;&#x5BB9;&#xFF0C;&#x8FD9;&#x4E9B;&#x5185;&#x5BB9;&#x5C06;&#x4F1A;&#x5728;&#x5728;&#x65E7;&#x7684;&#x3001;&#x4E0D;&#x652F;&#x6301;&lt;canvas&gt;&#x5143;&#x7D20;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x6216;&#x662F;&#x7981;&#x7528;&#x4E86;JavaScript&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6E32;&#x67D3;&#x5E76;&#x5C55;&#x73B0;&#x3002;\"><code>&lt;canvas&gt;</code></a>\u00a0\u770b\u8d77\u6765\u548c\u00a0<a href=\"/zh-CN/docs/Web/HTML/Element/img\" title=\"HTML Image &#x5143;&#x7D20;&#xFF08;&#xA0;&lt;img&gt;&#xA0;&#xFF09;&#x4EE3;&#x8868;&#x6587;&#x6863;&#x4E2D;&#x7684;&#x4E00;&#x4E2A;&#x56FE;&#x50CF;&#x3002;\"><code>&lt;img&gt;</code></a> \u5143\u7d20\u5f88\u76f8\u50cf\uff0c\u552f\u4e00\u7684\u4e0d\u540c\u5c31\u662f\u5b83\u5e76\u6ca1\u6709 src \u548c alt \u5c5e\u6027\u3002\u5b9e\u9645\u4e0a\uff0c<code>&lt;canvas&gt;</code> \u6807\u7b7e\u53ea\u6709\u4e24\u4e2a\u5c5e\u6027<strong>\u2014\u2014</strong> <code><a href=\"/zh-CN/docs/Web/HTML/Element/canvas#attr-width\">width</a></code>\u548c<code><a href=\"/zh-CN/docs/Web/HTML/Element/canvas#attr-height\">height</a></code>\u3002\u8fd9\u4e9b\u90fd\u662f\u53ef\u9009\u7684\uff0c\u5e76\u4e14\u540c\u6837\u5229\u7528 <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/DOM\" title=\"DOM: The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).\">DOM</a> <a href=\"/zh-CN/docs/Web/API/HTMLCanvasElement\">properties</a> \u6765\u8bbe\u7f6e\u3002\u5f53\u6ca1\u6709\u8bbe\u7f6e\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u7684\u65f6\u5019\uff0ccanvas\u4f1a\u521d\u59cb\u5316\u5bbd\u5ea6\u4e3a300\u50cf\u7d20\u548c\u9ad8\u5ea6\u4e3a150\u50cf\u7d20\u3002\u8be5\u5143\u7d20\u53ef\u4ee5\u4f7f\u7528<a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/CSS\" title=\"CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser.\">CSS</a>\u6765\u5b9a\u4e49\u5927\u5c0f\uff0c\u4f46\u5728\u7ed8\u5236\u65f6\u56fe\u50cf\u4f1a\u4f38\u7f29\u4ee5\u9002\u5e94\u5b83\u7684\u6846\u67b6\u5c3a\u5bf8\uff1a<span class=\"short_text\" id=\"result_box\" lang=\"zh-CN\"><span>\u5982\u679c</span><span>CSS</span></span><span class=\"gt-baf-back\">\u7684\u5c3a\u5bf8</span><span class=\"short_text\" lang=\"zh-CN\"><span>\u4e0e</span><span>\u521d\u59cb</span><span>\u753b\u5e03\u7684</span><span>\u6bd4\u4f8b\u4e0d\u4e00\u81f4</span><span>\uff0c</span><span>\u5b83\u4f1a\u51fa\u73b0</span><span>\u626d\u66f2</span><span>\u3002</span></span>", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-02-01T03:42:59", "review_tags": []}, {"uuid": "371d6547-be91-46a9-861a-86383fe1d845", "title": "Canvas\u7684\u57fa\u672c\u7528\u9014", "url": "/zh-TW/docs/Web/API/Canvas_API/Tutorial/Basic_usage", "tags": [], "summary": "<font face=\"DejaVu Sans, sans-serif\"><span lang=\"zh-TW\">\u9996\u5148\uff0c\u5148\u4f86\u770b\u770b</span></font><a href=\"/zh-TW/docs/Web/HTML/Element/canvas\" title=\"&#x9019;&#x500B; HTML &lt;canvas&gt; &#x5143;&#x7D20; &#x53EF;&#x4EE5;&#x88AB;&#x4F7F;&#x7528;&#x65BC;&#x5C0D;&#x8173;&#x672C;&#x7A0B;&#x5F0F;(JaveScript) &#x7E6A;&#x5716; .&#x8209;&#x4F8B;&#x4F86;&#x8AAA;, &#x5B83;&#x80FD;&#x7528;&#x4F86;&#x756B;&#x5716;,&#x7D44;&#x5408;&#x7167;&#x7247;,&#x751A;&#x81F3;&#x4F5C;&#x52D5;&#x756B;. &#x4F60;&#x4E5F;&#x8A31;(&#x61C9;&#x8A72;) &#x5728;&lt;canvas&gt;&#x5340;&#x6BB5;&#x5167;&#x63D0;&#x4F9B;&#x66FF;&#x4EE3;&#x65B9;&#x6848;&#x7684;&#x5167;&#x5BB9; .&#x9019;&#x5167;&#x5BB9;&#x5C07;&#x80FD;&#x88AB;&#x4E00;&#x4E9B;&#x4E0D;&#x652F;&#x63F4;&lt;canvas&gt;&#x4EE5;&#x53CA;&#x7121;&#x6CD5;&#x4F7F;&#x7528;Javescript&#x529F;&#x80FD;&#x7684;&#x700F;&#x89BD;&#x5668;&#x6240;&#x6E32;&#x67D3; .\"><code>&lt;canvas&gt;</code></a><font face=\"DejaVu Sans, sans-serif\"><span lang=\"zh-TW\">\u9019\u500b\u5143\u7d20</span></font>", "localization_tags": [], "locale": "zh-TW", "last_edit": "2016-07-06T08:22:56", "review_tags": []}], "modified": "2016-07-10T13:12:18", "label": "Basic usage of canvas", "localization_tags": [], "locale": "en-US", "id": 79143, "last_edit": "2016-07-10T13:12:10", "summary": "At first sight a <a href=\"/en-US/docs/Web/HTML/Element/canvas\" title=\"The HTML &lt;canvas&gt; Element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the &lt;canvas&gt; block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.\"><code>&lt;canvas&gt;</code></a> looks like the <a href=\"/en-US/docs/Web/HTML/Element/img\" title=\"The HTML &lt;img&gt; element represents an image in the document.\"><code>&lt;img&gt;</code></a> element, with the only clear difference being that it doesn't have the <code>src</code> and <code>alt</code> attributes. Indeed, the <code>&lt;canvas&gt;</code> element has only two attributes, <code><a href=\"/en-US/docs/Web/HTML/Element/canvas#attr-width\">width</a></code> and <code><a href=\"/en-US/docs/Web/HTML/Element/canvas#attr-height\">height</a></code>. These are both optional and can also be set using <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/DOM\" title=\"DOM: The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).\">DOM</a> <a href=\"/en-US/docs/Web/API/HTMLCanvasElement\">properties</a>. When no <code>width</code> and <code>height</code> attributes are specified, the canvas will initially be <strong>300 pixels</strong> wide and <strong>150 pixels</strong> high. The element can be sized arbitrarily by <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/CSS\" title=\"CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser.\">CSS</a>, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "The_<canvas>_element", "title": "The "}, {"id": "Fallback_content", "title": "Fallback content"}, {"id": "Required_<canvas>_tag", "title": "Required "}, {"id": "The_rendering_context", "title": "The rendering context"}, {"id": "Checking_for_support", "title": "Checking for support"}, {"id": "A_skeleton_template", "title": "A skeleton template"}, {"id": "A_simple_example", "title": "A simple example"}], "slug": "Web/API/Canvas_API/Tutorial/Basic_usage", "review_tags": []}