首頁  >  文章  >  web前端  >  透過html5中的canvas來繪製一個圓環形進度條

透過html5中的canvas來繪製一個圓環形進度條

王林
王林轉載
2020-11-13 17:09:162836瀏覽

透過html5中的canvas來繪製一個圓環形進度條

首先我們來看看實現效果:

透過html5中的canvas來繪製一個圓環形進度條

#(學習影片分享:html影片教學

我在這裡使用HTML5的Canvas來要製作這樣一個圓環形的進度,

#首先是HTML頁面,HTML5的文檔標識是:

<!DOCTYPE html>

 這個文檔標識要比HTML4的簡單多了.

 第二步,在頁面上創建一個Canvas畫布元素:

<canvas class="process" width="48px" height="48px">61%</canvas>

 我這裡創建了一個長寬都是48像素的畫布,因為我要畫的圓外直徑是48個像素的,在canvas元素中間寫的是"61%",這個文字可不是顯示在圓環中間的那個哦,這個61%是當老的瀏覽器不支持canvas元素時顯示的文字.

好了,到此為止HTML頁面的內容就基本完成了,接下來就交給Javascript了,用Javascript來描繪圓環.

透過html5中的canvas來繪製一個圓環形進度條

透過html5中的canvas來繪製一個圓環形進度條

透過html5中的canvas來繪製一個圓環形進度條

相關推薦:html教學

以上是透過html5中的canvas來繪製一個圓環形進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:gxlcms.com。如有侵權,請聯絡admin@php.cn刪除