{"json_modified": "2016-09-26T22:59:43.383123", "uuid": "30f654a6-217e-43bb-8f6a-549a307cfd1e", "title": "\u5e94\u7528\u56fe\u50cf Using images", "url": "/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images", "tags": ["Canvas"], "translations": [{"uuid": "abb41717-96d4-4464-b316-6bcb21752d55", "title": "Using images", "url": "/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images", "tags": ["Canvas", "Graphics", "HTML", "Tutorial", "Advanced"], "summary": "Importing images into a canvas is basically a two step process:", "localization_tags": [], "locale": "en-US", "last_edit": "2016-06-01T07:54:52", "review_tags": []}, {"uuid": "091a111d-0461-4ea8-9497-dcb8417b7a88", "title": "Canvas_tutori\u00e1l/Pou\u017e\u00edt\u00ed_obr\u00e1zk\u016f", "url": "/cs/docs/Canvas_tutori%C3%A1l/Pou%C5%BE%C3%ADt%C3%AD_obr%C3%A1zk%C5%AF", "tags": ["Pot\u0159ebuje_p\u0159elo\u017eit", "Canvas tutorial"], "summary": "", "localization_tags": [], "locale": "cs", "last_edit": "2014-05-24T09:20:21", "review_tags": []}, {"uuid": "53e338ca-158d-430a-95f4-d7b31cb44dd6", "title": "Bilder", "url": "/de/docs/Web/Guide/HTML/Canvas_Tutorial/Bilder", "tags": [], "summary": "Nat\u00fcrlich k\u00f6nnen auch Bilder gezeichnet werden. Diese k\u00f6nnen die unterschiedlichsten Formate haben: PNG, GIF, JPEG oder bestimmte HTML Elemente.", "localization_tags": [], "locale": "de", "last_edit": "2016-06-21T23:03:00", "review_tags": []}, {"uuid": "93dead39-5874-4cbc-a498-9e059e08d414", "title": "Usar im\u00e1genes", "url": "/es/docs/Canvas_tutorial/Usar_im%C3%A1genes", "tags": ["Tutorial Canvas", "Tutoriales", "HTML:Canvas", "para_revisar"], "summary": "<span class=\"goog-gtc-unit\" id=\"goog-gtc-unit-2\"><span class=\"goog-gtc-translatable goog-gtc-from-human\" dir=\"ltr\">Una de las caracter\u00edsticas m\u00e1s divertidas de canvas es la capacidad de utilizar im\u00e1genes.</span></span> <span class=\"goog-gtc-unit\" id=\"goog-gtc-unit-3\"><span class=\"goog-gtc-translatable goog-gtc-from-human\" dir=\"ltr\" style=\"\">Estas pueden usarse para hacer composici\u00f3n de foto din\u00e1mica o como fondo de gr\u00e1ficos, etc. Para a\u00f1adir texto, consulta <a href=\"/Dibujar_texto_mediante_canvas\" title=\"Dibujar texto mediante canvas\">Dibujar texto mediante canvas</a>.</span></span> <span class=\"goog-gtc-unit\" id=\"goog-gtc-unit-4\"><span class=\"goog-gtc-translatable goog-gtc-from-human\" dir=\"ltr\" style=\"\">Las im\u00e1genes externas se pueden utilizar en cualquier formato admitido por\u00a0 <a href=\"/en/Gecko\" title=\"en/Gecko\">Gecko</a> (por ejemplo, PNG, GIF o JPEG).</span></span> <span class=\"goog-gtc-unit\" id=\"goog-gtc-unit-5\"><span class=\"goog-gtc-translatable goog-gtc-from-human\" dir=\"ltr\" style=\"\">Otros elementos canvas de la misma p\u00e1gina tambi\u00e9n se pueden utilizar como fuente.</span></span>", "localization_tags": [], "locale": "es", "last_edit": "2014-05-25T23:56:02", "review_tags": []}, {"uuid": "c0b48688-6083-4614-9a87-176fcf98eae9", "title": "Utilisation d'images", "url": "/fr/docs/Tutoriel_canvas/Utilisation_d'images", "tags": ["Canvas", "Tutoriel_canvas", "Tutoriels"], "summary": "Une des fonctionnalit\u00e9s les plus amusantes de canvas est la possibilit\u00e9 d'utiliser des images. Celles-ci peuvent \u00eatre utilis\u00e9es pour de la composition dynamique de photos ou comme fond pour des graphiques, etc. Il s'agit \u00e9galement de la seule mani\u00e8re d'y ajouter du texte (la sp\u00e9cification ne pr\u00e9voit aucune fonction pour dessiner du texte). Les images externes peuvent \u00eatre utilis\u00e9es dans tout format g\u00e9r\u00e9 par <a href=\"/fr/Gecko\" title=\"fr/Gecko\">Gecko</a> (c'est-\u00e0-dire au format PNG, GIF ou JPEG). D'autres \u00e9l\u00e9ments canvas de la m\u00eame page peuvent \u00e9galement \u00eatre utilis\u00e9s comme source.", "localization_tags": [], "locale": "fr", "last_edit": "2016-06-01T07:55:46", "review_tags": []}, {"uuid": "22fce39d-1685-4f64-a66b-792916639141", "title": "\u753b\u50cf\u3092\u4f7f\u3046", "url": "/ja/docs/Web/Guide/HTML/Canvas_tutorial/Using_images", "tags": ["Canvas", "Graphics", "HTML", "Tutorial", "Advanced"], "summary": "\u57fa\u672c\u7684\u306b\u306f 2 \u30b9\u30c6\u30c3\u30d7\u306e\u624b\u7d9a\u304d\u306b\u3088\u3063\u3066\u3001\u753b\u50cf\u3092 canvas \u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059:", "localization_tags": [], "locale": "ja", "last_edit": "2016-08-31T09:07:41", "review_tags": []}, {"uuid": "ce6ed308-ac85-4e72-a7df-9898c9e85052", "title": "Using images", "url": "/ko/docs/Canvas_tutorial/Using_images", "tags": ["\uce94\ubc84\uc2a4", "\uadf8\ub798\ud53d"], "summary": "Until now we have created our own\u00a0<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes\">shapes</a>\u00a0and\u00a0<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors\">applied styles</a>\u00a0to them. One of the more exciting features of <a href=\"/ko/docs/Web/HTML/Element/canvas\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;canvas&gt;</code></a> is the ability to use images. \u00a0These can be used to do dynamic photo compositing or as backdrops of graphs, for sprites in games, and so forth.\u00a0External images can be used in any format supported by the browser, such as PNG, GIF, or JPEG. You can even use the image produced by other canvas elements on the same page as the source!", "localization_tags": [], "locale": "ko", "last_edit": "2016-01-10T23:18:45", "review_tags": []}, {"uuid": "d4cc4a98-2c6d-416e-973e-7f8c5f114a6c", "title": "\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439", "url": "/ru/docs/Web/API/Canvas_API/Tutorial/%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9", "tags": ["\u0413\u0440\u0430\u0444\u0438\u043a\u0430"], "summary": "\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 canvas \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u00a02 \u044d\u0442\u0430\u043f\u043e\u0432:", "localization_tags": [], "locale": "ru", "last_edit": "2016-09-10T09:57:45", "review_tags": []}, {"uuid": "76c74f3f-cd20-4918-b7f4-6ee34769656d", "title": "\u4f7f\u7528\u5f71\u50cf", "url": "/zh-TW/docs/Web/API/Canvas_API/Tutorial/Using_images", "tags": [], "summary": "<font face=\"DejaVu Sans\"><span lang=\"zh-TW\"><font face=\"DejaVu Sans, sans-serif\">\u4f7f\u7528\u5f71\u50cf\u662f</font></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\"><span lang=\"zh-TW\"><font face=\"DejaVu Sans, sans-serif\">\u53e6\u4e00\u500b\u6709\u8da3\u7684\u529f\u80fd\uff0c\u9019\u500b\u529f\u80fd\u53ef\u4ee5\u7528\u4f86\u52d5\u614b\u7d44\u5408\u5716\u7247\u6216\u4f5c\u70ba\u80cc\u666f\u7b49\u7b49\u3002\u4efb\u4f55\u700f\u89bd\u5668\u652f\u63f4\u7684\u5916\u90e8\u5716\u7247\u683c\u5f0f\u90fd\u53ef\u4ee5\u4f7f\u7528\uff0c\u4f8b\u5982</font></span></font><font face=\"DejaVu Sans, sans-serif\">PNG, GIF, </font><font face=\"DejaVu Sans\"><span lang=\"zh-TW\"><font face=\"DejaVu Sans, sans-serif\">\u6216</font></span></font><font face=\"DejaVu Sans, sans-serif\">JPEG</font><font face=\"DejaVu Sans\"><span lang=\"zh-TW\"><font face=\"DejaVu Sans, sans-serif\">\uff0c\u751a\u81f3\u4e5f\u53ef\u4ee5\u5229\u7528\u540c\u4e00\u4efd\u9801\u9762\u4e0a\u5176\u4ed6\u756b\u5e03\u5143\u7d20\u7522\u751f\u7684\u5f71\u50cf.</font></span></font>", "localization_tags": [], "locale": "zh-TW", "last_edit": "2016-07-06T08:22:57", "review_tags": []}], "modified": "2016-09-26T22:59:42", "label": "\u5e94\u7528\u56fe\u50cf Using images", "localization_tags": [], "locale": "zh-CN", "id": 14796, "last_edit": "2016-05-20T19:51:59", "summary": "canvas\u66f4\u6709\u610f\u601d\u7684\u4e00\u9879\u7279\u6027\u5c31\u662f\u56fe\u50cf\u64cd\u4f5c\u80fd\u529b\u3002\u53ef\u4ee5\u7528\u4e8e\u52a8\u6001\u7684\u56fe\u50cf\u5408\u6210\u6216\u8005\u4f5c\u4e3a\u56fe\u5f62\u7684\u80cc\u666f\uff0c\u4ee5\u53ca\u6e38\u620f\u754c\u9762\uff08Sprites\uff09\u7b49\u7b49\u3002\u6d4f\u89c8\u5668\u652f\u6301\u7684\u4efb\u610f\u683c\u5f0f\u7684\u5916\u90e8\u56fe\u7247\u90fd\u53ef\u4ee5\u4f7f\u7528\uff0c\u6bd4\u5982PNG\u3001GIF\u6216\u8005JPEG\u3002 \u4f60\u751a\u81f3\u53ef\u4ee5\u5c06\u540c\u4e00\u4e2a\u9875\u9762\u4e2d\u5176\u4ed6canvas\u5143\u7d20\u751f\u6210\u7684\u56fe\u7247\u4f5c\u4e3a\u56fe\u7247\u6e90\u3002", "sections": [{"id": "Quick_Links", "title": null}, {"id": "\u83b7\u5f97\u9700\u8981\u7ed8\u5236\u7684\u56fe\u7247", "title": "\u83b7\u5f97\u9700\u8981\u7ed8\u5236\u7684\u56fe\u7247"}, {"id": "Using_images_which_are_on_the_same_page", "title": "\u4f7f\u7528\u76f8\u540c\u9875\u9762\u5185\u7684\u56fe\u7247"}, {"id": "Using_other_canvas_elements", "title": "\u4f7f\u7528\u5176\u5b83\u57df\u540d\u4e0b\u7684\u56fe\u7247"}, {"id": "Using_other_canvas_elements", "title": "\u4f7f\u7528\u5176\u5b83 canvas \u5143\u7d20"}, {"id": "Creating_an_image_from_scratch", "title": "\u7531\u96f6\u5f00\u59cb\u521b\u5efa\u56fe\u50cf"}, {"id": "Embedding_an_image_via_data:_url", "title": "\u901a\u8fc7 data: url \u65b9\u5f0f\u5d4c\u5165\u56fe\u50cf"}, {"id": "drawImage", "title": "\u4f7f\u7528\u89c6\u9891\u5e27"}, {"id": "drawImage", "title": "\u7ed8\u5236\u56fe\u7247"}, {"id": "drawImage_example_1", "title": "\u4f8b\u5b50\uff1a\u4e00\u4e2a\u7b80\u5355\u7684\u7ebf\u56fe"}, {"id": "Scaling", "title": "\u7f29\u653e Scaling"}, {"id": "drawImage_example_2", "title": null}, {"id": "Slicing", "title": "\u5207\u7247 Slicing"}, {"id": "drawImage_example_3", "title": null}, {"id": "Art_gallery_example", "title": "\u793a\u4f8b\uff1a\u753b\u5eca Art gallery example"}, {"id": "\u63a7\u5236\u56fe\u50cf\u7684\u7f29\u653e\u884c\u4e3a_Controlling_image_scaling_behavior", "title": "\u63a7\u5236\u56fe\u50cf\u7684\u7f29\u653e\u884c\u4e3a Controlling image scaling behavior"}], "slug": "Web/API/Canvas_API/Tutorial/Using_images", "review_tags": []}