如图，进度条是逆时针画的，如何让它 顺时针
以下是我的代码
<!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);
// 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针 cts.arc(x, y, radius, Math.PI * 2,0, true);
这个可以逆时针，但我还是不知道怎么改我的代码
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> 仅改成 false 是不行的，效果不对
要这样
cts.arc(x, y, radius, Math.PI * 1.5, -3 * Math.PI * 1.5 + Math.PI * 2 * process / 100, false);
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
534
收藏
