简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > Tutorial H5 > teks badan

通过html5中的canvas来绘制一个圆环形进度条

王林
Lepaskan： 2020-11-13 17:09:16
ke hadapan
2808 orang telah melayarinya

通过html5中的canvas来绘制一个圆环形进度条

首先我们来看一下实现效果：

34df89882937342598e9b718521fe2e.png

（学习视频分享：html视频教程）

我这里使用HTML5的Canvas来要制作这样一个圆环形的进度,

首先是HTML页面,HTML5的文档标识是:

<!DOCTYPE html>
Salin selepas log masuk

这个文档标识要比HTML4的简单多了.

第二步,在页面上创建一个Canvas画布元素:

<canvas class="process" width="48px" height="48px">61%</canvas>
Salin selepas log masuk

 我这里创建了一个长宽都是48像素的画布,因为我要画的圆外直径是48个像素的,在canvas元素中间写的是"61%",这个文字可不是显示在圆环中间的那个哦,这个61%是当老的浏览器不支持canvas元素时显示的文字.

好了,到此为止HTML页面的内容就基本完成了,接下来就交给Javascript了,用Javascript来描绘圆环.

75b0956dc2156c89712efe5312b69e2.png

f30407951df63b9f9b35f34c118b7ac.png

808885e7279c0184f1fdf2262cbd4b0.png

相关推荐：html教程

Atas ialah kandungan terperinci 通过html5中的canvas来绘制一个圆环形进度条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
canvas html5 进度条
sumber：gxlcms.com
Artikel sebelumnya：h5和小程序有什么区别 Artikel seterusnya：浅析HTML5中使用data-*来自定义属性
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk menetapkan atribut yang diperlukan HTML5 menggunakan Javascript? Saya cuba menandakan kotak input teks seperti yang diperlukan dalam Javascript. <inputi...
daripada 2023-10-13 08:52:25
0
2
317
Masalah dengan tidak mendapat koordinat tetikus yang tepat: menggunakan kanvas HTML5 apabila mengubah saiz halaman Saya mahu mencipta kesan piksel ini daripada pakar bahagian hadapan. Walaupun saya boleh m...
daripada 2023-09-12 12:20:33
0
1
280
Video HTML5 M3U8 dikodkan dengan Base64 Saya ingin menambah fail M3U8 yang dikodkan base64 dalam teg Video HTML5, bagaimana saya b...
daripada 2023-09-09 23:07:18
0
1
247
vue.js/bootstrap: kaedah acara onclick tidak dipanggil, ralat "Pembolehubah tidak ditemui: updateDocument" Saya baru dalam pembangunan bahagian hadapan tetapi mempunyai pemahaman asas tentang HTML5...
daripada 2023-09-09 20:06:48
0
1
362
Alih keluar slash penutup '/' daripada teg imej dalam XHTML Saya mempunyai txt1 rentetan yang menyimpan imej. Nilainya dalam format XHTML, iaitu eleme...
daripada 2023-09-06 12:15:38
0
1
240
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！