App下載

如何實(shí)現(xiàn)環(huán)形進(jìn)度條?html5利用Canvas實(shí)現(xiàn)案例詳解!

猿友 2021-08-03 14:12:33 瀏覽數(shù) (4125)
反饋

不知道小伙伴們有沒有發(fā)現(xiàn),在我們?nèi)粘5氖褂弥幸话闱闆r下進(jìn)度條都是直線狀的而且制作這樣的進(jìn)度條也很容易,那么今天小編就和大家分享有關(guān)于:“如何實(shí)現(xiàn)環(huán)形進(jìn)度條?”這個(gè)問題的解決方法,順便教大家如何制作環(huán)形進(jìn)度條!

最終效果圖

一、定義變量

定義半徑,定義圓環(huán)厚度,定義圓心位置、定義默認(rèn)填充顏色:

let radius = 75
let thickness= 10
let innerRadius = radius - thickness
let x = 75
let y = 75
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#f2d7d7";

二、畫第一個(gè)圓弧

ctx.beginPath();
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)

注意 beginPath() 這個(gè)方法,生成路徑的第一步。本質(zhì)上,路徑是由很多子路徑構(gòu)成,這些子路徑都是在一個(gè)列表中,所有的子路徑(線、弧形、等等)構(gòu)成圖形。而每次這個(gè)方法調(diào)用之后,列表清空重置,然后我們就可以重新繪制新的圖形。
 

也就是說(shuō),這個(gè)方法可以用來(lái)給 Canvas圖像 分組,繪制新的圖形如果不調(diào)用此方法,那么新的圖形會(huì)和前面的圖形連接在一起

三、畫第一個(gè)連接處

ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)

連接外是用二次貝塞爾曲線來(lái)畫的,Canvas的 quadraticCurveTo(cp1x, cp1y, x, y) 方法接受4個(gè)參數(shù),第一、二個(gè)參數(shù)為控制點(diǎn),第三、四個(gè)參數(shù)為結(jié)束點(diǎn)官方文檔
只需算出控制點(diǎn)和結(jié)束點(diǎn),就可以畫出一個(gè)圓弧

四、畫第二個(gè)圓弧

ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)

注意方法后面最后一個(gè)參數(shù),設(shè)置為true,代表逆時(shí)針繪制(默認(rèn)是順時(shí)針)

五、畫第二個(gè)連接處

ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

這一步其實(shí)和第三步相差不大,簡(jiǎn)單的調(diào)換了下參數(shù)位置

六、填充

 ctx.fill();

至此,一個(gè)簡(jiǎn)單的未閉合的圓環(huán)就完成了

畫第二個(gè)進(jìn)度條圓環(huán)

七、初始化

ctx.beginPath();
ctx.fillStyle = "#e87c7c";

beginPath 表示繪制新的圖形,如果不調(diào)用此方法,那后面畫的圖形會(huì)和前面畫的圖形連在一起

八、繪制第二個(gè)進(jìn)度條圓環(huán)

ctx.beginPath();
ctx.fillStyle = "#e87c7c";
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)
ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)
ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

ctx.fill();

由于和第一個(gè)圓環(huán)繪制方式一模一樣,就不在重復(fù)了,區(qū)別僅僅是圓的弧度

九、旋轉(zhuǎn) Canvas

transform: rotate(-135deg);

由于css的旋轉(zhuǎn)比較方便,也省去了角度的計(jì)算,所以本人使用的是css的transform來(lái)旋轉(zhuǎn)的。當(dāng)然 Canvas 也提供了旋轉(zhuǎn)的方法

完整代碼

 


<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
    <style>
        .ring {
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
        }

        #tutorial {
            transform: rotate(-135deg);
            width: 150px; 
            height: 150px;
        }

        .fraction {
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            color: red;
        }

        .small {
            font-size: 12px;
            font-weight: lighter;
        }

        .title {
            color: red;
            bottom: 0;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="ring">
        <canvas id="tutorial" width="150" height="150"></canvas>
        <span class="fraction">100 <span class="small">分</span> </span>
        <span class="title">服務(wù)分</span>
    </div>

    <script>
        let radius = 75
        let thickness = 10
        let innerRadius = radius - thickness
        let x = 75
        let y = 75
        var canvas = document.getElementById('tutorial');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#f2d7d7";

        ctx.beginPath();
        ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
        ctx.quadraticCurveTo((x - innerRadius) - thickness/2 , y - thickness, x - innerRadius, y)
        ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
        ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = "#e87c7c";
        ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)
        ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)
        ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)
        ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
        ctx.fill();
    </script>
</body>

</html>

那么在閱讀完這篇文章后想必對(duì)于:“如何實(shí)現(xiàn)環(huán)形進(jìn)度條?”實(shí)現(xiàn)這個(gè)效果有了解決的方法了吧!那么大家一定也掌握了環(huán)形進(jìn)度條的實(shí)現(xiàn),當(dāng)然你有其他的實(shí)現(xiàn)方法也可以和大家一同分享!喜歡html5的小伙伴們也可以在W3Cschool中進(jìn)行深造。


0 人點(diǎn)贊