canvas應用-思惟導圖

canvas應用例子-思惟導圖

效果圖以下：



函數說明：

// 求圓上一點座標，返回座標點
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
    }
}

 

//畫正多邊形
function polygon(context,x, y, n, r) {
    context.beginPath();
    context.fillStyle = "rgba(215,216,217,.3)"; 
    context.strokeStyle = "hsl(210,0%,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();
}

 

//畫圓形
function circle(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();
}

 

// x座標
// y座標
// rnum 正多變行的邊的個數， 至少爲3個，不然爲圓形
// cnum 同心圖形個數
// radnum 圓形放射條數，只有圓形起做用
// R 最大半徑
// rot 旋轉角度
// arr 交點，交點個數與正多邊形邊數相同或與圓形放射條數相同
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();
}

 

//使用方法
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]);

 

例子：demo

 

參考：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial
http://www.w3schools.com/html/html5_canvas.asp