{"id":197,"date":"2015-10-08T14:00:14","date_gmt":"2015-10-08T05:00:14","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=197"},"modified":"2015-10-08T13:42:13","modified_gmt":"2015-10-08T04:42:13","slug":"svg_array_polygon","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2015\/10\/svg_array_polygon\/","title":{"rendered":"JavaScript\u3067HTML5\u306eSVG\u306eCircle\u4e0a\u306b\u591a\u89d2\u5f62Polygon\u3092\u63cf\u753b\u3059\u308b"},"content":{"rendered":"<p>\u4eca\u56de\u306f\u3001<a href=\"http:\/\/www.takaya-com.jp\/archives\/2015\/10\/svg_removechild\/\">HTML5 SVG \u306ecircle\u4e0a\u306b\u7b49\u9593\u9694\u3067\u70b9\u63cf<\/a>\u3057\u305f\u969b\u306e\u5ea7\u6a19\u3092<br \/>\n\u914d\u5217\u306b\u683c\u7d0d\u3057\u3001\u3059\u3079\u3066\u306e\u70b9\u3092\u3064\u306a\u3044\u3067polygon\u3068\u3057\u3066\u63cf\u753b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\n \u5ea7\u6a19\u8a08\u7b97\u3084\u914d\u5217\u3078\u306e\u683c\u7d0d\u3001\u6587\u5b57\u5217\u3078\u306e\u8ffd\u52a0\u306a\u3069\u3001\u57fa\u672c\u7684\u306a\u90e8\u5206\u3082\u3042\u307e\u308a\u7701\u7565\u305b\u305a\u306b\uff08\u5197\u9577\u306b\uff09\u66f8\u304d\u8a18\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u914d\u5217\u3001\u6587\u5b57\u5217\u3092\u660e\u793a\u7684\u306b\u751f\u6210\uff08\u660e\u793a\u305b\u305a\u306bpush\u3084+\u3059\u308b\u3068\u3046\u307e\u304f\u3044\u304d\u307e\u305b\u3093\u3067\u3057\u305f\uff09<\/li>\n<li>push\u3092\u4f7f\u3044\u914d\u5217\u306b\u8ffd\u52a0\u3057\u3066\u3044\u304f<\/li>\n<li>+\u6f14\u7b97\u5b50\u3092\u4f7f\u3044\u6587\u5b57\u5217\u306b\u8ffd\u52a0\u3057\u3066\u3044\u304f<\/li>\n<li>\u5404\u70b9\u3092\u914d\u5217\u306b\u21921\u3064\u306e\u6587\u5b57\u5217\u306b\u2192\u30dd\u30ea\u30b4\u30f3\u306e\u63cf\u753b<\/li>\n<\/ul>\n<p>  <!--more--><br \/>\n\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<p>\u25bcJavaScript<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\" >\r\n<script>\r\nwindow.onload = function () {\r\n\tdrawUpdate();\r\n};\r\n\r\nfunction drawUpdate(){\r\n\tvar svg_1 = document.getElementById(\"box_1\");\r\n\tvar choice = document.getElementById('selectA');\r\n\tvar options = document.getElementById('selectA').options;\r\n\tvar polygon_num = options.item(choice.selectedIndex).value;\r\n\r\n\t\/\/\t\u5b50\u30ce\u30fc\u30c9\u306e\u6570\u3060\u3051for\u3067\u30eb\u30fc\u30d7\u3057\u3066\u3059\u3079\u3066remove\r\n\tfor (var i =svg_1.childNodes.length-1; i>=0; i--) {\r\n\t\tsvg_1.removeChild(svg_1.childNodes[i]);\r\n\t}\r\n\t\/\/\t\u57fa\u6e96\u3068\u306a\u308b\u5186\u306e\u4e2d\u5fc3 Center Of the Circle \u3068\u305d\u306e\u534a\u5f84\r\n\tvar coc_x = 200;\r\n\tvar coc_y = 200;\r\n\tvar coc_r = 150;\r\n\t\/\/\t\u30dd\u30ea\u30b4\u30f3\u306e\u5404\u70b9\u306ex,y\u5ea7\u6a19\u3092\u683c\u7d0d\u3059\u308b\u6570\u5217\r\n\tvar pg_x = new Array();\r\n\tvar pg_y = new Array();\r\n\t\/\/\t\u30dd\u30ea\u30b4\u30f3\u63cf\u753b\u6642\u306b\u3001pg_x,pg_y\u304b\u3089\u53d6\u308a\u51fa\u3057\u305f\u5ea7\u6a19\u3092\u683c\u7d0d\u3059\u308b\u6587\u5b57\u5217\r\n\tvar pg_points = new String();\r\n\r\n\/\/\t\u9078\u629e\u3055\u308c\u305f\u89d2\u6570\u304b\u3089\u89d21\u3064\u3042\u305f\u308a\u306e\u89d2\u5ea6\u3092360\u5ea6\u6570\u6cd5\u3067\u8a08\u7b97\r\n\tvar angle360 = 360 \/ polygon_num ;\r\n\r\n\t\/\/\tfor\u3067\u30eb\u30fc\u30d7\u3057\u3066polygon\u306e\u89d2\u3092\u8ffd\u52a0\u3057\u3066\u3044\u304f\r\n\tfor( i = 0 ; i < polygon_num ; i++ ){\r\n\t\tradian = (angle360*i) * Math.PI \/ 180;\r\n\t\tcos_A = Math.cos(radian);\r\n\t\tsin_A = Math.sin(radian);\r\n\t\tx = cos_A * coc_r + coc_x;\r\n\t\ty = sin_A * coc_r + coc_y;\r\n\t\tpg_x.push(x);\r\n\t\tpg_y.push(y);\r\n\t}\r\n\t\/\/\t\u591a\u89d2\u5f62\u306e\u5404\u70b9\u306ex,y\u5ea7\u6a19\u3092 pg_points \u306b\u6587\u5b57\u5217\u3068\u3057\u3066\u8ffd\u8a18\u3057\u3066\u3044\u304f\r\n\tfor(i=0 ; i<polygon_num ; i++){\r\n\t\tpg_points += pg_x[i]+\",\"+pg_y[i]+\" \";\r\n\t}\r\n\r\n\t\/\/\t\u30dd\u30ea\u30b4\u30f3\u306e\u63cf\u753b\r\n\tvar pg = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"polygon\");\r\n\tpg.setAttribute(\"points\",pg_points);\r\n\tpg.setAttribute(\"fill\",\"pink\");\r\n\tsvg_1.appendChild(pg);\r\n\r\n\t\/\/\t\u591a\u89d2\u5f62\u306e\u5468\u308a\u306e\u5186\u3092\u63cf\u753b\r\n\tvar Circle0 = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\");\r\n\tCircle0.setAttribute(\"cx\", coc_x);\r\n\tCircle0.setAttribute(\"cy\", coc_y);\r\n\tCircle0.setAttribute(\"r\", coc_r);\r\n\tCircle0.setAttribute(\"stroke\", \"blue\");\r\n\tCircle0.setAttribute(\"fill\", \"none\");\r\n\tsvg_1.appendChild(Circle0);\r\n}\r\n<\/script>\r\n<\/pre>\n<p>\u25bcCSS<\/p>\n<pre class=\"lang:css decode:true \" title=\"CSS\" >\r\n<style type=\"text\/css\">\r\nsvg{\r\n\twidth:250px;\r\n\theight:250px;\r\n}\r\n<\/style>\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"XHTML\" >\r\n<form id=\"form1\"><span>\u6b63<\/span>\r\n<select id=\"selectA\" onChange=\"drawUpdate();\">\r\n\t\t\t\t<option value=\"3\">3<\/option>\r\n\t\t\t\t<option value=\"4\">4<\/option>\r\n\t\t\t\t<option value=\"5\" selected=\"selected\">5<\/option>\r\n\t\t\t\t<option value=\"6\">6<\/option>\r\n\t\t\t\t<option value=\"7\">7<\/option>\r\n\t\t\t\t<option value=\"8\">8<\/option>\r\n\t\t\t\t<option value=\"9\">9<\/option>\r\n  <\/select><span>\u89d2\u5f62<\/span>\r\n<\/form>\r\n<svg id=\"box_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\" viewBox=\"0 0 400  400\">\r\n<\/svg>\r\n<\/pre>\n<p><a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/svg_array_polygon\/\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306f\u3001HTML5 SVG \u306ecircle\u4e0a\u306b\u7b49\u9593\u9694\u3067\u70b9\u63cf\u3057\u305f\u969b\u306e\u5ea7\u6a19\u3092 \u914d\u5217\u306b\u683c\u7d0d\u3057\u3001\u3059\u3079\u3066\u306e\u70b9\u3092\u3064\u306a\u3044\u3067polygon\u3068\u3057\u3066\u63cf\u753b\u3057\u3066\u3044\u307e\u3059\u3002 \u5ea7\u6a19\u8a08\u7b97\u3084\u914d\u5217\u3078\u306e\u683c\u7d0d\u3001\u6587\u5b57\u5217\u3078\u306e\u8ffd\u52a0\u306a\u3069\u3001\u57fa\u672c\u7684\u306a\u90e8\u5206\u3082\u3042\u307e\u308a\u7701\u7565\u305b\u305a\u306b [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,3],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/197"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":3,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/197\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}