canvas之碎碎念

Posted 2020-09-26

1.区别fillRect与rect：

fillRect():默认填充成黑色矩形,不能用于区域点击

rect():只是画矩形，但未填充，后面添加填充fill()或描边stroke()，通过结合addHitRegion({‘id‘: ‘idname‘})在画布实现区域点击

PS：谷歌安全性启用或停止方法：地址栏输入chrome://flags/

2.画矩形

ctx.fillRect(x,y,width,height)：绘制一个有填充颜色的矩形

ctx.strokeRect(x,y,width,height):绘制矩形的边框(可以理解为只有边框的矩形)

ctx.clearRect(x,y,width,height):清除指定矩形区域，让清除部分完全透明

ctx.rect(x,y,width,height) ：快速绘制矩形。如果要填充和描边，先使用rect绘制出来，然后再开始填充和描边。