canvas drawProcess
<div class="canvas-wrap">
<canvas class="canvas" width="90" height="90" data-r-ring="4">96.1%</canvas>
</div>
function drawProcess(){
$("canvas.canvas").each(function(){
if($(this).length==0) return false;
var text = $.trim($(this).text());
var process = text.substring(0, text.length-1);
var rRing = $(this).attr("data-r-ring");
var d = parseInt($(this).width());
var r = parseInt($(this).width()/2);
var canvas = this;
var context = canvas.getContext("2d");
context.clearRect(0,0,d,d);
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r, 0, Math.PI*2, false);
context.closePath();
context.fillStyle = "#171a19";
context.fill();
context.beginPath();
context.moveTo(r,r);
context.arc(r, r, r, 0, Math.PI*2*process/100, false);
context.closePath();
context.fillStyle = "#d34544";
context.fill();
context.beginPath();
context.moveTo(r, r);
context.arc(r, r, r-rRing, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = "rgba(255,255,255,1)";
context.fill();
if(r>30){
context.font = "12px Microsoft Yahei";
context.fillStyle = "#bf2022";
context.textAlign = "center";
context.moveTo(r, r);
context.fillText("胜率", r, r-10);
context.font = "bold 20px Arial";
context.fillStyle = "#bf2022";
context.textAlign = "center";
context.moveTo(r, r);
context.fillText(text, r, r+20);
}else{
context.font = "14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
if($(this).attr("data-rank")=="top3"){
context.fillStyle = "#d34544";
}else{
context.fillStyle = "#171a19";
}
context.moveTo(r, r);
context.fillText(text, r, r);
}
});
}
function canvasSupport() {
return !!document.createElement('canvas').getContext;
}
function canvasApp() {
if (!canvasSupport()) {
$(".canvas-wrap").addClass("nocanvas");
return;
}else{
drawProcess();
}
}
canvasApp();