想用css实现如下的一个效果图，请问如何实现?

ruan1978 2017-11-30 09:16:06

想在css里实现这样一个圆型，请问如何实现？谢谢各位了，自己画出来实现。

...全文

183 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

当作看不见 2017-11-30

打赏
举报


<!DOCTYPE html>
<html>
	<head>
		<meta name="" content="" charset="utf-8"/>
	</head>
	<body > 
		<canvas width="300" height="300" id="myCanvas"></canvas>
	</body>
	<script type="text/javascript">
	function loading(r,n){
		var circle=n*2;
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.beginPath();
		ctx.arc(r+10,r+10,r,0,2*Math.PI);
		ctx.fillStyle='#000';
		ctx.stroke()
		
		ctx.beginPath();
		ctx.arc(r+10,r+10,r,0*Math.PI,circle*Math.PI);
		ctx.fillStyle='gold';//环形颜色设置
		ctx.fill()
		
		ctx.beginPath()
		ctx.arc(r+10,r+10,r-10,0,2*Math.PI);
		ctx.fillStyle='#000';
		ctx.stroke()
		var color=document.getElementById('myCanvas').style.backgroundColor||'#fff';
		
		console.log(color)
		ctx.fillStyle=color;
		ctx.fill()
		
		ctx.font=r/3.3+'px Verdana'
		ctx.strokeText("Big smile!",r/2.2,r+10);//中间文字设置
	}
	var timer;i=0;
	timer = setInterval(function(){
		if(timer>1){
			clearInterval(timer);
		}
		loading(60,i)
		i+=0.1;
		
	},300)
	//loading(60,1)//第一个参数为半径大小，第二个为百分比，1表示100%
	</script>
</html>

ruan1978 2017-11-30

打赏
举报

引用 1 楼 qq_29594393 的回复:


<!DOCTYPE html>
<html>
	<head>
		<meta name="" content="" charset="utf-8"/>
	</head>
	<body > 
		<canvas width="300" height="300" id="myCanvas"></canvas>
	</body>
	<script type="text/javascript">
	function loading(r,n){
		var circle=n*2;
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.beginPath();
		ctx.arc(r+10,r+10,r,0,2*Math.PI);
		ctx.fillStyle='#000';
		ctx.stroke()
		
		ctx.beginPath();
		ctx.arc(r+10,r+10,r,0*Math.PI,circle*Math.PI);
		ctx.fillStyle='gold';//环形颜色设置
		ctx.fill()
		
		ctx.beginPath()
		ctx.arc(r+10,r+10,r-10,0,2*Math.PI);
		ctx.fillStyle='#000';
		ctx.stroke()
		var color=document.getElementById('myCanvas').style.backgroundColor||'#fff';
		
		console.log(color)
		ctx.fillStyle=color;
		ctx.fill()
		
		ctx.font=r/3.3+'px Verdana'
		ctx.strokeText("Big smile!",r/2.2,r+10);//中间文字设置
	}
	var timer;i=0;
	timer = setInterval(function(){
		if(timer>1){
			clearInterval(timer);
		}
		loading(60,i)
		i+=0.1;
		
	},300)
	//loading(60,1)//第一个参数为半径大小，第二个为百分比，1表示100%
	</script>
</html>

环里的颜色是由里面的数值决定的.假如整个圆是360,那么90,就显示四分之一