Canvas基本功能

在所有的桌面應用程序的開發平臺中幾乎都有 Canvas 組件。

Canvas組件已經成為繪圖組件的代名詞。

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

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

繪制方法

圖形的基本元素是路徑。

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

一個路徑，甚至一個子路徑，都是閉合的。

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

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

beginPath()

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

moveTo(x, y)

把畫筆移動到指定的坐標(x, y)。相當于設置路徑的起始點坐標。

closePath()

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

stroke()

通過線條來繪制圖形輪廓

fill()

通過填充路徑的內容區域生成實心的圖形

(一)Canvas標簽

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

一個畫布在網頁中是一個矩形框，通過 元素來繪制。

案例：創建一個畫布 (Canvas)

代碼清單：

canvas



您的瀏覽器不支持 HTML5 canvas 標簽。

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

可以在 HTML 頁面中使用多個 元素。

程序運行效果如下圖所示：

理解Canvas坐標系

如下圖所示，canvas元素的坐標系統 是一個二維網格，它的坐標系是以左上角為原點，向右延伸是橫坐標 x 的正方向，向下延伸 是縱坐標 y 的正方向，所以原點的坐標是 (x,y) = (0,0)。

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

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

案例：使用JavaScript來獲取Canvas坐標，當鼠標移到矩形框上時，顯示定位坐標。

canvas

程序運行效果如下圖所示：

獲取Canvas環境上下文

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

在使用 canvas 時，首先要得到 canvas 的環境上下文。才能夠對 canvas 進行相應操作。

案例：獲取 canvas 的環境上下文

canvas



您的瀏覽器不支持 HTML5 canvas 標簽。

程序運行效果如圖：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。