在做项目的过程中,遇到以下的需求:根据等级绘制环形进度条。下面把代码粘贴如下:
代码如下:
<canvas id="radius" width="110" height="110">
</canvas>
<script type="text/javascript">
var ctx = document.getElementById('radius').getContext('2d');
//画笔设置
ctx.strokeStyle = "rgba(216,216,216,100)";
ctx.lineWidth = "5";
ctx.lineCap = 'round';
//画星星
var img = new Image();
img.src="star.png";
img.onload = function(){
ctx.drawImage(img, 40, 40, 28, 28);
};
//灰色圆环
ctx.beginPath();
ctx.arc(55, 55, 50, 65 * Math.PI / 180, 115 * Math.PI / 180, true);
ctx.stroke();
ctx.closePath();
//白色圆环
drawArc(.8, ctx, "3/24");
//根据角度比例画圆弧,和奖杯个数
function drawArc(ratio, ctx, text){
//设置
ctx.strokeStyle = "rgba(255,255,255,100)";
var startAngle = 115 * Math.PI / 180;
var endAngle = (115 + 310 * ratio) * Math.PI / 180;
ctx.beginPath();
ctx.arc(55, 55, 50, startAngle, endAngle, false);
ctx.stroke();
ctx.closePath();
var myText = ctx.measureText(text);
ctx.fillStyle = 'rgba(255,255,255,100)';
ctx.font = "12px Microsoft YaHei";
ctx.fillText(text, (110 - myText.width)/2 - 2, 105);
}
</script>
结果:以上代码的结果如上图。
问题:发现文字字体在手机上设置不生效,我设置的是雅黑字体,但是,它在手机上是手机默认字体。
解决方法:在canvas里设置了一个div,用来显示字体。也就是说,不用画笔在canvas里写字。