Canvas_progress bar_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Canvas_progress bar_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>

ディスカッションへの返信（解決策）

りー
コードに書いてない？ FALSEに変えてみて

rreee
コードに書いてない？ FALSEに変えてみて

これがfalse
の効果です

反時計回りですが、コードを変更する方法がまだわかりません

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

   // 画圆,圆心是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);

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。