<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas 圆形进度条效果</title>

    <style>

    *{margin:0;padding:0;}

    body{text-align:center;background-color:#000;}

    </style>

</head>

<body>

    <canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas'),  //获取canvas元素

                context = canvas.getContext('2d'),  //获取画图环境，指明为2d

                centerX = canvas.width/2,   //Canvas中心点x轴坐标

                centerY = canvas.height/2,  //Canvas中心点y轴坐标

                rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度

                speed = 0.1; //加载的快慢就靠它了

            //绘制蓝色外圈

            function blueCircle(n){

                context.save();

                context.strokeStyle = "#fff"; //设置描边样式

                context.lineWidth = 5; //设置线宽

                context.beginPath(); //路径开始

                context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)

                context.stroke(); //绘制

                context.closePath(); //路径结束

                context.restore();

            }

            //绘制白色外圈

            function whiteCircle(){

                context.save();

                context.beginPath();

                context.strokeStyle = "white";

                context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);

                context.stroke();

                context.closePath();

                context.restore();

            }

            //百分比文字绘制

            function text(n){

                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素

                context.strokeStyle = "#fff"; //设置描边样式

                context.font = "40px Arial"; //设置字体大小和字体

                //绘制字体，并且指定位置

                context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);

                context.stroke(); //执行绘制

                context.restore();

            }

            //动画循环

            (function drawFrame(){

                window.requestAnimationFrame(drawFrame, canvas);

                context.clearRect(0, 0, canvas.width, canvas.height);

                whiteCircle();

                text(speed);

                blueCircle(speed);

                if(speed > 100) speed = 0;

                speed += 0.1;

            }());

        }

    </script>

</body>

</html>

　　  有详细解释  练习demo

canvas 绘制圆形进度条的更多相关文章

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

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

  2. canvas 绘制环形进度条

    结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  3. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

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

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

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

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

  6. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  7. canvas圆形进度条

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

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

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

  9. Android 自定义 View 圆形进度条总结

    Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...

随机推荐

  1. 电商类Web原型制作分享——聚美优品

    这是一家化妆品限时特卖商城.作为美妆电商类网站的佼佼者,网站以用户体验为核心,画面主色调符合女性消费者审美.排版整齐,布局合理.网站用弹出面板实现点击弹出内容,鼠标悬停文字按钮颜色改变等交互效果. 本 ...

  2. servlet 中 service ,doGet , doPost 关系

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2 ...

  3. 安卓编译 translate error Lint: How to ignore “<key> is not translated in <language>” errors?

    Add following at the header of your strings.xml file <resources xmlns:tools="http://schemas. ...

  4. android 混淆文件proguard.cfg详解 （转载）

    -injars  androidtest.jar[jar包所在地址] -outjars  out[输出地址] -libraryjars    'D:\android-sdk-windows\platf ...

  5. 服务器的日志一直报Packet for query is too large (7632997 > 4194304). You can change this value on the server by setting the max_allowed_packet' variable.的解决方法

    服务器的日志一直报Packet for query is too large (7632997 > 4194304). You can change this value on the serv ...

  6. 2018.06.29 NOIP模拟 排列（线段树）

    排列(premu.cpp) [题目描述] 对于一个 1 到 n 的排列,逆序数的定义为:排列中第 i 位 ai的逆序数就是 a1-ai-1中比 ai大的数的个数.另外用 pi表示 a1,-,ai的逆序 ...

  7. 2018.09.15 bzoj1977:次小生成树 Tree（次小生成树+树剖）

    传送门 一道比较综合的好题. 由于是求严格的次小生成树. 我们需要维护一条路径上的最小值和次小值. 其中最小值和次小值不能相同. 由于不喜欢倍增我选择了用树链剖分维护. 代码: #include< ...

  8. 2018.07.10NOIP模拟 Draw（容斥原理）

    Draw 题目背景 SOURCE:NOIP2016-RZZ-4 T3 题目描述 给定笛卡尔坐标系上 n 个不重复的点. 定义一个 L 形为: 一个形如 (x,y),(x+1,y)-(x+a,y),(x ...

  9. CentOS中的一些小技巧和特殊知识

    一:软件: firefox 1.在tab栏右键可以打开上一次关闭的标签. 2.在上面的搜索栏可以添加搜索引擎,这样就不需要再打开标签页访问搜索引擎主页来搜索了. 3.获取firefox下载弹框的资源U ...

  10. matlab练习程序（生成希尔伯特曲线）

    能够使用这样一条线遍历图像中所有的像素,不过这里没有这样做,而只是生成了这样一条曲线. 程序中h,w是最终图像的高和宽,n为希尔伯特曲线阶数. 这里如果n等于log2(h)或log2(w),则图像就全 ...