在網頁檔案裡畫圓?

Tags: ,

IT行業中網頁是所有人都會接觸到的東西,尤其是UI,而網頁中包含各種各樣的影象,今天我將總結的在網頁中畫圓的方法分享給大家

工具/原料

一個可以編輯網頁的編輯器

方式一、用純CSS建立

首先新建一個網頁檔案

在網頁檔案裡畫圓

然後再body中新建一個dom,並新增類名circle

在網頁檔案裡畫圓

然後給circle類定義樣式

在網頁檔案裡畫圓

這樣,純css方式畫圓就完成了,完整程式碼如下:



在網頁檔案裡畫圓

方式二、用svg建立

首先建立一個新的網頁檔案

在網頁檔案裡畫圓

在body中新增如下程式碼:

在網頁檔案裡畫圓

這樣svg方式畫圓就完成了,svg方式畫圓雖然程式碼簡短,但需要對svg畫圖比較熟練

方式三、用canvas建立

首先新建一個網頁檔案

在網頁檔案裡畫圓

在body中新增canvas標籤,並給建立的canvas新增id屬性mycanvas

在網頁檔案裡畫圓

然後用js獲取canvas並進行配置,程式碼如下:

在網頁檔案裡畫圓

這樣canvas方式畫圓也就完成了

以上三種方式的預覽圖如下

在網頁檔案裡畫圓

注意事項

網頁中畫圓的方式還有很多,如用原生的javascript畫,但最常用的還是最基本的html和css結合方式

,
相關問題答案