這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)使用Canvas怎么繪制一個未閉合的帶進度條圓環(huán),文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等,應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。成都創(chuàng)新互聯(lián)公司專業(yè)提供做網(wǎng)站、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!一、定義變量
定義半徑,定義圓環(huá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() 這個方法,生成路徑的第一步。本質(zhì)上,路徑是由很多子路徑構(gòu)成,這些子路徑都是在一個列表中,所有的子路徑(線、弧形、等等)構(gòu)成圖形。而每次這個方法調(diào)用之后,列表清空重置,然后我們就可以重新繪制新的圖形。
也就是說,這個方法可以用來給 Canvas圖像 分組,繪制新的圖形如果不調(diào)用此方法,那么新的圖形會和前面的圖形連接在一起
三、畫第一個連接處
ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)
連接外是用二次貝塞爾曲線來畫的,Canvas的 quadraticCurveTo(cp1x, cp1y, x, y) 方法接受4個參數(shù),第一、二個參數(shù)為控制點,第三、四個參數(shù)為結(jié)束點官方文檔
只需算出控制點和結(jié)束點,就可以畫出一個圓弧
四、畫第二個圓弧
ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
注意方法后面最后一個參數(shù),設(shè)置為true,代表逆時針繪制(默認是順時針)
五、畫第二個連接處
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
這一步其實和第三步相差不大,簡單的調(diào)換了下參數(shù)位置
六、填充
ctx.fill();
至此,一個簡單的未閉合的圓環(huán)就完成了
畫第二個進度條圓環(huán)
七、初始化
ctx.beginPath(); ctx.fillStyle = "#e87c7c";
beginPath 表示繪制新的圖形,如果不調(diào)用此方法,那后面畫的圖形會和前面畫的圖形連在一起
八、繪制第二個進度條圓環(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();
由于和第一個圓環(huán)繪制方式一模一樣,就不在重復(fù)了,區(qū)別僅僅是圓的弧度
九、旋轉(zhuǎn) Canvas
transform: rotate(-135deg);
由于css的旋轉(zhuǎn)比較方便,也省去了角度的計算,所以本人使用的是css的transform來旋轉(zhuǎn)的。當然 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>
上述就是小編為大家分享的使用Canvas怎么繪制一個未閉合的帶進度條圓環(huán)了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章標題:使用Canvas怎么繪制一個未閉合的帶進度條圓環(huán)-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明:http://muchs.cn/article44/djiihe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、網(wǎng)站策劃、品牌網(wǎng)站設(shè)計、網(wǎng)站設(shè)計公司、建站公司、虛擬主機
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容