一、基本用法

• canvas 標簽：可用于在網頁上繪制圖形（使用 JavaScript 在網頁上繪制圖像）
• 畫布是一個矩形區(qū)域，通過控制其每一像素繪制路徑、矩形、圓形、字符以及添加圖像。
• 創(chuàng)建一個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個參數為在canvas里面的矩形左上角起點坐標，第3個參數是寬，第4個參數是高）
cxt.fillRect(0,0,150,75);
// 填充顏色
cxt.fillStyle="#FF0000";
</script>

二、用法詳見

2.0、方法屬性

• context 對象屬性

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

• context 對象方法

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

2.1、繪制線條

• 線條方法

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

<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.moveTo(10,10);
// 折點坐標
cxt.lineTo(150,50);
// 折點坐標
cxt.lineTo(10,50);
// 繪制當前或已經存在的路徑的方法
cxt.stroke();
</script>

• 專有屬性

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

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

2.2、繪制矩形

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

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

參數	描述
x	矩形左上角的 x 坐標。
y	矩形左上角的 y 坐標。
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() 方法：向路徑添加一個圓形 context.arc(x,y,r,start,end)

參數	描述
x	圓心的x軸坐標
y	圓心的y軸坐標
r	圓弧的半徑
start	圓弧的起始點
end	圓弧的終點

<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)建一個新的路徑
cxt.beginPath();
// 繪制圓弧路徑的方法（圓心的x軸坐標，圓心的y軸坐標，圓弧的半徑，圓弧的起始點，圓弧的終點，true逆時針繪制圓弧false順時針繪制）
cxt.arc(70,18,15,0,Math.PI*2,true);
// 返回到當前路徑起始點的方法
cxt.closePath();
// 填充當前或已存在的路徑的方法
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	設置或返回文本內容的當前字體屬性。
textAlign	設置或返回文本內容的當前對齊方式。
textBaseline	設置或返回繪制文本時使用的當前文本基線。

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

• textAlign 屬性
  

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

• textBaseline 屬性
  

值	描述
alphabetic	默認。文本基線是普通的字母基線。
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的左上角在目標畫布上X軸坐標，image的左上角在目標畫布上Y軸坐標）
ctx.drawImage(img, 10, 10)
</script>