canvas_进度条

伟洪winni 2015-10-30 10:22:21

如图，进度条是逆时针画的，如何让它顺时针
以下是我的代码


<!DOCTYPE html>

<html>

<head>

<title> canvas 实例 </title>

<meta charset='utf-8'>

</head>

<body>

<canvas id="myCanvas" width="600" height="150">您的浏览器不支持canvas！</canvas><br/>

<button onclick="Start();">Start</button>

<button onclick="Create();">Create</button>

<script type="text/javascript">

        //x,y 坐标,radius 半径,process 百分比,backColor 中心颜色, proColor 进度颜色, fontColor 中心文字颜色

        function DrowProcess(x,y,radius,process,backColor,proColor,fontColor){

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



            if (canvas.getContext) {

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

            }else{

                return;

            }



            cts.beginPath();

            // 坐标移动到圆心

            cts.moveTo(x, y);

            // 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针

            cts.arc(x, y, radius,  Math.PI * 2,0, true);

            cts.closePath();

            // 填充颜色

            cts.fillStyle = backColor;

            cts.fill();



            cts.beginPath();

            // 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形

            cts.moveTo(x, y);

            // 跟上面的圆唯一的区别在这里,不画满圆,画个扇形

            cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 -  Math.PI * 2 * process / 100,true);

            cts.closePath();

            cts.fillStyle = proColor;

            cts.fill();



            //填充背景白色

            cts.beginPath();

            cts.moveTo(x, y);

            cts.arc(x, y, radius - (radius * 0.06), 0, Math.PI * 2, true);

            cts.closePath();

            cts.fillStyle = 'rgba(255,255,255,1)';

            cts.fill();



            // 画一条线

//            cts.beginPath();

//            cts.arc(x, y, radius-(radius*0.30), 0, Math.PI * 2, true);

//            cts.closePath();

//            // 与画实心圆的区别,fill是填充,stroke是画线

//            cts.strokeStyle = backColor;

//            cts.stroke();



            //在中间写字

            cts.font = " 20pt Arial";

            cts.fillStyle = fontColor;

            cts.textAlign = 'center';

            cts.textBaseline = 'middle';

            cts.moveTo(x, y);

            cts.fillText(process+"%", x, y);



        }

        bfb = 0;

        time=0;

        function Start(){

            DrowProcess(60,60,55,bfb,'#ddd','#EAA0C6','#A6A3A6');

//	DrowProcess(180,60,55,bfb,'#ddd','#e74c3c','#e74c3c');

//	DrowProcess(300,60,55,bfb,'#ddd','#FF7F50','#FF7F50');



            t = setTimeout(Start,25);

            if(bfb>=100){



                clearTimeout(t);

                bfb=0;

           

                return;

            }

            bfb+=1;

        }



        function Create(){



            DrowProcess(420,60,55,25,'#ddd','#32CD32','#32CD32');

        }



        Start();



    </script>

</body>

</html>
...全文
146 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
伟洪winni 2015-10-30
  • 打赏
  • 举报
 回复
这个可以逆时针，但我还是不知道怎么改我的代码 cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * process / 100,true); 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="HandheldFriendly" content="true">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta property="og:type" content="website">
    <meta property="og:image" content="75 pix image">
    <meta property="og:site_name" content="South China Morning Post">
    <meta property="og:description" content="Make every day matter">
    <!--<meta property="fb:page_id" content="">-->

    <title></title>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/apple-touch-icon-57.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144.png">
    <link rel="icon" href="img/favicon.ico" />
    <base target="_blank" />

    <style type="text/css">
        html {width: 100%; height: 100%;}
        body {width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
        * {margin: 0; padding: 0;}
        .splash {position: absolute; z-index: 999; display: table; width: 100%; height: 100%; background-color: #f3f0eb;}
        .splash>.splash-inner {display: table-cell; text-align: center; vertical-align: middle;}
        .splash h1,.splash h2,.splash h3 {font-weight: normal;}
        .splash h3 {display: block; margin-top: 34px; font-size: 18px; color: #666; font-weight: lighter;}
        .splash .loading-circle {position: relative; width: 204px; height: 204px; margin: auto;}
        .splash .loading-circle>* {display: block; position: absolute; box-sizing: border-box; border-radius: 102px;}
        .splash .loading-circle>canvas.bg {z-index: 1; width: 100%; height: 100%; border: 8px solid #ddd ;}
        .splash .loading-circle>canvas.mask {z-index: 2; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);}
        .splash .loading-circle>p {z-index: 3;  width: 100%; height: 100%; text-align: center; line-height: 204px; font-size: 56px; font-weight: lighter; color: #999;}
    </style>
</head>

<body ontouchmove="event.preventDefault();">
<div class="splash" id="splash">
    <div class="splash-inner">
        <h1></h1>
        <!--<h2>Make every day matter</h2>-->
        <div class="loading-circle" id="loadingCircle">
            <p><span id="loadedNum">0</span>%</p>
            <canvas class="mask" id="loadingProgress" width="204" height="204"></canvas>
            <canvas class="bg" width="204" height="204"></canvas>
        </div>
    </div>
</div>

<script>
    var slots={},c=document.getElementById('loadingProgress'),ctx=c.getContext('2d');
    window.hasLoaded = 0;
    window.loading = false;
    window.ulp = ulp;
    function ulp(percent){
        window.loading = true;
        var i = 0, draw = null;
        draw = setInterval(function(){
            if (window.hasLoaded > 100) {
                window.loading = false;
                clearInterval(draw);
                draw = null;
                return true;
            }

            if (i<percent) {
                d();
                i++;
                window.hasLoaded += 1;
            } else {
                clearInterval(draw);
                draw = null;
            }
        }, 100);
    }

    function d(){
        var lp = document.getElementById('loadedNum');
        lp.innerHTML = window.hasLoaded;

        var loaded = window.hasLoaded * 2 / 100 * Math.PI, cw = 204, hcw = 102;
        ctx.clearRect (0,0,cw,cw);
        ctx.beginPath();
        ctx.arc(hcw,hcw,hcw-4, 0, loaded, false);
        ctx.lineWidth = 8;
        ctx.strokeStyle = '#ff6000';
        ctx.stroke();
    }
    ulp(67);
</script>

</body>
</html>
xuzuning 2015-10-30
  • 打赏
  • 举报
 回复
仅改成 false 是不行的，效果不对
要这样
cts.arc(x, y, radius, Math.PI * 1.5,  -3 * Math.PI * 1.5 +  Math.PI * 2 * process / 100, false);

伟洪winni 2015-10-30
  • 打赏
  • 举报
 回复
引用 1 楼 zpjshiwo77 的回复:


   // 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针

            cts.arc(x, y, radius,  Math.PI * 2,0, true);

代码上不是写了么，你改FALSE试试


这就是false的效果

zpjshiwo77 2015-10-30
  • 打赏
  • 举报
 回复 

   // 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针
            cts.arc(x, y, radius,  Math.PI * 2,0, true);
代码上不是写了么，你改FALSE试试
canvas扇形进度条.html
canvas扇形进度条可拖拽 功能已经写好，可以直接上手
canvas扇形进度条颜色单一.html
canvas 弧形进度条 可拖拽 显示百分比 直接拿来用就可以
canvas制作水波进度条
canvas制作水波进度条
html5 canvas圆形进度条动画特效.zip
html5 canvas圆形进度条动画特效是一款基于canvas生成的百分比进度条动画效果下载。
html5 canvas圆形进度条动画特效下载
html5 canvas圆形进度条动画特效下载 html5 canvas圆形进度条动画特效下载
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章