<canvas> 標籤定義圖形，比如圖表和其他影象，您必須使用指令碼來繪製圖形。

在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。

什麼是 canvas?

HTML5 <canvas> 元素用於圖形的繪製，通過指令碼 (通常是JavaScript)來完成.

<canvas> 標籤只是圖形容器，您必須使用指令碼來繪製圖形。

你可以通過多種方法使用 canvas 繪製路徑,盒、圓、字元以及新增影象。

建立一個畫布（Canvas）

一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪製.

例項

使用 JavaScript 來繪製圖像

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

例項

例項解析:

首先，找到 <canvas> 元素:

然後，建立 context 物件：

getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。

下面的兩行程式碼繪製一個紅色的矩形：

設定fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 預設設定是#000000（黑色）。

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。

在canvas中繪製路徑

moveTo(x,y) 定義線條開始座標

lineTo(x,y) 定義線條結束座標

定義開始座標(0,0), 和結束座標 (200,100)。然後使用 stroke() 方法來繪製線條:

JavaScript:var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();

在canvas中繪製圓形

arc(x,y,r,start,stop)

arc方法是2D畫布的一個繪製圓狀態的一個方法，arc有六個引數：arc(x, y, r, sAngle, eAngle, counterclockwise);六個引數對應的意思：

x,y表示圓心座標

r 表示圓的半徑

sAngle : 表示開始繪製的角度

eAngle : 表示結束繪製的角度

counterclockwise ： 表示順時針繪製還是逆時針，false = 順時針，true = 逆時針，預設值是false

例項：

ctx.arc(150,120,100,1*Math.PI,0.5*Math.PI);

在canvas中繪製文字

使用 canvas 繪製文字，重要的屬性和方法如下：

• font - 定義字型
• fillText(text,x,y) - 在 canvas 上繪製實心的文字
• strokeText(text,x,y) - 在 canvas 上繪製空心的文字

使用 fillText():

例項

使用 "Arial" 字型在畫布上繪製一個高 30px 的文字（實心）：

JavaScript:

使用 strokeText():

例項

使用 "Arial" 字型在畫布上繪製一個高 30px 的文字（空心）：

JavaScript: