使用canvas实现一个扇形loading动态图

最新推荐文章于 2022-08-19 11:16:59 发布

guoxiaxing

最新推荐文章于 2022-08-19 11:16:59 发布

阅读量856

点赞数

分类专栏： Javascript HTML+CSS 文章标签： canvas画图

本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/89644998

版权

本文介绍如何使用HTML5的canvas元素来创建一个动态显示的扇形加载进度条，详细解析绘制过程及动画实现原理。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>loading</title>
	<style>
		#box{
			font-size: 20px;
			font-weight: bold;
			color:red;
			padding-left: 200px;
		}
	</style>
</head>
<body>
	<canvas id='can' width='500px' height='500px'></canvas>
	<div id='box'></div>
	<script>
	let can = document.getElementById('can');
	let box = document.getElementById('box');
	let ctx = can.getContext('2d');
	// 画扇形的方法
	CanvasRenderingContext2D.prototype.sector = function(x,y,r,bDeg,eDeg){
		this.save();
		this.beginPath();
		this.moveTo(x,y);
		this.arc(x,y,r,bDeg*Math.PI/180,eDeg*Math.PI/180);
		this.closePath();
		this.restore();
		return this;
	}
	//让扇形不断的画直到变成圆形
	var timer = null;
	var angle = 0;
	var number = 0;
	bo