HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成。

<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。

getContext() 方法可返回一個(gè)對(duì)象，該對(duì)象提供了用于在畫布上繪圖的方法和屬性。

你可以通過多種方法使用 Canvas 繪制路徑、盒、圓、字符以及添加圖像。

<canvas> 元素定義如下：

<canvas id="myCanvas" width="200" height="100">
</canvas>

<canvas> 標(biāo)簽通常需要指定一個(gè)id屬性 (腳本中經(jīng)常引用)，width 和 height 屬性定義的畫布的大小。

了解和使用 Canvas 需要基本了解 JavaScript 的基本知識(shí)。

canvas 是一個(gè)二維網(wǎng)格。

canvas 的左上角坐標(biāo)為 (0,0)。

X 坐標(biāo)向右增加。

Y 坐標(biāo)向著畫布底部增加。

Canvas - 路徑

在Canvas上畫線，我們將使用以下兩種方法：

• moveTo(x,y) 定義線條開始坐標(biāo)

• lineTo(x,y) 定義線條結(jié)束坐標(biāo)

在canvas中繪制圓形, 我們將使用以下方法:

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

Canvas - 文本

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

• font - 定義字體

• fillText(text,x,y) - 在 canvas 上繪制實(shí)心的文本

• strokeText(text,x,y) - 在 canvas 上繪制空心的文本

Canvas - 漸變

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設(shè)置Canvas漸變：

• createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變

• createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個(gè)徑向/圓漸變

當(dāng)我們使用漸變對(duì)象，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，參數(shù)使用坐標(biāo)來描述，可以是0至1.

使用漸變，設(shè)置fillStyle或strokeStyle的值為 漸變，然后繪制形狀，如矩形，文本，或一條線。

Canvas - 圖像

把一幅圖像放置到畫布上, 使用以下方法:

• drawImage(image,x,y)