Canvas application-Mind Map

Canvas application example-Mind Map

As follows:



Function Description:

// Obtain the coordinates of a point on the circle and return the coordinate point function circlePoint (x, y, r, a) {var tmpx = x + r * Math. cos (a * Math. (PI/180); var tmpy = y + r * Math. sin (a * Math. PI/180); return {x: tmpx, y: tmpy }}

 

// Draw the regular polygon function polygon (context, x, y, n, r) {context. beginPath (); context. fillStyle = "rgba (215,216,217 ,. 3) "; context. strokeStyle = "hsl (50%,)"; context. lineWidth = 1; for (var I = 0; I <n; I ++) {var tmpPoint = circlePoint (x, y, r, (360/n) * I ); if (0 = I) {context. moveTo (tmpPoint. x, tmpPoint. y);} else {context. lineTo (tmpPoint. x, tmpPoint. y) ;}} context. closePath (); context. stroke (); context. fill ();}

 

// Draw the circular function circle (context, x, y, n, r) {context. beginPath (); context. arc (x, y, r, 0, Math. PI * 2, true); context. strokeStyle = "hsl (50%,)"; context. fillStyle = "rgba (215,216,217 ,. 3) "; context. lineWidth = 1; context. stroke (); context. fill ();}

 

// X coordinate // y coordinate // The number of edges of the rnum positive and variable rows, at least three; otherwise, the number of circular edges is the number of concentric images of the circular area. // The number of radnum circular radiation records, only the Circle takes effect // R maximum radius // rot Rotation Angle // arr intersection. The number of intersections is the same as the number of positive polygon edges or is the same as the number of circular radiation records. function drawGraph (ctx, x, y, rnum, cnum, radnum, R, rot, arr) {var isCircle = rnum <3? True: false; var tmpNum = 0; if (isCircle) {tmpNum = radnum;} else {tmpNum = rnum;} for (var I = 0; I <cnum; I ++) {if (isCircle) {circle (ctx, x, y, rnum, R-(R/cnum) * I);} else {polygon (ctx, x, y, rnum, R-(R/cnum) * I) ;}for (var I = 0; I <tmpNum; I ++) {ctx. beginPath (); ctx. strokeStyle = "#99999"; ctx. lineWidth = 1; ctx. moveTo (x, y); var tmpPoint = circlePoint (x, y, R, rot + (360/tmpNum) * I); ctx. lineTo (tmpPoint. x, tmpPoint. y); ctx. stroke ();} ctx. beginPath (); ctx. strokeStyle = "# 93c54f"; ctx. lineWidth = 2; var grd = ctx. createRadialGradient (x, y, 0, x, y, R); grd. addColorStop (0, "rgba (255,255,255, 0)"); grd. addColorStop (1, "rgba (128,187, 45, 0.6)"); ctx. fillStyle = grd; for (var I = 0; I <tmpNum; I ++) {var tmpPoint = circlePoint (x, y, R * arr [I], rot + (360/tmpNum) * I); if (0 = I) {ctx. moveTo (tmpPoint. x, tmpPoint. y);} else {ctx. lineTo (tmpPoint. x, tmpPoint. y) ;}} ctx. closePath (); ctx. stroke (); ctx. fill ();}

 

// Use drawGraph (ctx, 150,200, 0,120, 0.25, 0, [1, 0.75, 0.75, 0.5, 450,200, 1,]); drawGraph (ctx, 5,120,-30, [1, 0.75, 0.75, 0.75, 0.5]);

 

Example: demo

 

Refer:
Https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial
Http://www.w3schools.com/html/html5_canvas.asp