canvas画圆动态显示百分比

所属分类:媒体,其他-图像,动画效果

 55534  427  查看评论 (22)
分享到微信朋友圈
X
canvas画圆动态显示百分比 ie兼容9

============以下内容由 Gnomo 提供================

1,在html页面的</body>标签前引入circle.js脚本

<script type="text/javascript" src="js/circle.js"></script>

2,页面元素说明:

<div class="jqm-round-wrap">
    <div class="jqm-round-bg"></div>
    <canvas id="jqm-round-sector0" class="jqm-round-sector"></canvas>
    <div class="jqm-round-circle"><p>50%</p></div>
</div>
 id="jqm-round-sector0"

为当前元素生成圆形时的id名称,当前页面如需生成多个圆形时,其他元素id依次为jqm-round-sector1、jqm-round-sector2等。

 <p>50%</p>

内的百分比用于显示当前元素生成圆形是的比例值,此值可以使百分数也可为小数,如:<p>0.65</p>。

相关插件-图像,动画效果

简单实用的jQuery放大镜插件(原创)

简单实用的jQuery放大镜插件,可通过鼠标滚轮改变倍数
  图像
 20788  295

jquery.photoClip图片裁剪添加旋转 缩放按钮功能

项目上用的jquery.photoClip 插件,为了更好的用户体验 需要添加 旋转 缩放按钮功能,所以在原有的基础上添加了点功能,希望能帮助各位,写的不好 海涵!
  图像
 29953  319

基于HTML5 Canvas实现的图片马赛克模糊特效

基于HTML5 Canvas实现的图片马赛克模糊特效
  图像
 30522  306

html5前端图片压缩

html5前端图片压缩
  图像
 86049  454

讨论这个项目(22)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    勋章?? 0
    2021/8/4 15:54:19
    圆环的厚度如何修改呀 回复
    ●夜幕 0
    2018/10/15 14:55:21
    怎么修改颜色
        leisure0
        2019/4/12 9:45:15
        同问
        西瓜0
        2019/4/12 10:06:53

        cirde.js第12行

        ctx.fillStyle = opts.color || '#f76220';

        这里修改为你的颜色值#f76220

    回复
    无奈 0
    2018/3/15 10:21:45
    如何同时控制多个不同的进度 回复
    我是慢热型i 0
    2017/9/22 20:03:29

    怎么改百分比的大小啊?

    回复
    ╃、流年漫过盛夏天ヅ 0
    2017/7/15 11:36:24
    瘦不到150不改名 0
    2017/5/24 14:51:46
    sorry~你是个好人 0
    2017/5/17 10:49:49
    挺好用的,改一下样式就可以了 回复
    天隅―刘洪延 0
    2017/3/21 17:18:12

    怎么控制这个圆圈的大小啊

        Ape0
        2017/8/8 14:36:38

        修改canvas样式

    回复
    天隅―刘洪延 0
    2017/3/20 17:58:28
    很有用,解决了一大难题! 回复
    freestyle1226 0
    2016/9/25 16:09:35
    很有用 不错
        蓝叶子0
        2017/2/8 16:44:15

        是的

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复