canvas应用例子-思维导图效果图如下:函数说明:
//求圆上一点坐标,返回坐标点functioncirclePoint(x,y,r,a){vartmpx=x+r*Math.cos(a*Math.PI/180);vartmpy=y+r*Math.sin(a*Math.PI/180);return{x:tmpx,y:tmpy}}
//画正多边形functionpolygon(context,x,y,n,r){context.beginPath();context.fillStyle="rgba(215,216,217,.3)";context.strokeStyle="hsl(210,0%,50%)";context.lineWidth=1;for(vari=0;i //画圆形functioncircle(context,x,y,n,r){context.beginPath();context.arc(x,y,r,0,Math.PI*2,true);context.strokeStyle="hsl(210,0%,50%)";context.fillStyle="rgba(215,216,217,.3)";context.lineWidth=1;context.stroke();context.fill();} //使用方法drawGraph(ctx,150,200,6,4,0,120,0,[1,0.25,0.75,0.75,1,0.5]);drawGraph(ctx,450,200,0,4,5,120,-30,[1,0.75,0.75,0.75,0.5]);
THE END