canvas小練習

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

js

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#d2d4d8";
ctx.fill();
ctx.beginPath();
ctx.arc(100, 75, 50, 1.5 * Math.PI, Math.PI * 0.2);
ctx.fillStyle = "#D6AD3D";
ctx.fill();
ctx.beginPath();
ctx.arc(100, 75, 46, 0, 2 * Math.PI);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.font = "bold 10pt Arial";
ctx.fillStyle = '#D6AD3D';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText("22%", 100, 75);

 效果