1.矩形绘制
1.1绘制方法
fillRect(x,y,width,height) 绘制实心矩形
strokeRect(x,y,width,height) 绘制描边矩形
rect(x,y,width,height) 创建矩形路径，再使用fill(),stroke()绘制
let canvas=document.getElementById('test')
let context=canvas.getContext('2d')
context.fillRect(10,10,50,50)
context.strokeRect(70,10,50,50)
context.rect(30,30,80,60)
context.stroke()
image.png
使用矩形路径绘制矩形时，画笔位置在设置的矩形原点位置，而直接生成的实心矩形和描边矩形没有初始画笔位置。
context.strokeStyle='#00f'
context.rect(30,30,80,60)
context.lineTo(390,390)
context.stroke()
image.png
1.2设置样式
fillStyle() 设置实心矩形样式
strokeStyle() 设置描边矩形的样式
let canvas=document.getElementById('test')
let context=canvas.getContext('2d')
context.fillStyle='#f00'
context.fillRect(10,10,50,50)
context.beginPath()
context.strokeStyle='#0f0'
context.strokeRect(70,10,50,50)
context.beginPath()
context.strokeStyle='#00f'
context.rect(30,30,80,60)
context.stroke()
image.png
1.3矩形擦除
clearRect()参数同上，类似于橡皮擦的功能，擦除画布上的内容。
context.clearRect(40,40,100,30)
image.png
但擦除画布内容不会影响之前设置的样式信息，画笔位置等。
可以通过重置画布大小来清除内容，样式，画笔位置等。
2.绘制多边形
绘制多边形的一半方法是画一条闭环的折线，然后使用fill(),stroke()填充描边。
context.strokeStyle='#00f'
context.fillStyle='#f00'
context.moveTo(30,30)
context.lineTo(80,120)
context.lineTo(200,200)
context.lineTo(150,80)
context.lineTo(30,30)
context.lineWidth=8
context.closePath()//形成闭环，否则线条头和尾有间距
context.fill()//填充
context.stroke()//描边
image.png
3.曲线绘制
3.1圆与圆弧绘制
绘制方法arc(圆心x，圆心y，半径r，开始角度，结束角度)
注：角度使用弧度制表示，顺时针取值，负值以逆时针方向取值。
let canvas=document.getElementById('test')
let context=canvas.getContext('2d')
context.strokeStyle='#00f'
context.lineWidth=5
context.fillStyle='#f00'
context.arc(200,200,80,0,3/2*Math.PI)
context.fill()
context.stroke()
image.png
arcTo()方法，可在两个线段之间连接一条圆弧
arcTo(起点末端切线x，起点末端y，终点x，终点y，圆半径)
image.png
context.moveTo(10,40)
context.lineTo(40,40)
context.arcTo(80,40,80,80,40)
context.lineTo(80,120)
context.stroke()
arcTo()会移动画笔的位置，arc()并不会。