{"json_modified": "2016-10-13T05:04:32.274561", "uuid": "e08167b6-387c-48bb-8550-95395495be20", "title": "Applying styles and colors", "url": "/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "tags": ["Canvas", "HTML5", "Graphics", "HTML", "Tutorial", "Intermediate"], "translations": [{"uuid": "1289b82e-feb2-4439-ac8c-ea147cb5194e", "title": "Stile und Farben verwenden", "url": "/de/docs/Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors", "tags": [], "summary": "Bis jetzt haben wir nur Methoden im unmittelbaren Zusammenhang mit dem Zeichnen gelernt. M\u00f6chten wir einer Form eine Farbe zuordnen, stehen uns folgenden zwei Eigenschaften zur Verf\u00fcgung: <code>fillStyle</code> und <code>strokeStyle</code>.", "localization_tags": ["inprogress"], "locale": "de", "last_edit": "2016-06-28T23:25:50", "review_tags": []}, {"uuid": "49f75bcb-b619-440e-8a72-50bdd1c7d746", "title": "Aplicaci\u00f3n de estilos y colores", "url": "/es/docs/Canvas_tutorial/Aplicaci%C3%B3n_de_estilos_y_colores", "tags": ["Tutorial Canvas", "Tutoriales", "HTML: Canvas", "para_revisar"], "summary": "", "localization_tags": [], "locale": "es", "last_edit": "2014-05-25T23:55:31", "review_tags": []}, {"uuid": "a8c640e0-b600-4c89-82c0-dec2a5d8fc9e", "title": "Ajout de styles et de couleurs", "url": "/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "tags": [], "summary": "Jusqu'\u00e0 pr\u00e9sent, nous avons seulement vu des m\u00e9thodes du contexte de dessin. Si nous voulons appliquer des couleurs \u00e0 une forme, il y a deux propri\u00e9t\u00e9s importantes que nous pouvons utiliser: <code>fillStyle</code> et <code>strokeStyle</code> .", "localization_tags": ["inprogress"], "locale": "fr", "last_edit": "2016-06-02T05:36:32", "review_tags": []}, {"uuid": "f6e5253c-dfbc-4d40-a7e6-406937b44611", "title": "\u30b9\u30bf\u30a4\u30eb\u3068\u8272\u3092\u9069\u7528\u3059\u308b", "url": "/ja/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors", "tags": [], "summary": "\u3053\u308c\u307e\u3067\u306f<strong>\u63cf\u753b\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8</strong>\u306e\u65b9\u6cd5\u306b\u3064\u3044\u3066\u306e\u307f\u898b\u3066\u304d\u307e\u3057\u305f\u3002\u8272\u3092\u56f3\u5f62\u306b\u9069\u7528\u3059\u308b\u305f\u3081\u306b\u3001\"<code>fillStyle\"\u3068<font face=\"Open Sans, Arial, sans-serif\">\"</font></code><code>strokeStyle\"\u3068\u3044\u3046</code>2\u3064\u306e\u91cd\u8981\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002", "localization_tags": ["inprogress"], "locale": "ja", "last_edit": "2016-07-29T10:13:25", "review_tags": []}, {"uuid": "80022265-38b0-4939-966d-5a3f1a3d6fa3", "title": "Applying styles and colors", "url": "/ko/docs/Web/HTML/Canvas/Tutorial/Applying_styles_and_colors", "tags": ["\uce94\ubc84\uc2a4", "\uadf8\ub798\ud53d", "HTML5"], "summary": "<a href=\"/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes\" title=\"Web/Guide/HTML/Canvas_tutorial/Drawing_shapes\">\ub3c4\ud615 \uadf8\ub9ac\uae30</a>\uc5d0\uc11c\ub294, \uc678\uacfd\uc120\uacfc \ucc44\uc6c0 \uc2a4\ud0c0\uc77c\uc5d0 \uae30\ubcf8\uac12\ub9cc\uc744 \uc0ac\uc6a9\ud588\uc5c8\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\uc11c\ub294 \uc880 \ub354 \ub208\uae38\uc744 \ub044\ub294 \uadf8\ub9bc\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574 \uce94\ubc84\uc2a4\uc758\u00a0<strong>\ubaa8\ub4e0</strong> \uc120\ud0dd\uc0ac\ud56d\uc744 \uc815\ub9ac\ud560 \uac83\uc785\ub2c8\ub2e4.", "localization_tags": [], "locale": "ko", "last_edit": "2016-07-18T02:43:23", "review_tags": []}, {"uuid": "cc215882-f591-4b71-93a1-2e2086241388", "title": "\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432", "url": "/ru/docs/Web/API/Canvas_API/Tutorial/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9_%D0%B8_%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2", "tags": [], "summary": "<span id=\"result_box\" lang=\"ru\"><span class=\"hps\">\u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440</span> <span class=\"hps\">\u043c\u044b</span> <span class=\"hps\">\u0432\u0438\u0434\u0435\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e</span> <span class=\"hps\">\u043c\u0435\u0442\u043e\u0434\u044b</span> <span class=\"hps\">\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. </span></span><span id=\"result_box\" lang=\"ru\"><span class=\"hps\">\u0415\u0441\u043b\u0438</span> <span class=\"hps\">\u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c</span> <span class=\"hps\">\u0446\u0432\u0435\u0442\u0430</span> <span class=\"hps\">\u043a \u0444\u0438\u0433\u0443\u0440\u0435</span><span>,</span> \u0442\u043e <span class=\"hps\">\u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0436\u043d\u044b\u0445</span> <span class=\"hps\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430</span>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <span class=\"hps\">\u043c\u044b \u043c\u043e\u0436\u0435\u043c</span> <span class=\"hps\">\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:</span></span> <code>fillStyle</code> \u0438 <code>strokeStyle</code>.", "localization_tags": [], "locale": "ru", "last_edit": "2016-10-13T05:04:14", "review_tags": []}, {"uuid": "4e535bbc-abdb-4d6d-8e72-75560030ef82", "title": "\u8fd0\u7528\u6837\u5f0f\u4e0e\u989c\u8272", "url": "/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "tags": ["Canvas"], "summary": "\u5230\u76ee\u524d\u4e3a\u6b62\uff0c\u6211\u4eec\u53ea\u770b\u5230\u8fc7\u7ed8\u5236\u5185\u5bb9\u7684\u65b9\u6cd5\u3002\u5982\u679c\u6211\u4eec\u60f3\u8981\u7ed9\u56fe\u5f62\u4e0a\u8272\uff0c\u6709\u4e24\u4e2a\u91cd\u8981\u7684\u5c5e\u6027\u53ef\u4ee5\u505a\u5230\uff1a<code>fillStyle</code> <span>\u548c </span><code>strokeStyle\u3002</code>", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-05-20T19:43:06", "review_tags": []}, {"uuid": "aed4f1ab-f27a-442b-a8b2-b7409243be14", "title": "\u5957\u7528\u6a23\u5f0f\u8207\u984f\u8272", "url": "/zh-TW/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "tags": [], "summary": "\u5728<a href=\"/en-US/docs//zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes\" title=\"/en-US/docs//en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes\">\u7e6a\u756b\u5716\u5f62</a>\u7ae0\u7bc0\u4e2d\uff0c\u6211\u5011\u53ea\u7528\u4e86\u9810\u8a2d\u7684\u7dda\u689d\u8207\u586b\u6eff\u6a23\u5f0f\uff0c\u800c\u5728\u672c\u7ae0\uff0c\u6211\u5011\u5c07\u9032\u4e00\u6b65\u770b\u770b\u6240\u6709\u53ef\u7528\u7684\u6a23\u5f0f\u9078\u9805\uff0c\u756b\u51fa\u66f4\u5438\u5f15\u4eba\u7684\u5716\u3002", "localization_tags": [], "locale": "zh-TW", "last_edit": "2016-07-06T08:22:58", "review_tags": []}], "modified": "2016-08-30T02:44:24", "label": "Applying styles and colors", "localization_tags": [], "locale": "en-US", "id": 79221, "last_edit": "2016-08-30T02:44:09", "summary": "Up until now we have only seen methods of the drawing context. If we want to apply colors to a shape, there are two important properties we can use: <code>fillStyle</code> and <code>strokeStyle</code>.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Colors", "title": "Colors"}, {"id": "A_fillStyle_example", "title": "A "}, {"id": "A_strokeStyle_example", "title": "A "}, {"id": "Transparency", "title": "Transparency"}, {"id": "A_globalAlpha_example", "title": "A "}, {"id": "An_example_using_rgba()", "title": "An example using "}, {"id": "Line_styles", "title": "Line styles"}, {"id": "A_lineWidth_example", "title": "A "}, {"id": "A_lineCap_example", "title": "A "}, {"id": "A_lineJoin_example", "title": "A "}, {"id": "A_demo_of_the_miterLimit_property", "title": "A demo of the "}, {"id": "Using_line_dashes", "title": "Using line dashes"}, {"id": "Gradients", "title": "Gradients"}, {"id": "A_createLinearGradient_example", "title": "A "}, {"id": "A_createRadialGradient_example", "title": "A "}, {"id": "Patterns", "title": "Patterns"}, {"id": "A_createPattern_example", "title": "A "}, {"id": "Shadows", "title": "Shadows"}, {"id": "A_shadowed_text_example", "title": "A shadowed text example"}, {"id": "Canvas_fill_rules", "title": "Canvas fill rules"}], "slug": "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "review_tags": []}