圆形扇形加载动画 canvas

最新推荐文章于 2025-04-21 21:32:43 发布

weixin_34212762

最新推荐文章于 2025-04-21 21:32:43 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/554046/blog/1511136

本文介绍了一种使用DOM操作及Canvas API创建动态加载图标的方法。通过JavaScript编程实现了一个旋转的圆形加载动画，并详细展示了如何设置画布、绘制圆形路径及更新图片源的过程。

2019独角兽企业重金招聘Python工程师标准>>>

用DOM来操作方便多了。

1、在html中添加一张图片

<img id="circleloading" src="">

2、制作图片

//执行
circle(35);

function circle(bfb) {
    //10等分
	var df=Math.floor(bfb/10)*0.2;
	
	var percent = -0.5 + df;
	percent = percent.toFixed(1); //只保留1位
	if (percent > 1.5) {
		return false;
	}
	var canvas = document.createElement("canvas");
	context = canvas.getContext("2d"); //画布

	context.beginPath();
	//定位画布的起点坐标
	context.translate(100, 100);
	//起始连接点 直线链接
	context.moveTo(0, 0);
	//结束点的位置
	context.arc(0, 0, 50, -0.5 * Math.PI, percent * Math.PI);
	//填充颜色
	context.fillStyle = "#ccc"; //填充颜色
	context.fill();

	var img = canvas.toDataURL("image/png");
	var circleimg = document.getElementById("circleloading");
	circleimg.src=img;	
}

参考资料： http://www.clanfei.com/2014/12/1745.html

转载于:https://my.oschina.net/u/554046/blog/1511136