canvas

<script>
var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
//外圆
ctxt.beginPath();
ctxt.moveTo(w * 0.5 ,h * 0.5);
ctxt.arc(w * 0.5 ,h * 0.5 , 100 , 0 ,Math.PI *2);
ctxt.closePath();
ctxt.fillStyle = "#f96032";
ctxt.fill();

//内圆
ctxt.beginPath();
ctxt.moveTo(w * 0.5 ,h * 0.5);
ctxt.arc(w * 0.5 ,h * 0.5 , 93 , 0 ,Math.PI *2);
ctxt.closePath();
ctxt.fillStyle = "#fff";
ctxt.fill();

//圆环内文字
var barW = $('.tin-piebar').width();
var barH = $('.tin-piebar').height();
var barInfoW = $('.tip-piebar').width();
var barInfoH = $('.tip-piebar').height();
console.log(barW)
$('.tip-piebar').css({
'top' : (barH - barInfoH) /2,
'left': (barW - barInfoW) /2
})
$(window).resize(resizeCanvas);
function resizeCanvas() {
canvas.attr("width", $(window).get(0).innerWidth);
// canvas.attr("height", $(window).get(0).innerHeight);
// context.fillRect(0, 0, canvas.width(), canvas.height());
};
resizeCanvas();

</script>