一、基本用法

• canvas 標(biāo)簽：可用于在網(wǎng)頁上繪制圖形（使用 JavaScript 在網(wǎng)頁上繪制圖像）
• 畫布是一個(gè)矩形區(qū)域，通過控制其每一像素繪制路徑、矩形、圓形、字符以及添加圖像。
• 創(chuàng)建一個(gè)canvas：width 和 height 是必備屬性，id 是為了在 js 中獲取改元素。

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

• 在 js 中繪制 canvas

<script type="text/javascript">
// 通過 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 創(chuàng)建 context 對象
var cxt = c.getContext("2d");
// 繪制矩形（前2個(gè)參數(shù)為在canvas里面的矩形左上角起點(diǎn)坐標(biāo)，第3個(gè)參數(shù)是寬，第4個(gè)參數(shù)是高）
cxt.fillRect(0,0,150,75);
// 填充顏色
cxt.fillStyle="#FF0000";
</script>

二、用法詳見

2.0、方法屬性

• context 對象屬性

屬性	描述
fillStyle	設(shè)置或返回用于填充繪圖的顏色、漸變或圖案。
strokeStyle	設(shè)置或返回用于筆劃的顏色、漸變或圖案。
shadowColor	設(shè)置或返回用于陰影的顏色。
shadowBlur	設(shè)置或返回陰影的模糊級別。
shadowOffsetX	設(shè)置或返回陰影到形狀的水平距離。
shadowOffsetY	設(shè)置或返回陰影到形狀的垂直距離。

• context 對象方法

方法	描述
fill()	填充當(dāng)前圖形（路徑）。
stroke()	實(shí)際上繪制您定義的路徑。
beginPath()	開始路徑，或重置當(dāng)前路徑。
closePath()	創(chuàng)建從當(dāng)前點(diǎn)返回起點(diǎn)的路徑。

2.1、繪制線條

• 線條方法

方法	描述	繪制
moveTo()	劃線起始點(diǎn)	否
lineTo()	畫線到另一個(gè)點(diǎn)	否

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通過 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 創(chuàng)建 context 對象
var cxt = c.getContext("2d");
// 線條起點(diǎn)坐標(biāo)
cxt.moveTo(10,10);
// 折點(diǎn)坐標(biāo)
cxt.lineTo(150,50);
// 折點(diǎn)坐標(biāo)
cxt.lineTo(10,50);
// 繪制當(dāng)前或已經(jīng)存在的路徑的方法
cxt.stroke();
</script>

• 專有屬性

屬性	描述	值
lineWidth	繪制時(shí)要使用的線條寬度	像素
lineCap	定義線的端部樣式	round（圓形） square（方形）、butt（平直，默認(rèn)值）
lineJoin	設(shè)置或返回兩條線相交時(shí)創(chuàng)建的角的類型	bevel（斜角）、round（圓角） miter（尖角，默認(rèn)值）

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.lineCap = "round";
ctx.stroke();

2.2、繪制矩形

• fillRect() 方法：向路徑添加一個(gè)填充的矩形 context.fillRect(x, y, width, height)
• strokeRect() 方法：向路徑添加一個(gè)無填充矩形 context.fillRect(x, y, width, height)
• rect() 方法：向路徑添加一個(gè)矩形 context.rect(x, y, width, height)

1. strokeRect(30, 30, 50, 50) 
等價(jià)于：ctx.rect(30, 30, 50, 50);ctx.stroke();
2. fillRect(30, 30, 50, 50) 
等價(jià)于：ctx.rect(30, 30, 50, 50);ctx.fill();

參數(shù)	描述
x	矩形左上角的 x 坐標(biāo)。
y	矩形左上角的 y 坐標(biāo)。
width	矩形的寬度，以像素為單位。
height	矩形的高度，以像素為單位。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");// 紅色矩形
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.fillStyle = "yellow"	// 在 strokeRect 中不生效
ctx.strokeRect(5, 5, 290, 140);// 綠色矩形
ctx.beginPath();
ctx.lineWidth = "4";		// 在 fillRect 中不生效
ctx.strokeStyle = "green";	// 在 fillRect 中不生效
ctx.fillStyle = "yellow"
ctx.fillRect(30, 30, 50, 50);

2.3、繪制圓形

• arc() 方法：向路徑添加一個(gè)圓形 context.arc(x,y,r,start,end)

參數(shù)	描述
x	圓心的x軸坐標(biāo)
y	圓心的y軸坐標(biāo)
r	圓弧的半徑
start	圓弧的起始點(diǎn)
end	圓弧的終點(diǎn)

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通過 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 創(chuàng)建 context 對象
var cxt = c.getContext("2d");
// 填充顏色
cxt.fillStyle="#FF0000";
// 創(chuàng)建一個(gè)新的路徑
cxt.beginPath();
// 繪制圓弧路徑的方法（圓心的x軸坐標(biāo)，圓心的y軸坐標(biāo)，圓弧的半徑，圓弧的起始點(diǎn)，圓弧的終點(diǎn)，true逆時(shí)針繪制圓弧false順時(shí)針繪制）
cxt.arc(70,18,15,0,Math.PI*2,true);
// 返回到當(dāng)前路徑起始點(diǎn)的方法
cxt.closePath();
// 填充當(dāng)前或已存在的路徑的方法
cxt.fill();
</script>

2.4、繪制文本

• fillText(text,x,y)：在畫布上繪制“填充的”文本

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

• strokeText(text,x,y)：在畫布上繪制文本（無填充）

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

• 專有屬性：

屬性	描述
font	設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性。
textAlign	設(shè)置或返回文本內(nèi)容的當(dāng)前對齊方式。
textBaseline	設(shè)置或返回繪制文本時(shí)使用的當(dāng)前文本基線。

• font 屬性：使用的語法與 CSS font 屬性相同。

• textAlign 屬性
  

值	描述
start	默認(rèn)。文本在指定的位置開始。
end	文本在指定的位置結(jié)束。
center	文本的中心被放置在指定的位置。
left	文本左對齊。
right	文本右對齊。

• textBaseline 屬性
  

值	描述
alphabetic	默認(rèn)。文本基線是普通的字母基線。
top	文本基線是 em 方框的頂端。
hanging	文本基線是懸掛基線。
middle	文本基線是 em 方框的正中。
ideographic	文本基線是表意基線。
bottom	文本基線是 em 方框的底端。

2.5、填充圖像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通過 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 創(chuàng)建 context 對象
var cxt = c.getContext("2d");
var img = document.getElementById("scream");
// 放置圖片 （圖片，image的左上角在目標(biāo)畫布上X軸坐標(biāo)，image的左上角在目標(biāo)畫布上Y軸坐標(biāo)）
ctx.drawImage(img, 10, 10)
</script>