本項(xiàng)目Github地址 https://github.com/brickspert/canvas-circle/
Canvas中文文檔 https://developer.mozilla.org/zhCN/docs/Web/API/Canvas_API
- 目標(biāo)效果
目標(biāo)效果
- 代碼
-
HTML
```
<canvas id="circle" height="132px" width="132px">
</canvas> JS
```
circle();
function circle() {
var canvas = document.getElementById('circle');
var ctx = canvas.getContext("2d");
/*填充文字*/
ctx.font = "18px Microsoft YaHei";
/*文字顏色*/
ctx.fillStyle = '#4b4d4e';
/*文字內(nèi)容*/
var insertContent = '語(yǔ)言';
var text = ctx.measureText(insertContent);
/*插入文字，后面兩個(gè)參數(shù)為文字的位置*/
/*此處注意：text.width獲得文字的寬度，然后就能計(jì)算出文字居中需要的x值*/
ctx.fillText(insertContent, (132 - text.width) / 2, 58);
/*填充百分比*/
ctx.fillStyle = '#e24464';
var ratioStr = '25%';
var text = ctx.measureText(ratioStr);
ctx.fillText(ratioStr, (132 - text.width) / 2, 85);
/*開始圓環(huán)*/
var circleObj = {
ctx: ctx,
/*圓心*/
x: 66,
y: 66,
/*半徑*/
radius: 55,
/*環(huán)的寬度*/
lineWidth: 22
}
/*有色的圓環(huán)*/
/*從-90度的地方開始畫*/
circleObj.startAngle = 0;
/*從當(dāng)前度數(shù)減去-90度*/
circleObj.endAngle = Math.PI * 2 * 0.25;
circleObj.color = '#e24464';
drawCircle(circleObj);
/*灰色的圓環(huán)*/
/*開始的度數(shù)-從上一個(gè)結(jié)束的位置開始*/
circleObj.startAngle = circleObj.endAngle;
/*結(jié)束的度數(shù)*/
circleObj.endAngle = Math.PI * 2;
circleObj.color = '#e9e9e9';
drawCircle(circleObj);
}
/*畫曲線*/
function drawCircle(circleObj) {
var ctx = circleObj.ctx;
ctx.beginPath();
ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle, false);
//設(shè)定曲線粗細(xì)度
ctx.lineWidth = circleObj.lineWidth;
//給曲線著色
ctx.strokeStyle = circleObj.color;
//連接處樣式
ctx.lineCap = 'round';
//給環(huán)著色
ctx.stroke();
ctx.closePath();
}
```
-
其他
如果要實(shí)現(xiàn)這樣的效果
目標(biāo)效果- 先畫灰色的圓環(huán)，再畫有色的圓環(huán)；
- 從-90度開始開始畫。
- 祝你好運(yùn)。
