canvas实现圆环进度条动画效果代码
代码语言:html
所属分类:进度条
代码描述:canvas实现圆环进度条动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { text-align:center; background:#d1c1c1 } .widget { text-align:left; overflow:hidden; margin:64px; background:#e3483c; border-radius:9px; height:260px; width:330px; display:inline-block; position:relative; box-shadow:0 2px 16px rgba(0,0,0,0.5),0px 2px 3px rgba(255,255,255,0.2) inset; border:1px solid rgba(0,0,0,0.2) } .widget canvas,.widget .labels { position:absolute; text-align:center; width:330px; height:260px } .widget .labels { color:white; margin-top:48px; text-shadow:0 4px 10px rgba(0,0,0,0.5); font-weight:100 } .widget .labels h2 { font-weight:100; font-size:50px; margin-bottom:0 } </style> </head> <body> <!-- partial:index.partial.html --> <div class="widget"><canvas></canvas> <div class="labels"> <h2>78%</h2>Capacity </div> </div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script> window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(a) { window.setTimeout(a, 1000 / 60) } })(); var canvas = $("canvas")[0]; var cxt = canvas.getContext("2d"); var width = $("canvas").width(); var height = $("canvas").height(); canvas.width = wid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0