簡單形狀繪制《HTML5系列教程18》

單形狀繪制《HTML5系列教程18》

簡單形狀繪制《HTML5系列教程18》

Canvas在HTML5中有著非常強大的功能，它不僅可以繪制一些簡單的圖案，還可以進行一些簡單形狀繪制如：圓形、三角形、矩形、圓角矩形等二維形狀，并可以根據用戶的實際需要繪制自定義二維圖形。而要完成這項功能，就需要用到CanvasRenderingContext2D對象提供的另外一些API。

1.圓形的繪制方法

在上篇文中我們使用了arc函數繪制圓弧，不知道大家有沒有注意到我們在指定圓弧結束角時使用了“2*math.PI*0.75”這樣的參數，Math.PI是計算中表示數學π的意思，我們用2π乘以0.75就是繪制了四分之三個圓，這樣就得到了一個圓弧。如果我們把0.75去掉，就能繪制一個圓形了，代碼如圖所示：

HTML5中圓形的繪制方法代碼

在谷歌瀏覽器中顯示預覽效果如圖所示：

HTML5中圓形的繪制方法效果預覽

2.三角形的繪制方法

在上一篇文章我們也學了如何繪制一條直線，那么如果我們繪制三條直線，并設置三條直線的起點和終點互相連接，這樣我們就能得到一個三角形了，繪制三角形的代碼如圖所示：

HTML中三角形的繪制方法代碼

在谷歌瀏覽器中顯示預覽效果如圖所示：

HTML中三角形的繪制方法效果預覽

3.圓角矩形的繪制方法

上面的圖形我們都是用Canvas的CanvasRenderingContext2D能夠直接提供的圖形對象，那如果需要繪制如圓角矩形這樣特殊一點的圖形，我們應該怎樣繪制呢？那么這里就需要用到另外幾個API對象了，通過一些特殊的處理，繪制出符合我們要求的圖形。在下面的代碼中，我們使用了arcTo函數繪制圓角矩形，該函數的描述見下表：

HTML5中arcTo函數詳情描述

arcTo函數為我們提供了兩條切線之間圓弧的繪制方法，圓角矩形是由四個這樣的圓弧和四條直線組成的，所以只要我們能精確控制圓弧和直線的每個點，就能準確繪制出一個圓角矩形。繪制圓角矩形的代碼如圖所示：

在HTML5中圓角矩形的繪制方法代碼

在谷歌瀏覽器中顯示預覽效果如圖所示：

在HTML5中圓角矩形的繪制方法效果預覽

4.簡單的自定義圖形繪制“微笑表情繪制”

雖然Canvas提供了很多基本圖形的繪制，但在實際應用中，經常會需要繪制一些復雜的圖形，而Canvas卻并沒有提供繪制這些圖案的API，所以這時候就需要使用多種繪圖方法來繪制這些圖形。以下是作為示例所繪制的一個簡單的自定義圖形“微笑表情”

在HTML中微笑表情繪制方法代碼

在谷歌瀏覽器中顯示預覽效果如圖所示：

在HTML中微笑表情繪制方法效果預覽

日常生活中可以見到很多不規則的圖形，你可以想到些什么圖形呢？大家可以嘗試一下利用已經學了的知識把自己想到的一些簡單形狀繪制出來。祝大家：身體健康、生活愉快！

幾日，隨著小白對HTML5認識的提升，他自己沒事瀏覽網頁的時候總會注意一些特殊的展示效果，讓他印象最深刻的一個效果就是用戶頭像了，一個矩形的圖片怎么就顯示成圓形了呢？一上午沒想明白，下午看著老朱沒什么事，就去向老朱請教：“朱哥！網頁上的圖片怎么能顯示成圓角呢？特別是正圓形是怎么做出來的啊？”

老朱隨口說道：“border-radius啊！之前我們已經用過幾次了啊！”

小白說：“這不是控制容器圓角的么？圖片也可以控制么？”

老朱說：“講圖片的時候我不是告訴過你了么？肯定是沒好好聽，圖片標簽img也是一個容器，它是一個放圖片的容器，在img里面顯示什么圖片是靠src屬性來決定的。既然是容器你不是就可以用border-radius來控制了么？你試試！”

小白高興的說道：“真的成圓角了啊！我要把他變成正圓，是不是圓角設置成它寬度的一半就可以了？”

