1.canvas畫布的大小
canvas默認的大小是 300*150。
通過操作width/height屬性可以設置畫布的大小，屬性值只能是具體是像素值，而不能是百分比。
提示：給canvas設置邊框就可以看見他的大小了。
注意：css樣式里面width/height只是將畫布整體縮放而已（連同畫布的坐標），並不是設置畫布的大小。
<body>
<div class="box">
<!-- 在標簽中設置畫布大小 -->
<canvas width="400" height="200"></canvas>
</div>
</body>
//js設置畫布大小
var canvas = document.querySelector("canvas")
// 方法一
canvas.setAttribute("width",400)
canvas.setAttribute("height",200)
//方法二
canvas.width = 400
canvas.height = 200
2.繪制直線
在畫布中作圖的第一步是獲取繪圖工具，接着描點，最后將描點的軌跡繪制展現出來。
要用到的API：
canvas.getContext("2d")：獲取繪圖工具
ctx.moveTo(x,y)：將畫筆移動到相關坐標
ctx.lineTo(x,y)：畫一條直線到相關坐標
ctx.strokeStyle：設置描邊的顏色
ctx.lineWidth：設置直線的寬度
ctx.stroke()：將前面畫筆的移動軌跡進行描邊
<script>
var canvas = document.querySelector("canvas")
// 設置畫布大小
canvas.width = 400
canvas.height = 200
// 獲取繪圖工具
var ctx = canvas.getContext("2d")
// 將畫筆移動到相關坐標
ctx.moveTo(100,100)
// 畫一條直線到相關坐標
ctx.lineTo(300,100)
// 再畫一條直接到相關坐標
ctx.lineTo(300,150)
// 設置描邊的顏色
ctx.strokeStyle = "blue"
// 設置直線的寬度
ctx.lineWidth = 5
// 將前面畫筆的移動軌跡進行描邊
ctx.stroke()
</script>
3.設置新的繪制起點 ctx.beginPath()
ctx.stroke()繪制的時候默認會將前面已經繪制過的軌跡覆蓋，例如：
<script>
var canvas = document.querySelector("canvas")
// 獲取繪圖工具
var ctx = canvas.getContext("2d")
// 繪制一條藍色的直線
ctx.moveTo(100,100)
ctx.lineTo(300,100)
ctx.strokeStyle = "blue"
ctx.lineWidth = 5
ctx.stroke()
// 再繪制一條綠色的直線
ctx.moveTo(100,150)
ctx.lineTo(300,150)
ctx.strokeStyle = "green"
ctx.stroke()
</script>
我們不希望這樣的結果，可以設置新的繪制起點。
語法：ctx.beginPath()
<script>
var canvas = document.querySelector("canvas")
// 獲取繪圖工具
var ctx = canvas.getContext("2d")
// 繪制一條藍色的直線
ctx.moveTo(100,100)
ctx.lineTo(300,100)
ctx.strokeStyle = "blue"
ctx.lineWidth = 5
ctx.stroke()
// 再繪制一條綠色的直線
// 設置新的繪制起點
ctx.beginPath()
ctx.moveTo(100,150)
ctx.lineTo(300,150)
ctx.strokeStyle = "green"
ctx.stroke()
</script>
4.繪制填充顏色的三角形
fillStyle：設置填充顏色
fill()：填充
注意：填充的時候會將起點和終點自動連接，以形成一個封閉的形狀
<script>
var canvas = document.querySelector("canvas")
// 獲取繪圖工具
var ctx = canvas.getContext("2d")
// 繪制一條藍色的直線
ctx.moveTo(50,50)
ctx.lineTo(150,50)
ctx.lineTo(150,150)
// 描邊的直線並沒有閉合成一個封閉的形狀
ctx.stroke()
// 設置填充顏色
ctx.fillStyle = "yellow"
// 填充（將起點和終點自動連接，以形成一個封閉的形狀）
ctx.fill()
</script>
5.自動閉合路徑 ctx.closePath()
在描邊的時候，即使起始點和lineTo結束點的坐標一致，他也無法完全閉合，有缺角
<script>
var canvas = document.querySelector("canvas")
// 獲取繪圖工具
var ctx = canvas.getContext("2d")
// 繪制一條藍色的直線
ctx.moveTo(50,50)
ctx.lineTo(200,50)
ctx.lineTo(200,200)
ctx.lineTo(50,50)
// 即使起點終點一致，描邊時還是有缺角
ctx.lineWidth = 8
ctx.stroke()
</script>
要閉合路徑，無需手動計算起點和終點，直接添加 ctx.closePath() ，會自動連接起點和終點，描邊時還不會缺角
<script>
var canvas = document.querySelector("canvas")
// 獲取繪圖工具
var ctx = canvas.getContext("2d")
// 繪制一條藍色的直線
ctx.moveTo(50,50)
ctx.lineTo(200,50)
ctx.lineTo(200,200)
// 自動閉合路徑
ctx.closePath()
// 即使起點終點一致，描邊時還是有缺角
ctx.lineWidth = 8
ctx.stroke()
</script>
6.繪制鏤空的正方形
鏤空的正方形由2個大小不一的正方形組成。小的正方形嵌套在大整形的正中央。
如果要對這2個正方形進行填充，問題就來了？是2個都進行填充？還是只填充一個？在這里填充有自己的規則，這個規則被稱為非0環繞規則。
非0環繞規則：
看一塊區域是否填充，先從這個區域往外拉一條線，看和這條線相交的軌跡，如果是順時針就+1，逆時針就-1，如果最終值不等於0，則該區域填充。如果等於0，則該區域不填充。
<script>
var canvas = document.querySelector("canvas")
// 獲取繪圖工具
var ctx = canvas.getContext("2d")
//繪制兩個大小不一的正方形套在一起（200*200 100*100）
//大正方形順時針 200*200
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
//自動閉合路徑
ctx.closePath();
//小正方形逆時針 100*100
ctx.moveTo(100, 100);
ctx.lineTo(100, 200);
ctx.lineTo(200, 200);
ctx.lineTo(200, 100);
//自動閉合路徑
ctx.closePath();
ctx.fillStyle = "yellow"
ctx.fill()
</script>
