canvas_进度条_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

canvas_进度条_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:04 AM

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

<!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>

回复讨论(解决方案)

   // 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针            cts.arc(x, y, radius,  Math.PI * 2,0, true);

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

   // 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针            cts.arc(x, y, radius,  Math.PI * 2,0, true);

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

这就是false的效果

这个可以逆时针，但我还是不知道怎么改我的代码

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 id="Make-nbsp-every-nbsp-day-nbsp-matter">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>

仅改成 false 是不行的，效果不对
要这样

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles