{"json_modified": "2016-09-26T22:59:44.360012", "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"], "translations": [{"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": "Una de las caracter\u00edsticas m\u00e1s divertidas de canvas es la capacidad de utilizar im\u00e1genes. Estas pueden usarse para hacer composici\u00f3n de foto din\u00e1mica o como fondo de gr\u00e1ficos, etc. Para a\u00f1adir texto, consulta Dibujar texto mediante canvas. Las im\u00e1genes externas se pueden utilizar en cualquier formato admitido por\u00a0 Gecko (por ejemplo, PNG, GIF o JPEG). Otros elementos canvas de la misma p\u00e1gina tambi\u00e9n se pueden utilizar como fuente.", "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 Gecko (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\u00a0shapes\u00a0and\u00a0applied styles\u00a0to them. One of the more exciting features of <canvas> 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": "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"], "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", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-05-20T19:51:59", "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": "\u4f7f\u7528\u5f71\u50cf\u662f<canvas>\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\u5982PNG, GIF, \u6216JPEG\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.", "localization_tags": [], "locale": "zh-TW", "last_edit": "2016-07-06T08:22:57", "review_tags": []}], "modified": "2016-06-01T07:54:57", "label": "Using images", "localization_tags": [], "locale": "en-US", "id": 79163, "last_edit": "2016-06-01T07:54:52", "summary": "Importing images into a canvas is basically a two step process:", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Getting_images_to_draw", "title": "Getting images to draw"}, {"id": "Using_images_from_the_same_page", "title": "Using images from the same page"}, {"id": "Using_images_from_other_domains", "title": "Using images from other domains"}, {"id": "Using_other_canvas_elements", "title": "Using other canvas elements"}, {"id": "Creating_an_image_from_scratch", "title": "Creating an image from scratch"}, {"id": "Embedding_an_image_via_data_URL", "title": "Embedding an image via data: URL"}, {"id": "Using_frames_from_a_video", "title": "Using frames from a video"}, {"id": "Drawing_images", "title": "Drawing images"}, {"id": "Example_A_simple_line_graph", "title": "Example: A simple line graph"}, {"id": "Scaling", "title": "Scaling"}, {"id": "Example_Tiling_an_image", "title": "Example: Tiling an image"}, {"id": "Slicing", "title": "Slicing"}, {"id": "Example_Framing_an_image", "title": "Example: Framing an image"}, {"id": "Art_gallery_example", "title": "Art gallery example"}, {"id": "Controlling_image_scaling_behavior", "title": "Controlling image scaling behavior"}], "slug": "Web/API/Canvas_API/Tutorial/Using_images", "review_tags": []}