canvas 系列（二）

现在你有没有什么疑问。坐标（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) 

• 厉害了，你居然画了这样一个图形