Canvas之进度条的制作（矩形，圆环）
生活随笔
收集整理的這篇文章主要介紹了
Canvas之进度条的制作（矩形，圆环）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Canvas之進度條的繪制
基本進度條的繪制
1.矩形進度條
關鍵語法
獲取畫筆
var ctx=document.getElementById(“id”).getContext(“2d”);
填充顏色
ctx.fillStytle=“color”;
setInternal()和clearInternal()的使用
代碼(兩種類型):
`
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>矩形進度條搭建</title><style>body{text-align: center;} canvas{background-color: lightblue;}</style> </head> <body><h1>進度條的世界</h1><canvas id="c4" width="500" height="400"></canvas><script><!-- 矩形進度條 -->var ctx=document.getElementById("c4").getContext("2d"); //畫筆var x=100;var y=180;var xMove=1;var process=setInterval(function(){ctx.clearRect(0,180,400,20); //擦掉重新繪制ctx.fillStyle="darkgrey"; //填充顏色ctx.fillRect(100,180,300,20); //填充矩形ctx.fillStyle="green";if(x<=400-30){ctx.fillRect(x,y,30,20);x+=xMove*30;}else //兩種其中加載完畢模式，我進行了注釋,需要嘗試的可自己引用{x=100; //重新開始進度條// 加載完畢模式// clearInterval(process);// ctx.clearRect(0,180,400,20);// alert("加載完畢！");}},200)</script> </body> </html>`運行結果:
給你看點好看的東西哈哈，一個視頻來看結果:
https://www.bilibili.com/video/BV1AQ4y1o7TM
2.圓形進度條的繪制
關鍵語法
var ctx=document.getEelementById(“id”).getContext(“2d”);
ctx.lineWidth=20(根據需要自己設置);
分別設置兩個圓環,第一個顏色為轉動的進度條的顏色，第二個顏色為總進度條的背景色，根據下面語法自己計算度數繪畫。
context.arc(x,y,r,sAngle,eAngle,counterclockwise)度數計算(注意開始角的位置):
案例代碼:
1.圓環形（兩種）
`
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>圓形進度條的繪制</title><style>body{text-align: center;} canvas{background-color: lightblue;}</style> </head> <body><h1>圓形進度條</h1><canvas id="c5" width="500" height="400"></canvas><script>var ctx=document.getElementById("c5").getContext("2d"); //獲取畫筆ctx.lineWidth="20"; //調節畫筆寬度(即圓環粗細)var degree=360;var process=setInterval(function(){ctx.clearRect(0,0,500,400); //擦掉，重新繪制//用設計的底色圓環ctx.strokeStyle="darkgreen";ctx.beginPath();ctx.arc(250,200,100,0,2*Math.PI); //畫圓ctx.stroke(); //第二個圓環if(degree>=0){ctx.strokeStyle="darkgrey"; //描邊底色ctx.beginPath();ctx.arc(250,200,100,3*Math.PI/2,degree/360*Math.PI*2-Math.PI/2);ctx.stroke();degree-=3;}else{//循環加載degree=360;//一次加載完畢clearInterval(process); //結束循環alert("加載完畢!");ctx.clearRect(0,0,500,400);}},200)</script> </body> </html>`運行結果(一個簡短視頻先瞅瞅):
視頻鏈接源地址(歡迎點贊哦繪哈哈):
是循環不止，還是踏出迷霧
總結
以上是生活随笔為你收集整理的Canvas之进度条的制作（矩形，圆环）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Where in list 问题
- 下一篇： lua环境搭建