目录
canvas是HTML5中推出的新功能，可以在页面上生成一个画布，使用js可以在画布上绘制一些图形。
画爱心我们需要用到bezierCurveTo方法，可以绘制一个三次贝塞尔曲线，让我们绘制想要的曲线，下面我们看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// 画爱心
ctx.beginPath()
ctx.moveTo(250, 250)
// 右边
ctx.bezierCurveTo(300, 150, 450, 250, 250, 450)
ctx.moveTo(250, 450)
// 左边
ctx.bezierCurveTo(50, 250, 200, 150, 250, 250)
ctx.stroke()
</script>
</html>
bezierCurveTo方法参数分别是第一个控制杆的x轴，第一个控制杆的y轴，第二个控制杆的x轴，第二个控制杆的y轴，结束位置的x轴，结束位置的y轴。
画笑脸我们需要用到arc方法，此方法可以绘制出一个圆弧。下面我们看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
// 画圆
ctx.arc(70, 70, 50, Math.PI * 2, 0)
ctx.moveTo(105, 70)
// 画嘴巴
ctx.arc(70, 70, 35, 0, Math.PI)
ctx.moveTo(105, 50)
// 画右边眼睛
ctx.arc(95, 50, 10, 0, Math.PI, true)
ctx.moveTo(55, 50)
// 画左边眼睛
ctx.arc(45, 50, 10, 0, Math.PI, true)
ctx.stroke()
ctx.closePath()
</script>
</html>
arc的参数分别是x轴的位置，y轴的位置，大小，圆弧开始角度，圆弧结束角度，反转绘制。
Math.PI是派，乘以2就相当于360度。
canvas可以使我们在页面绘制许多不一样的图形，上面我只举了两个非常简单的例子。