文档章节

圆形扇形加载动画 canvas

大灰狼wow
 大灰狼wow
发布于 2017/08/16 13:53
字数 150
阅读 32
收藏 0

用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

© 著作权归作者所有

大灰狼wow
粉丝 48
博文 394
码字总数 48677
作品 1
嘉兴
程序员
私信 提问
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

前言:   此事例是在vue组件中,使用canvas实现倒计时动画的效果。其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了   canvas动画的原理:利用定时器...

damon风
2017/11/23
0
0
UI 设计师 SVG 动画进阶篇——蒙版动画(下)

继续上篇 6.动态蒙版位移的产生的扫描效果 这个算是上篇末尾的一点小改进,单独拿出来说,因为这种效果用的场景很多,关键还简单,先看示意图。 设想一下,给文本应用一个蒙版,蒙版的白色部...

泱泱
2017/05/22
0
0
Animation_ProgressAnimation

Welcome to my blog. Thanks. Dome: github地址 今天主要讲一些动画的运用,也就是进度条,有弧形的,扇形的,圆形的。 其实没什么难点,我封装在一个个View里,直接调用就行,弧度跟着进度条...

iOS小童
2017/11/23
0
0
画影图形: SVG & Canvas Shapes

画影图形指描画犯人面影,悬赏通缉。这里用法明显有问题,不过取其表义而已。 在一个前端看来,画图有三种方法,Cavas,SVG 以及 CSS。至于三者优劣,将在此针对各种图形做逐一比较,有方,圆...

shanyue
2018/07/23
0
0
Android 仿 PPT 进入动画效果合集

EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机线条效...

wangpeiming110
2017/07/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nproc systemd on CentOS 7

Increasing nproc for processes launched by systemd on CentOS 7 Ask Question I have successfully increased the nofile and nproc value for the local users, but I couldn't find a p......

MtrS
今天
3
0
了解微信小程序下拉刷新功能

小程序提供了这个事件。 onPullDownRefresh() 监听用户下拉刷新事件。 如果要开启下拉刷新功能,要先到json配置: "enablePullDownRefresh":true 配置后下拉有反应了但是没有加载效果,在onP...

oixxan__
今天
2
0
springmvc java对象转json,上传下载(未完)拦截器Interceptor以及源码解析(未完待续)

package com.atguigu.my.controller;import java.util.Collection;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contr......

architect刘源源
今天
29
0
[日更-2019.5.24、25、26] Android系统中的Binder通信机制分析(一)--servicemanager

声明 其实对于Android系统Binder通信的机制早就有分析的想法,记得去年6、7月份Mr.Deng离职期间约定一起对其进行研究的,但因为我个人问题没能实施这个计划,留下些许遗憾... 最近,刚好在做...

Captain_小馬佩德罗
昨天
24
0
聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部