好程序员：前端JavaScript全解析——Canvas绘制形状（上）

●今天，我们来通过 canvas 提供的方法开绘制一些简单的形状绘制矩形

绘制基础矩形。下面一起看看好程序员老师的讲解吧~

●语法 : 工具箱.rect( 矩形起点 x 轴坐标, 矩形起点 y 轴坐标, 矩形宽度, 矩形高度 )

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 绘制基础矩形
ctx.rect(100, 100, 100, 100)

复制代码●这个表示从画布坐标 100, 100 的位置开始绘制一个 100 * 100 的矩形

●注意 : 这里绘制的矩形只是一个矩形痕迹, 打开浏览器你会发现什么都没有出现

●这是因为我们没有进行描边或者填充

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 绘制基础矩形
ctx.rect(100, 100, 100, 100)

// 3. 填充
ctx.fill()