摘要：最終效果圖一定義變量定義半徑，定義圓環(huán)厚度，定義圓心位置定義默認(rèn)填充顏色二畫(huà)第一個(gè)圓弧注意這個(gè)方法，生成路徑的第一步。本質(zhì)上，路徑是由很多子路徑構(gòu)成，這些子路徑都是在一個(gè)列表中，所有的子路徑線弧形等等構(gòu)成圖形。

最終效果圖

定義半徑，定義圓環(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";

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ì)和前面的圖形連接在一起

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

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

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

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

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)就完成了

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

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

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ū)別僅僅是圓的弧度

transform: rotate(-135deg);

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

完整代碼

    
    
    
    
    



    

        
        100 分 
        服務(wù)分