yichael
/
yichael_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    canvas{
    }
  </style>
</head>
<body>
<script type="text/javascript">
    var mW = 200;
    var mH = 200;
    var mData = [
        ['原理认知', 21],
        ['实景勘察', 56],
        ['虚拟技术搭建', 46],
        ['虚拟艺术创作', 50],
        ['虚拟资源库建设', 80]
    ];
    var mCount = mData.length; //边数
    var mCenter = mW /2; //中心点
    var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
    var mAngle = Math.PI * 2 / mCount; //角度
    var mCtx = null;
    var mColorPolygon = '#B8B8B8'; //多边形颜色
    var mColorLines = '#B8B8B8'; //顶点连线颜色
    var mColorText = '#000000';

    //初始化
    (function(){
        var canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        canvas.height = mH;
        canvas.width = mW;
        mCtx = canvas.getContext('2d');
        drawPolygon(mCtx);
        drawLines(mCtx);
        drawRegion(mCtx);
        drawText(mCtx);
        drawCircle(mCtx);
        drawLines1(mCtx)
    })();

    // 绘制多边形边
    function drawPolygon(ctx){
        ctx.save();

        ctx.strokeStyle = mColorPolygon;
        var r = mRadius/ mCount; //单位半径
        // var r = mRadius/ (mCount-2); //单位半径  画三个五边形
        //画5个圈
        for(var i = 0; i < mCount; i ++){
         // for(var i = 0; i < mCount-2; i ++){ // 画三个五边形
            ctx.beginPath();
            var currR = r * ( i + 1); //当前半径
            //画5条边
            for(var j = 0; j < mCount; j ++){
                var x = mCenter + currR * Math.cos(mAngle * j);
                var y = mCenter + currR * Math.sin(mAngle * j);

                ctx.lineTo(x, y);
            }
            ctx.closePath()
            ctx.stroke();
        }

        ctx.restore();
    }

    //顶点连线
    function drawLines(ctx){
        ctx.save();

        ctx.beginPath();
        ctx.strokeStyle = mColorLines;

        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i);
            var y = mCenter + mRadius * Math.sin(mAngle * i);

            ctx.moveTo(mCenter, mCenter);
            ctx.lineTo(x, y);
        }

        ctx.stroke();

        ctx.restore();
    }

    //数据点之间的连线
    function drawLines1(ctx){
        ctx.save();
        ctx.beginPath();
        var count = 0;
        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
            count = i + 1;
            if (count < mCount) {
                var x1 = mCenter + mRadius * Math.cos(mAngle * (i+1)) * mData[i+1][1] / 100;
                var y1 = mCenter + mRadius * Math.sin(mAngle * (i+1)) * mData[i+1][1] / 100;
            }else{
                var x1 = mCenter + mRadius * Math.cos(mAngle * 0) * mData[0][1] / 100;
                var y1 = mCenter + mRadius * Math.sin(mAngle * 0) * mData[0][1] / 100;
            }
            ctx.moveTo(x, y);
            ctx.lineTo(x1, y1);
            ctx.lineWidth = 2;          //设置线宽状态
            ctx.strokeStyle = '#1478FA';  //设置线的颜色状态
        }
        ctx.stroke();

        ctx.restore();
    }
    //绘制文本
    function drawText(ctx){
        ctx.save();

        var fontSize = mCenter / 12;
        ctx.font = fontSize + 'px Microsoft Yahei';
        ctx.fillStyle = mColorText;

        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i);
            var y = mCenter + mRadius * Math.sin(mAngle * i);

            if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
                ctx.fillText(mData[i][0], x, y + fontSize);
            }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
                ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
            }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
                ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
            }else{
                ctx.fillText(mData[i][0], x, y);
            }

        }
        //中心绘制文字
        ctx.font="bold 36px Arial"
        ctx.fillStyle='#1478FA'
        ctx.fillText("75",mCenter-18,mCenter+16);

        ctx.restore();
    }

    //绘制数据区域
    function drawRegion(ctx){
        ctx.save();

        ctx.beginPath();
        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

            ctx.lineTo(x, y);
        }
        ctx.closePath();
        ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
        ctx.fill();

        ctx.restore();
    }

    //画点
    function drawCircle(ctx){
        ctx.save();

        var r = mCenter / 50;
        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(20, 120, 250, 0.8)';
            ctx.fill();
        }

        ctx.restore();
    }
</script>

</body>
</html>