老朱說：“你先試試吧！試玩就知道了！”

“不行啊！這是怎么回事？”

老朱跟小白說：“css的圓角屬性值最多是邊的一半！你的圖片寬比高大，所以圓角值最多位高的一半！你可以先嘗試把圖片的寬高設置成一樣的看看！”

“果然變成正圓了，可是這樣的話圖片就有變形了，如果小頭像的話還好說，大頭像可就不好看了！”

老朱說道：“所以現在很多網站頭像上傳的時候都會讓用戶截取一個正方形的圖片生成頭像，就是為了方便進行圓角控制！”

小白說：“有沒有折中的方法？假如網站沒有用戶設置正方形頭像的功能，還不想讓圖片變形呢？”

老朱說：“正圓顯示的肯定是一個高和寬一樣的區域，所以圖片被截取肯定是不可避免的了。你可以給圖片外部套一個div容器，讓這個div容器的寬度高度一致，并且設置超出隱藏。這樣設置一下div的圓角就可以了！你試試看”

小白做好以后說道：“我又發現一個問題，div設置寬和高一樣以后，圖片如果高比寬小，圖片高度得跟父容器高度一致才能出來效果！而圖片高比寬大，則需要設置圖片寬度和父容器寬度一致。我覺得要把它完善必須使用js來判斷圖片寬和高的比例進行動態設置。”

“嗯，你可以試試！”

聰明的大家，你們有沒有什么更好的圖片圓角方式呢？

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！

人可能會疑惑，我為什么專門用一節內容來說邊框和圓角。其實，不為別的，只為它們在開發中，在Web系統中，在手機頁面中，太常用了。有邊框的頁面，讓人耳目一新，一目了然；有圓角的內容，讓人賞心悅目，心曠神怡。說的有點夸張了，就這么著吧。

邊框(border)一般為長方形形狀，有上下左右四條邊，CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。

11.1 邊框逼格

在CSS中，你可以通過border和其延伸的，如border-style，來實現邊框的效果。上邊框相關的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似，換成對應的單詞即可。

邊框樣式(border-style)常用的有dotted(點線)、dashed(虛線)、solid(實線)、double(雙邊框)這四種，不常用的有groove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。

/* --------在樣式表文件中---------- */
/*4條邊框一起設置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四條邊框可個性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*單條邊框設置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件內容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border統一設置四條邊框<br/>
    順序為：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四條邊框一起設置，風格可不同<br/>
    順序為:上、右、下、左。<br/>
    1. 只有一個值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
    2. 有兩個值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三個值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四個值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    單獨一天邊框進行設置<br/>
    border-top：頂部寬度、樣式、顏色，一起設置<br/>
    border-top-width:上邊框寬度；<br/>
    border-top-style:上邊框樣式；<br/>
    border-top-color:上邊框顏色。
    <br/>
</div>
</body>
</html>

輸出結果

11.2 圓角風格

使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統一指定4個圓角，順序為左上、右上、右下和左下。如果要特定指定某個角的話，用border-top-left-radius等方式即可。

在樣式表ys2.css文中的內容

/*4個角統一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*單獨指定一個角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內容

<br/><br/>
<div class="four-radius">
    統一設置4個圓角<br/>
    一個值： 四個圓角值相同;<br/>
    兩個值: 左上角與右下角，右上角與左下角;<br/>
    三個值: 左上角, 右上角和左下角，右下角;<br/>
    四個值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    單獨指定某個角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

輸出結果

11.3 圓角邊框

不要重復造輪子，所以好多程序員一遇到問題，就喜歡搜索，我也是，哈哈哈~。CSS有指定邊框的屬性，也有圓角的屬性，將其放在一起，是不是就可以實現圓角邊框?答案毋庸置疑，答案是肯定的。

在樣式表ys2.css文件中的內容

/*圓角邊框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內容

<div class="corners">
    邊框屬性和圓角屬性，組合成圓角邊框
</div>

輸出結果

好了，有關CSS的圓角邊框內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

在線咨詢

上一篇：你玩的游戲就是HTML5開發的，想自己開發一款游戲嗎？
下一篇：html表格實現固定table的表頭和第一列內容

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

簡單形狀繪制《HTML5系列教程18》

單形狀繪制《HTML5系列教程18》

11.1 邊框逼格

11.2 圓角風格

11.3 圓角邊框

您的項目需求