php虚线园的代码,canvas画虚线圆

本文要实现的图形

一个简单的占比统计。。

实现的方案是html js合成

首先是简单的HTML布局

statistics

.zh-chart {

width: 100px;

height: 100px;

background: #142838;

}

然后通过js来实现我们的最终效果，相应的操作都有注释。

var chartEle = $('.zh-chart');

var canvas = document.createElement('canvas');

canvas.width = chartEle.width();

canvas.height = chartEle.height();

var radius = canvas.width/2;

chartEle.append(canvas);

var ctx = canvas.getContext('2d');

// 内圆

ctx.arc(radius, radius, radius*2/3, 0, 2*Math.PI);

ctx.fillStyle="rgba(22,196,203,0.1)";

ctx.fill();

ctx.strokeStyle = '#16C4CB';

ctx.stroke();

// 虚线圆环

ctx.translate(radius, radius); // 改变旋转中心

ctx.beginPath();

ctx.arc(0, 0, radius*2/3+4, 0, Math.PI/30);

ctx.strokeStyle = '#16C4CB';

ctx.stroke();

ctx.closePath();

for(var i=0; i<40; i++) {

ctx.beginPath();

ctx.rotate(10*Math.PI/180);

ctx.arc(0, 0, radius*2/3+4, 0, Math.PI/30);

ctx.strokeStyle = '#16C4CB';

ctx.stroke();

ctx.closePath();

}

// 外圆环

ctx.beginPath();

ctx.arc(0, 0, radius-4, 0, 2*Math.PI);

ctx.strokeStyle = '#16C4CB';

ctx.stroke();

ctx.closePath();

// 数据渲染

var data = [

{val: chartEle.data('b'), color: '#AF4A6F'},

{val: chartEle.data('c'), color: '#16C4CB'},

{val: chartEle.data('d'), color: '#887BD0'},

{val: chartEle.data('e'), color: '#19B478'},

{val: chartEle.data('f'), color: '#DE725A'}

];

// ctx.rotate(100*Math.PI/180);

for(var j=0; j<5; j++) {

var rate = data[j].val.split('/');

ctx.beginPath();

ctx.rotate(72*Math.PI/180);

ctx.arc(0, 0, radius-4, 0, (2*Math.PI)/5*(rate[0]/rate[1]));

ctx.strokeStyle = data[j].color;

ctx.lineWidth = 5;

ctx.stroke();

ctx.closePath();

}

感觉关注~~~~ 啦啦啦