{"id":9028,"date":"2022-09-16T20:26:19","date_gmt":"2022-09-16T14:56:19","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/"},"modified":"2022-09-16T20:26:19","modified_gmt":"2022-09-16T14:56:19","slug":"solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/","title":{"rendered":"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

The radius surely in the example above would be the length of the white lines, so any length you want??<\/p>\n

If what you want is to equally divide the sector into n sub-sectors of equal arc length then you need to decide on what the maximum angle at the centre is going to be, in the above example its 90deg or pi\/2 radians.<\/p>\n

Ultimately, max angle, subsector arc length, subsector angle and radius are all connected through:<\/p>\n

subsector_arc_length = radius * subsector_angle<\/p>\n

subsector_angle = max_angle\/n<\/p>\n

or\/\/
\nsubsector_arc_length = radius * max_angle\/n (Note these require radians)<\/p>\n

But if your aim is draw this to canvas then something like:<\/p>\n

var canvas=\"<canvas id=\"canvas\" width=\"500\" height=\"500\" style=\"border: 1px solid black; width: 500px; height: 500px; background: lightblue;\"><\/canvas>\"\ndocument.body.innerHTML += canvas;\nvar canvas = document.getElementById(\"canvas\");\nvar ctx = canvas.getContext(\"2d\");\n\nvar max_angle = Math.PI\/2; \/\/rad - 90deg\nvar no_of_flows = 10; \nvar radius = 200; \/\/pixels\n\nctx.lineWidth = 5;\nctx.strokeStyle=\"#333\";\nctx.translate(250,350);\nctx.beginPath();\nctx.rotate(-Math.PI\/2);\nctx.rotate(-Math.PI\/2 + max_angle\/2);\nfor (var i=0; i<no_of_flows; i++) {\n    ctx.moveTo(0,0);\n    ctx.lineTo(0, radius);\n    ctx.stroke();\n    ctx.rotate(-1*max_angle\/(no_of_flows-1));\n};\n<\/code><\/pre>\n
Your main problem would you could probably generate a better image off canvas. + the event structure for the menu.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Need some guides to make new kind of menu by Javascript Canvas [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] The radius surely in the example above would be the length of the white lines, so any length you want?? If what you want is to equally divide the sector into n sub-sectors of equal arc length then you need to decide on what the maximum angle at the centre is going to be, … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[1728,346,896,333],"class_list":["post-9028","post","type-post","status-publish","format-standard","hentry","category-solved","tag-canvas","tag-html","tag-html5-canvas","tag-javascript"],"yoast_head":"\n[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The radius surely in the example above would be the length of the white lines, so any length you want?? If what you want is to equally divide the sector into n sub-sectors of equal arc length then you need to decide on what the maximum angle at the centre is going to be, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-16T14:56:19+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed]\",\"datePublished\":\"2022-09-16T14:56:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/\"},\"wordCount\":161,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"canvas\",\"html\",\"html5-canvas\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/\",\"name\":\"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-16T14:56:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed] - JassWeb","og_description":"[ad_1] The radius surely in the example above would be the length of the white lines, so any length you want?? If what you want is to equally divide the sector into n sub-sectors of equal arc length then you need to decide on what the maximum angle at the centre is going to be, ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/","og_site_name":"JassWeb","article_published_time":"2022-09-16T14:56:19+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed]","datePublished":"2022-09-16T14:56:19+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/"},"wordCount":161,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["canvas","html","html5-canvas","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/","name":"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-16T14:56:19+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-need-some-guides-to-make-new-kind-of-menu-by-javascript-canvas-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Need some guides to make new kind of menu by Javascript Canvas [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=9028"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9028\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=9028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=9028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=9028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}