绘制图形

栅格

canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。

绘制方式

canvas只支持两种形式的图形绘制：矩形和路径

绘制路径

1. beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
2. closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。
3. stroke() 通过线条来绘制图形轮廓。
4. fill() 通过填充路径的内容区域生成实心的图形。
5. 当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。

//绘制三角形的一个示例
const el = document.querySelector<HTMLCanvasElement>("canvas")!
const canvas = el.getContext("2d")!

canvas.beginPath();
canvas.moveTo(75, 50);
canvas.lineTo(100, 75);
canvas.lineTo(100, 25);
canvas.fill();

MoveTo(x,y) 函数:移动笔触，从一个点到另一个点的绘制过程

canvas.beginPath();
canvas.arc(75, 75, 50, 0, Math.PI * 2, false);
canvas.moveTo(110, 75);
canvas.arc(75, 75, 35, 0, Math.PI, false);
canvas.moveTo(65, 65);
canvas.arc(60, 65, 5, 0, Math.PI * 2, true);
canvas.moveTo(95, 65);
canvas.arc(90, 65, 5, 0, Math.PI * 2, true);
canvas.stroke();

线

lineTo(x, y)。绘制一条从当前位置（0，0）｜ （1，1）到指定 x 以及 y 位置的直线。

//绘制一个填充的三角形
canvas.beginPath();
canvas.moveTo(10, 10);
canvas.lineTo(80, 10);
canvas.lineTo(10, 80);
canvas.fill();
//canvas.stroke();调用此方法代替fill方法会绘制一个描边的三角形

绘制五角星的例子：

canvas.beginPath()
canvas.moveTo(100,0)
canvas.lineWidth = 5
canvas.strokeStyle = "#e74c3c"
canvas.lineTo(100,0)
canvas.lineTo(120,70)
canvas.lineTo(195,70)
canvas.lineTo(135,110)
canvas.lineTo(160,180)
canvas.lineTo(100,140)
canvas.lineTo(40,180)
canvas.lineTo(65,110)
canvas.lineTo(5,70)
canvas.lineTo(80,70)
canvas.closePath()
canvas.stroke()

效果图：

圆弧

1.arc(x,y radius,startAngle,endAngle,anticlockwise)

参数讲解：

x:圆心坐标在x轴上的偏移量

y:圆心坐标在y轴上的偏移量

radius: 圆的半径

startAngle: 起始角度

endAngle：结束角度

anticlockwise: boolean true->顺时针绘制 false->逆时针绘制

二次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)

参数： Cp1x:控制点x轴坐标

Cp1y:控制点y轴坐标

x,y: 结束点坐标

canvas.beginPath();
canvas.moveTo(75, 25);
canvas.quadraticCurveTo(25, 25, 25, 62.5);
canvas.quadraticCurveTo(25, 100, 50, 100);
canvas.quadraticCurveTo(50, 120, 30, 125);
canvas.quadraticCurveTo(60, 120, 65, 100);
canvas.quadraticCurveTo(125, 100, 125, 62.5);
canvas.quadraticCurveTo(125, 25, 75, 25);
canvas.stroke();

矩形

Canvas.rect(x,y,width,height)

参数：

x,y 矩形左上角的坐标

width:矩形宽度

height:矩形高度

canvas.rect(10,10,200,100)
canvas.fill()

调用rect方法绘制矩形之后，当前笔触会被重制为默认值（0，0）

Path2D对象

用来缓存或记录绘画命令，产生一个 Path2D 对象，通过调用Path2D构造函数

const rectangle = new Path2D();
rectangle.rect(10, 10, 50, 50);

const circle = new Path2D();
circle.moveTo(125, 35);
circle.arc(100, 35, 25, 0, 2 * Math.PI);

canvas.stroke(rectangle);
canvas.fill(circle);