<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>circle</title>

</head>

<body>

    <canvas id='myCanvas' width="292" height="292"></canvas>

    <script>

        // 绘制圆

        function drawCircleFn(totalReward) {

            var canvas = document.getElementById('myCanvas');

            var ctx = canvas.getContext('2d');

            ctx.lineWidth = 24;

            ctx.lineCap = 'round';

            if(totalReward){

                ctx.strokeStyle = '#0FCC9E';

                circleAnimateFn(ctx);

            }else{

                ctx.strokeStyle = '#f2f2f2';

                circleNoAnimateFn(ctx);

            }

        }

        // 绘制灰色圆

        function circleNoAnimateFn(ctx) {

            let startAngle = 3 / 2 * Math.PI; //开始位置弧度

            let percentage = 10;

            let diffAngle = percentage / 100 * Math.PI * 2; //完成进度弧度值

            ctx.beginPath();

            ctx.arc(146, 146, 132, startAngle, diffAngle + startAngle, true);

            ctx.stroke();

        }

        // 绘制动画圆

        function circleAnimateFn(ctx) {

            let startAngle = 3 / 2 * Math.PI; //开始位置弧度

            let percentage = 100;  //完成进度值 100 - 10

            let endcentage = 10;

            let diffAngle = percentage / 100 * Math.PI * 2; //完成进度弧度值

            let intervalFn = setInterval(function(){

                if(percentage <= endcentage){

                    clearInterval(intervalFn);

                    percentage = endcentage;

                }else{

                    percentage = percentage - 5;

                    diffAngle = percentage / 100 * Math.PI * 2;

                    ctx.beginPath();

                    ctx.arc(146, 146, 132, startAngle, diffAngle + startAngle, true);

                    ctx.stroke();

                }

            }, 15)

        }

        drawCircleFn();

    </script>

</body>

</html>

canvas圆形进度条（逆时针）的更多相关文章

  1. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  2. HTML5效果：Canvas 实现圆形进度条并显示数字百分比

    实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...

  3. canvas 绘制圆形进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. canvas绘制圆形进度条（或显示当前已浏览网页百分比）

    使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...

  5. css and canvas实现圆形进度条

    进度条效果:   话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒 ...

  6. Android 高手进阶之自定义View，自定义属性（带进度的圆形进度条）

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...

  7. Android 带进度的圆形进度条

    最近项目有个需求,做带进度从下到上的圆形进度条. 网上查了一下资料,发现这篇博客写得不错http://blog.csdn.net/xiaanming/article/details/10298163 ...

  8. 自定义VIew——漂亮的圆形进度条

    package com.example.firstapp; import java.text.DecimalFormat; import android.annotation.SuppressLint ...

  9. Android 高手进阶，自己定义圆形进度条

    背景介绍 在Android 开发中,我们常常遇到各种各样绚丽的控件,所以,依靠我们Android本身所带的控件是远远不够的,许多时候须要我们自定义控件,在开发的过程中.我们公司遇到了一种须要自己写的一 ...

随机推荐

  1. Mac下安装VirtualBox并在VirtualBox中安装CentOS7

    VirtualBox (百科)VirtualBox 是一款开源虚拟机软件.VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司Sun Microsystem ...

  2. 021 Android 查询已经导入到工程中的数据库+抖动效果

    1.将数据库(.db)文件放入工程中 在project状态下,新建assets文件夹,并将数据库文件放入assets目录下. 注意:assets目录.java目录.res目录是同级的 new---&g ...

  3. [转帖]Redis未授权访问漏洞复现

    Redis未授权访问漏洞复现 https://www.cnblogs.com/yuzly/p/11663822.html config set dirconfig set dbfile xxxx 一. ...

  4. （二）linux 学习 -- 探究操作系统

    The Linux Command Line 读书笔记 - 部分内容来自 http://billie66.github.io/TLCL/book/chap04.html 文章目录 ls 命令进阶 `l ...

  5. PAT(B) 1078 字符串压缩与解压（Java）

    题目链接:1078 字符串压缩与解压 (20 point(s)) 题目描述 文本压缩有很多种方法,这里我们只考虑最简单的一种:把由相同字符组成的一个连续的片段用这个字符和片段中含有这个字符的个数来表示 ...

  6. 机器学习之Bagging与随机森林笔记

    集成学习通过将多个学习器进行结合,常可获得比单一学习器显著优越的泛化性能.这对“弱学习器”尤为明显,因此集成学习的很多理论研究都是针对弱学习器进行的,而基学习器有时也被直接称为弱学习器.虽然从理论上来 ...

  7. Java基础IO类之File类

    大三了,目前基础太差了,重新学习过!代码如下,里面都有详细的解释每一行代码代表的意思~ package IODemo; import java.io.File; import java.io.File ...

  8. Scratch（一）为什么你要学Scratch儿童编程

    因为人工智能和机器人学科的崛起,似乎一夜之间未来就变成了程序员的天下,尤其是在知乎上,不会编程都没办法和这群程序员好好说话了.我已经搬了一辈子砖了,难道我的孩子也还要接着搬?这就是现在大部分家长的焦虑 ...

  9. netty--buffer分配策略

    AdaptiveRecvByteBufAllocator 动态分配buffer大小的类. 如果前一次读取完全填满了分配的缓冲区,它将逐渐增加预期的可读字节数.(增加的方式:初始化类的时候,会预先设置好 ...

  10. hdu 6625 three array (01-trie)

    大意: 给两个数组$a,b$, 要求重排使得$c_i=a_i\oplus b_i$字典序最小. 字典树上贪心取$n$次, 然后排序, 还不知道怎么证. #include <iostream> ...