js canvas绘制芝麻信用仪表盘及雷达图效果代码-html代码-BFW代码库

js canvas绘制芝麻信用仪表盘及雷达图效果代码

代码语言：html

所属分类：图表

代码描述：js canvas绘制芝麻信用仪表盘及雷达图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<script>
    var Radar = (function(){

    var options = {

        styles: {
            offset: {
                top: 15,
                left: 0
            },
            border: {
                width: 2,
                color: '#2EC8CA'
            },
            splitLine: {
                color: '#ccc'
            },
            title: {
                font: 'bold 52px Microsoft YaHei',
                color: '#F56948'
            },
            valueRange: {
                border: {
                    width: 4,
                    color: '#FF0101'
                },
                background: '#F56948',
                arrow: 2
            },
            inner: {
                radius: 70,
                background: '#fff'
            },
            label: {
                image: '',
                font: '16px Microsoft YaHei',
                color: '#666'
            }
        }
    };

    var element,
        styles,
        borderStyle,
        splitLineStyle,
        titleStyle,
        valueRangeStyle,
        innerStyle,
        labelStyle;
    
    var extend = function(obj1, obj2){
        for(var k in obj2) {
            if(obj1.hasOwnProperty(k) && typeof obj1[k] == 'object') {
                extend(obj1[k], obj2[k]);
            } else {
                obj1[k] = obj2[k];
            }
        }
    }

    var calcLocation = function(cp, r, end){

        return {
            x: cp[0] + r * Math.cos(Math.PI * end),
            y: cp[1] + r * Math.sin(Math.PI * end)
        };
    }

    var drawLine = function(line) {
        var lines = line.lines;
        context.beginPath();
        context.moveTo(lines[0].x, lines[0].y);

        for(var i = 1; i < lines.length; i++){
            context.lineTo(lines[i].x, lines[i].y);
        }
        
        context.closePath();

        if(line.style) {
            context.strokeStyle = line.style;
            context.lineWidth = line.width || 1;
            context.stroke();
        }

        if(line.fill) {
            context.fillStyle = line.fill;
            context.fill();
        }
    }

    var fillText = function(opts){
        context.font = opts.font; 
        context.fillStyle = opts.color;
        context.textAlign = opts.align || 'center';
        context.textBaseline = opts.vertical || 'middle';  
        context.moveTo(opts.x, opts.y);  
        context.fillText(opts.text, opts.x, opts.y); 
    }

    var draw.........完整代码请登录后点击上方下载按钮下载查看