現在你有沒有什么疑問。坐標（10，10）的相對于哪里的原點？
canva 之所以叫畫布，是因為它就是網格，每個網格對應一個像素，左上角就是原點（0，0）
不同于 svg，canvas 只能繪制矩形，有以下三種繪制矩形的方法
fillRect(x, y, width, height) // 繪制填充的矩形
strokeRect(x, y, width, height) // 繪制矩形邊框
chearRect(x, y, width, height) // 清空矩形區域
- 接著上一篇文章，實現在矩形中間扣掉一個空白區域
let canvas = document.getElementById("canvas") // 獲取頁面canvas對象
let ctx = canvas.getContext("2d") // 獲取繪制圖形的上下文，參數可以是2d、3d...
ctx.fillStyle = "rgb(0, 0, 0)" // 下面繪制圖形的填充色
ctx.fillRect(10, 10 , 100, 100) // 從坐標（10，10）的地方畫個寬100高100矩形
// 在中心點清除一個矩形 50x50的矩形
let width = 50
// 中心矩形左上角坐標
let center = 10 + (100 - width)/2
ctx.clearRect(center, center, width, width)
// 在中心再畫一個黑色的20x20矩形
let width1 = 20
// 中心矩形左上角坐標
let center1 = 10 + (100 - width1)/2
ctx.fillRect(center1, center1 , width1, width1)
-
厲害了，你居然畫了這樣一個圖形
