Canvas之进度条的制作（矩形，圆环）

最新推荐文章于 2023-02-19 21:07:58 发布

练过几年代码，有备而来

最新推荐文章于 2023-02-19 21:07:58 发布

阅读量714

点赞数

分类专栏： web前端开发文章标签： html canvas html5 javascript css

本文链接：https://blog.csdn.net/zhiqingxue/article/details/116800006

版权

web前端开发专栏收录该内容

19 篇文章 3 订阅

订阅专栏

Canvas之进度条的绘制

基本进度条的绘制

1.矩形进度条

关键语法

获取画笔

var ctx=document.getElementById(“id”).getContext(“2d”);
填充颜色

ctx.fillStytle=“color”;
setInternal()和clearInternal()的使用

代码(两种类型):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>矩形进度条搭建</title>
		<style>
			body{
				text-align: center;
			}
canvas{
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<h1>进度条的世界</h1>
	<canvas id="c4" width="500" height="400">
		
	</canvas>
	
	<script>
		<!-- 矩形进度条 -->
		var ctx=document.getElementById("c4").getContext("2d");  //画笔
		
		var x=100;
		var y=180;
		var xMove=1;
		
		var process=setInterval(function(){
			ctx.clearRect(0,180,400,20);   //擦掉重新绘制
			ctx.fillStyle="darkgrey";      //填充颜色
			ctx.fillRect(100,180,300,20);  //填充矩形
			ctx.fillStyle="green";
			if(x<=400-30)
			{
				ctx.fillRect(x,y,30,20);
				x+=xMove*30;
			}
			else   //两种其中加载完毕模式，我进行了注释,需要尝试的可自己引用
			{
				x=100;               //重新开始进度条
				
				// 加载完毕模式
				// clearInterval(process);
				// ctx.clearRect(0,180,400,20);
				// alert("加载完毕！");
	
			}
		},200)
	</script>
</body>
</html>`

运行结果:

给你看点好看的东西哈哈，一个视频来看结果:

https://www.bilibili.com/video/BV1AQ4y1o7TM

2.圆形进度条的绘制

关键语法

获取画笔

var ctx=document.getEelementById(“id”).getContext(“2d”);

设置画笔宽度(圆环形需要，扇形需要)

ctx.lineWidth=20(根据需要自己设置);

分别设置两个圆环,第一个颜色为转动的进度条的颜色，第二个颜色为总进度条的背景色，根据下面语法自己计算度数绘画。
```
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
```

参数表

度数计算(注意开始角的位置):

度数计算

案例代码:

1.圆环形（两种）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆形进度条的绘制</title>
		<style>
			body{
				text-align: center;
			}		
          canvas{
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<h1>圆形进度条</h1>
	<canvas id="c5" width="500" height="400">
		
	</canvas>
	
	<script>
		var  ctx=document.getElementById("c5").getContext("2d");   //获取画笔
        ctx.lineWidth="20";       //调节画笔宽度(即圆环粗细)
		var degree=360;
        
		var process=setInterval(function(){
			ctx.clearRect(0,0,500,400);    //擦掉，重新绘制
			//用设计的底色圆环
			ctx.strokeStyle="darkgreen";
			ctx.beginPath();
			ctx.arc(250,200,100,0,2*Math.PI);     //画圆
			ctx.stroke();                        
			
			//第二个圆环
			if(degree>=0)
			{
				ctx.strokeStyle="darkgrey";      //描边底色
				ctx.beginPath();
				ctx.arc(250,200,100,3*Math.PI/2,degree/360*Math.PI*2-Math.PI/2);
				ctx.stroke();
				degree-=3;
			}
			else
			{
				//循环加载
				degree=360;
				
				//一次加载完毕
				clearInterval(process);     //结束循环
				alert("加载完毕!");
				ctx.clearRect(0,0,500,400);
				
			}
		},200)
	</script>
</body>
</html>`

运行结果(一个简短视频先瞅瞅):

视频链接源地址(欢迎点赞哦绘哈哈):

是循环不止，还是踏出迷雾

练过几年代码，有备而来

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas之进度条的制作（矩形，圆环）

Canvas之进度条的绘制基本进度条的绘制1.矩形进度条关键语法获取画笔var ctx=document.getElementById(“id”).getContext(“2d”);填充颜色ctx.fillStytle=“color”;setInternal()和clearInternal()的使用代码(两种类型):`<!DOCTYPE html><html> <head> <meta...
复制链接

扫一扫