<canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，實(shí)際上，這個(gè)標(biāo)簽和其他的標(biāo)簽一樣，其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象，我們可以通過JavaScript腳本來控制該對(duì)象進(jìn)行繪圖。

<canvas></canvas>只是一個(gè)繪制圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步：

1.獲取<canvas>元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象；
2.調(diào)用Canvas對(duì)象的getContext()方法，得到一個(gè)CanvasRenderingContext2D對(duì)象；
3.調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。

繪制曲線

跟繪制曲線的有四個(gè)函數(shù)，分別是：

•context.arc(x,y,r,sAngle,eAngle,counterclockwise);用于創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。接收的參數(shù)含義：
| 參數(shù) | 含義 |
| :————- |:————-|
| x | 圓的中心的 x 坐標(biāo) |
|y|圓的中心的 y 坐標(biāo)|
|r|圓的半徑|
|sAngle|起始角，以弧度計(jì)（弧的圓形的三點(diǎn)鐘位置是 0 度）|
|eAngle|結(jié)束角，以弧度計(jì)|
|counterclockwise|可選。規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖。False = 順時(shí)針，true = 逆時(shí)針|

下面是幾個(gè)arc()函數(shù)的幾個(gè)示例： 

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表