Canvas基本功能

在所有的桌面應(yīng)用程序的開發(fā)平臺(tái)中幾乎都有 Canvas 組件。

Canvas組件已經(jīng)成為繪圖組件的代名詞。

Canvas元素本制裁上是在瀏覽器中提供一塊兒可繪制的區(qū)域，JavaScript代碼可以訪問該區(qū)域，通過一套完成的API進(jìn)行二維圖像繪制。另外，如果顯卡硬件支持3D圖形功能，還可以使用Canvas繪制3D圖形。

本章主要講解 HTML5 Canvas 的基本功能，利用 Canvas 的API，用實(shí)例展示 一些基本圖形的繪制及操作方法，包括Canvas圖形、文本和圖像的操作等！

繪制方法

圖形的基本元素是路徑。

路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點(diǎn)的集合。

一個(gè)路徑，甚至一個(gè)子路徑，都是閉合的。

使用路徑繪制圖形需要一些額外的步驟：

1.創(chuàng)建路徑起始點(diǎn)
2.調(diào)用繪制方法去繪制出路徑
3.把路徑封閉
4.一旦路徑生成，通過描邊或填充路徑區(qū)域來渲染圖形。
下面是需要用到的方法：

beginPath()

新建一條路徑，路徑一旦創(chuàng)建成功，圖形繪制命令被指向到路徑上生成路徑

moveTo(x, y)

把畫筆移動(dòng)到指定的坐標(biāo)(x, y)。相當(dāng)于設(shè)置路徑的起始點(diǎn)坐標(biāo)。

closePath()

閉合路徑之后，圖形繪制命令又重新指向到上下文中

stroke()

通過線條來繪制圖形輪廓

fill()

通過填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形

(一)Canvas標(biāo)簽

標(biāo)簽定義圖形，比如圖表和其他圖像，必須使用腳本來繪制圖形。如圖所示，在畫布(Canvas)上畫一個(gè)紅色矩形、漸變矩形、彩色 矩形和一些彩色的文字。

一個(gè)畫布在網(wǎng)頁中是一個(gè)矩形框，通過 元素來繪制。

案例：創(chuàng)建一個(gè)畫布 (Canvas)

代碼清單：

canvas



您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。

默認(rèn)情況下元素沒有邊框和內(nèi)容，可以使用 style 屬性來添加邊框。標(biāo)簽通常需要指定一個(gè) id 屬性(腳本中經(jīng)常引用)，width 和 height 屬性定義畫布 的大小。

可以在 HTML 頁面中使用多個(gè) 元素。

程序運(yùn)行效果如下圖所示：

理解Canvas坐標(biāo)系

如下圖所示，canvas元素的坐標(biāo)系統(tǒng) 是一個(gè)二維網(wǎng)格，它的坐標(biāo)系是以左上角為原點(diǎn)，向右延伸是橫坐標(biāo) x 的正方向，向下延伸 是縱坐標(biāo) y 的正方向，所以原點(diǎn)的坐標(biāo)是 (x,y) = (0,0)。

弄清楚以后使用 canvas 的 API 意義重大，在繪圖的時(shí)候需要時(shí)刻記住坐標(biāo)空間。

在以后會(huì)講到的 fillRect 方法擁有參數(shù) (0,0,150,75) ，意思是：在畫布上繪制 150*75 的矩形，從左上角 (0,0) 開始。

案例：使用JavaScript來獲取Canvas坐標(biāo)，當(dāng)鼠標(biāo)移到矩形框上時(shí)，顯示定位坐標(biāo)。

canvas

程序運(yùn)行效果如下圖所示：

獲取Canvas環(huán)境上下文

在定義好 canvas 之后，就可以使用 javascript 訪問 canvas 元素，使用 canvas 提供的一系列 API 。

在使用 canvas 時(shí)，首先要得到 canvas 的環(huán)境上下文。才能夠?qū)?canvas 進(jìn)行相應(yīng)操作。

案例：獲取 canvas 的環(huán)境上下文

canvas



您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。

程序運(yùn)行效果如圖：

總結(jié)

以上是生活随笔為你收集整理的canvas 文字颜色_Canvas基本功能Canvas标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。