当前位置:首页 > 网页特效 > HTML5特效 >

canvas绘制带渐变色的圆形进度条

时间:2016-08-22 11:26 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件。该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非常的酷。

 使用方法

<script src="jquery/1.11.0/jquery.min.js"></script>
<script src="jquery-circle-progress/dist/circle-progress.js"></script>
 
<div id="circle"></div>
 
<script>
    $('#circle').circleProgress({
        value: 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
        }
    });
</script>               

 配置参数

下面是该圆形进度条插件的一些可用参数:

参数 描述
value 这是唯一一个必填参数。值从0.01.0,默认值为0
size canvas的大小,单位像素,默认值100
startAngle 初始角度,默认值为-Math.PI
reverse 是否反向绘制圆弧和动画,默认值为false
thickness 进度条圆弧的宽度。默认它自动为size的1/14大小,你可以设置你需要的值。默认值为auto
lineCap 圆弧的线头样式:"butt""round""square"。详细信息看这里。默认值为"butt"
fill 圆弧填充的配置。
-{ color: "#ff1e41" }
-{ color: 'rgba(255, 255, 255, .3)' }
-{ gradient: ["red", "green", "blue"] }
-{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
-{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
-{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
-{ image: "http://i.imgur.com/pT0i89v.png" }
-{ image: imageInstance }
-{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
默认值为{ gradient: ["#3aeabb", "#fdd250"] }
emptyFill 空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
animation 动画配置。可以参考jQuery animations。你可以设置为false来禁止动画。默认值:{ duration: 1200, easing: "circleProgressEase" }"circleProgressEase"是一个ease-in-out-cubic easing动画效果
animationStartValue 默认进度条动画会在0.0开始,结束与value处。调用该参数可以直接动画。如果需要制作反向动画就将animationStartValue的值设置为1.0。你可以指定0.0到1.0之间的任何数值。默认值为0.0

 事件

在允许进度条动画的情况下,有三个事件可用。

事件 处理程序
circle-animation-start function(event)
-event - jQuery事件
circle-animation-progress function(event, animationProgress, stepValue)
-event - jQuery事件
animationProgress - 从0.0到1.0
stepValue - 当前的步长值,从0.0到value
circle-animation-end function(event)
-event - jQuery事件

 浏览器兼容

该圆形进度条插件使用<canvas>,所有的现代浏览器都支持该元素,包括IE9+。可以查看Can I Use。

在不支持的浏览器中,插件提供了一些回退代码,如IE8浏览器。

 其它

如果进度条组件已经被初始化,你可以获取<canvas>

$('#circle').circleProgress({ value: 0.5 });
var canvas = $('#circle').circleProgress('widget');               

你可以获取CircleProgress对象实例:

 
本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

HTML5特效下载排行

最新文章