現(xiàn)在你有沒有什么疑問。坐標(biāo)（10馁菜，10）的相對于哪里的原點(diǎn)茴扁？
canva 之所以叫畫布，是因?yàn)樗褪蔷W(wǎng)格汪疮，每個(gè)網(wǎng)格對應(yīng)一個(gè)像素峭火，左上角就是原點(diǎn)（0，0）
不同于 svg智嚷，canvas 只能繪制矩形卖丸，有以下三種繪制矩形的方法
fillRect(x, y, width, height) // 繪制填充的矩形
strokeRect(x, y, width, height) // 繪制矩形邊框
chearRect(x, y, width, height) // 清空矩形區(qū)域
- 接著上一篇文章，實(shí)現(xiàn)在矩形中間扣掉一個(gè)空白區(qū)域
let canvas = document.getElementById("canvas") // 獲取頁面canvas對象
let ctx = canvas.getContext("2d") // 獲取繪制圖形的上下文盏道，參數(shù)可以是2d稍浆、3d...
ctx.fillStyle = "rgb(0, 0, 0)" // 下面繪制圖形的填充色
ctx.fillRect(10, 10 , 100, 100) // 從坐標(biāo)（10，10）的地方畫個(gè)寬100高100矩形
// 在中心點(diǎn)清除一個(gè)矩形 50x50的矩形
let width = 50
// 中心矩形左上角坐標(biāo)
let center = 10 + (100 - width)/2
ctx.clearRect(center, center, width, width)
// 在中心再畫一個(gè)黑色的20x20矩形
let width1 = 20
// 中心矩形左上角坐標(biāo)
let center1 = 10 + (100 - width1)/2
ctx.fillRect(center1, center1 , width1, width1)
-
厲害了猜嘱，你居然畫了這樣一個(gè)圖形
