{"json_modified": "2015-04-30T01:58:07.045420", "slug": "Web/API/Canvas_API/Drawing_graphics_with_canvas", "tags": [], "locale": "zh-CN", "title": "Drawing graphics with canvas", "translations": [{"title": "Drawing graphics with canvas", "url": "/en-US/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas", "tags": [], "summary": "This tutorial describes how to use the <code>&lt;canvas&gt;</code> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.", "localization_tags": [], "locale": "en-US", "last_edit": "2015-01-12T08:52:24", "review_tags": []}, {"title": "Rysowanie grafik za pomoc\u0105 Canvas", "url": "/pl/docs/Rysowanie_grafik_za_pomoc%C4%85_Canvas", "tags": ["HTML:Canvas", "HTML", "Strony_wymagaj\u0105ce_dopracowania", "Wszystkie_kategorie"], "summary": "Od wersji <a href=\"/pl/Firefox_1.5_dla_programist&#xF3;w\" title=\"pl/Firefox_1.5_dla_programist&#xF3;w\">Firefoksa 1.5</a>, Firefox zawiera nowy element HTML dla programowalnej grafiki - <code>&lt;canvas&gt;</code> oparty na specyfikacji: <a class=\"external\" href=\"https://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic\">WHATWG canvas specification</a>, kt\u00f3ra bazuje na specyfikacji <code>&lt;canvas&gt;</code> Apple'a wprowadzonej w Safari. Mo\u017ce by\u0107 u\u017cyty dla wy\u015bwietlania grafik, element\u00f3w interfejsu u\u017cytkownika, i innych grafik tworzonych po stronie klienta.", "localization_tags": [], "locale": "pl", "last_edit": "2014-02-12T04:21:17", "review_tags": []}, {"title": "Dessiner avec Canvas", "url": "/fr/docs/Web/Guide/Graphics/Dessiner_avec_canvas", "tags": ["Canvas", "HTML"], "summary": "", "localization_tags": [], "locale": "fr", "last_edit": "2014-06-26T06:18:53", "review_tags": []}, {"title": "Drawing Graphics with Canvas", "url": "/ko/docs/Drawing_Graphics_with_Canvas", "tags": ["HTML", "HTML:Canvas"], "summary": "", "localization_tags": [], "locale": "ko", "last_edit": "2008-08-08T14:25:02", "review_tags": []}, {"title": "canvas \u306b\u7d75\u3092\u63cf\u304f", "url": "/ja/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas", "tags": ["HTML:Canvas", "HTML", "HTML5"], "summary": "<a href=\"ja/Firefox_1.5\">Firefox 1.5</a> \u3088\u308a\u3001 Firefox \u306f\u30d7\u30ed\u30b0\u30e9\u30e0\u53ef\u80fd\u306a\u753b\u50cf\u306e\u305f\u3081\u306e\u65b0\u3057\u3044 HTML \u8981\u7d20\u3092\u542b\u307f\u307e\u3059\u3002<code>&lt;canvas&gt;</code> \u306f <a class=\"external\" href=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\">WHATWG \u306e canvas \u306e\u4ed5\u69d8</a>\u3092\u57fa\u306b\u3057\u3066\u3044\u307e\u3059\u3002WhatWG canvas \u4ed5\u69d8\u81ea\u4f53\u306f Safari \u3067\u5b9f\u88c5\u3055\u308c\u305f Apple \u306e <code>&lt;canvas&gt;</code> \u3092\u57fa\u306b\u3057\u3066\u3044\u307e\u3059\u3002\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u4e0a\u3067\u30b0\u30e9\u30d5\u3001UI \u8981\u7d20\u3001\u304a\u3088\u3073\u4ed6\u306e\u30ab\u30b9\u30bf\u30e0\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u63cf\u753b\u306b\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2014-05-16T02:56:55", "review_tags": []}, {"title": "\u0631\u0633\u0645 \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0628\u0627 Canvas", "url": "/fa/docs/HTML/Canvas/Drawing_Graphics_with_Canvas", "tags": [], "summary": "\u0628\u0627 \u0627\u0646\u062a\u0634\u0627\u0631 <a href=\"/en/Firefox_1.5_for_developers\" title=\"/en/Firefox_1.5_for_developers\">\u0641\u0627\u06cc\u0631\u0641\u0627\u06a9\u0633 \u06f1.\u06f5</a>\u060c \u0639\u0646\u0635\u0631 \u062c\u062f\u06cc\u062f\u06cc \u0627\u0632 HTML \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u062d\u0627\u0644\u062a \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u062f\u0631 \u0641\u0627\u06cc\u0631\u0641\u0627\u06a9\u0633 \u0628\u0647 \u0648\u062c\u0648\u062f \u0622\u0645\u062f. <code>&lt;canvas&gt;</code> \u0628\u0631 \u0627\u0633\u0627\u0633 <a href=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\" title=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\">\u0645\u0633\u062a\u0646\u062f\u0627\u062a WHATWG \u0628\u0631\u0627\u06cc Canvas</a> \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u062e\u0648\u062f \u0627\u06cc\u0646 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0646\u06cc\u0632 \u0628\u0631 \u067e\u0627\u06cc\u0647\u200c\u06cc \u0639\u0646\u0635\u0631 <code>&lt;canvas&gt;</code> \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0633\u0627\u0641\u0627\u0631\u06cc \u0627\u0632 \u0627\u067e\u0644 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u0632 \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0646\u0645\u0648\u062f\u0627\u0631\u060c \u0639\u0646\u0635\u0631\u0647\u0627\u06cc \u0648\u0627\u0633\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0633\u0627\u06cc\u0631 \u0639\u0646\u0635\u0631\u0647\u0627\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.", "localization_tags": [], "locale": "fa", "last_edit": "2012-09-13T06:20:35", "review_tags": []}, {"title": "\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Canvas", "url": "/ru/docs/Web/HTML/Canvas/%D0%A0%D0%B8%D1%81%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B8_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_Canvas", "tags": [], "summary": "With <a href=\"/en/Firefox_1.5_for_developers\" title=\"en/Firefox_1.5_for_developers\">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code>&lt;canvas&gt;</code> is based on the <a class=\"external\" href=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\">WHATWG canvas specification</a>, which itself is based on Apple's <code>&lt;canvas&gt;</code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.", "localization_tags": [], "locale": "ru", "last_edit": "2014-07-02T22:52:02", "review_tags": []}, {"title": "Melukis Grafik dengan Canvas", "url": "/ms/docs/HTML/Canvas/Melukis_Grafik_dengan_Canvas", "tags": [], "summary": "With <a href=\"/en/Firefox_1.5_for_developers\" title=\"en/Firefox_1.5_for_developers\">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code>&lt;canvas&gt;</code> is based on the <a class=\"external\" href=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\">WHATWG canvas specification</a>, which itself is based on Apple's <code>&lt;canvas&gt;</code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.", "localization_tags": [], "locale": "ms", "last_edit": "2013-02-13T10:20:51", "review_tags": []}, {"title": "Dibujando gr\u00e1ficos con canvas", "url": "/es/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas", "tags": [], "summary": "Firefox 1.5, incluye un nuevo elemento HTML para gr\u00e1ficos programables. \u00a0 <canvas> est\u00e1 basado en la especificaci\u00f3n de canvas WHATWG, la que a su vez est\u00e1 basada en el <canvas> de Apple, implementado en Safari. \u00a0 Puede ser usado para la renderizaci\u00f3n de gr\u00e1ficos, elementos de Interfaz de usuarios, y otros gr\u00e1ficos personalizados en el cliente.", "localization_tags": [], "locale": "es", "last_edit": "2014-07-02T23:35:07", "review_tags": []}, {"title": "\u0995\u09cd\u09af\u09be\u09a8\u09ad\u09be\u09b8 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u0997\u09cd\u09b0\u09be\u09ab\u09bf\u0995\u09cd\u09b8 \u0986\u0981\u0995\u09be", "url": "/bn-BD/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas", "tags": ["HTML5", "Guide", "MakeBrowserAgnostic", "NeedsUpdate", "HTML", "HTML:Canvas"], "summary": "With <a href=\"/bn-BD/docs/Mozilla/Firefox/Releases/1.5\" title=\"Firefox_1.5_for_developers\">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code>&lt;canvas&gt;</code> is based on the <a href=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\">WHATWG canvas specification</a>, which itself is based on Apple's <code>&lt;canvas&gt;</code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.", "localization_tags": [], "locale": "bn-BD", "last_edit": "2014-07-02T23:12:32", "review_tags": []}, {"title": "Drawing graphics with canvas", "url": "/it/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas", "tags": [], "summary": "With <a href=\"/en-US/docs/Mozilla/Firefox/Releases/1.5\" title=\"Firefox_1.5_for_developers\">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code>&lt;canvas&gt;</code> is based on the <a href=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\">WHATWG canvas specification</a>, which itself is based on Apple's <code>&lt;canvas&gt;</code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.", "localization_tags": [], "locale": "it", "last_edit": "2014-06-23T07:08:35", "review_tags": []}, {"title": "Drawing graphics with canvas", "url": "/zh-TW/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas", "tags": [], "summary": "\u5728\u00a0<a href=\"/en-US/docs/Mozilla/Firefox/Releases/1.5\" title=\"Firefox_1.5_for_developers\">Firefox 1.5</a>, Firefox \u5f15\u5165\u4e86\u65b0\u7684 HTML \u5143\u7d20 &lt;canvas&gt; \u4f86\u7e6a\u88fd\u5716\u5f62\u3002<code>&lt;canvas&gt;</code>\u00a0\u662f\u57fa\u65bc\u00a0<a href=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\">WHATWG canvas specification</a>\u00a0\u7684\u6280\u8853 (\u5176\u767c\u8ed4\u65bc\u860b\u679c\u516c\u53f8\u5728\u00a0Safari \u4e0a\u7684\u5be6\u505a)\u3002 \u6211\u5011\u53ef\u4ee5\u7528\u5b83\u4f86\u5728\u4f7f\u7528\u8005\u7aef\u9032\u884c\u5716\u5f62\u548c UI \u5143\u4ef6\u7684\u6e32\u67d3\u3002", "localization_tags": ["inprogress"], "locale": "zh-TW", "last_edit": "2014-07-14T21:52:51", "review_tags": []}], "modified": "2015-04-30T01:58:05", "label": "Drawing graphics with canvas", "localization_tags": [], "url": "/zh-CN/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas", "last_edit": "2015-04-30T01:57:57", "summary": "With <a href=\"/en-US/docs/Mozilla/Firefox/Releases/1.5\" title=\"Firefox_1.5_for_developers\">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code>&lt;canvas&gt;</code> is based on the <a href=\"https://www.whatwg.org/specs/web-apps/current-work/#the-canvas\">WHATWG canvas specification</a>, which itself is based on Apple's <code>&lt;canvas&gt;</code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.", "sections": [{"id": "Introduction", "title": "Introduction"}, {"id": "The_2D_Rendering_Context", "title": "The 2D Rendering Context"}, {"id": "A_Simple_Example", "title": "A Simple Example"}, {"id": "Using_Paths", "title": "Using Paths"}, {"id": "Graphics_State", "title": "Graphics State"}, {"id": "A_More_Complicated_Example", "title": "A More Complicated Example"}, {"id": "Compatibility_With_Apple_.3Ccanvas.3E", "title": "Compatibility With Apple <canvas>"}, {"id": "Required_.3C.2Fcanvas.3E_tag", "title": "Required </canvas> tag"}, {"id": "Additional_Features", "title": "Additional Features"}, {"id": "Rendering_Web_Content_Into_A_Canvas", "title": "Rendering Web Content Into A Canvas"}, {"id": "See_also", "title": "See also"}], "id": 90719, "review_tags": []}