简单来说，<canvas> 是 HTML5 中的一个标签，它是一个 容器 ，可以理解成画布，可以使用JS在其中绘制图形或文字。
1、canvas基础
canvas标签是一个默认长300px，宽150px的白色画布。你可以给它加上页面居中和 box-shadow 的css样式。
1.1、canvas的width和height
canvas的宽高只能在html标签里通过height和width属性来设置，canvas标签有且仅有这两个属性。
如果在css中设置宽和高，这种方式知识将画布拉伸变形了，会导致失真，其实它本质上的大小并没有变化。所以，canvas的宽高还是要在html中使用标签属性设置。
1.2、canvas的兼容器
如果浏览器不支持canvas，可以在canvas中设置提示文字，当浏览器不支持canvas时，浏览器会显示canvas标签里的文字。
<canvas>你的浏览器不支持canvas，快去升级浏览器吧！</canvas>2、图形绘制基础
2.1、canvas绘图能力
利用canvas的api，我们可以完成下列图形的绘制：
- 直线 （有简易版的矩形API）
- 曲线 （有简易版的椭圆API）
- 文字
- 图片
利用上面基本形状以及它们的组合，再配合它提供了各种样式设置，就可以完成任意二维图像的绘制。
2.2、图形绘制的几个api
moveTo(x, y)：定义画线的起始点；
lineTo(x, y)：定义画线的折点；
stroke()：通过线条来绘制图形轮廓；2.3、线条样式
strokeStyle = '颜色'：设置线的颜色；
lineWidth = 数字：设置线的宽度；
lineCap = 'round/butt/square'：设置线帽为圆型/默认/方形；
lineJoin = 'miter/round/bevel'：设置线段连接处为默认/圆形/平直形式；
globalAlpha = 数字：设置图案的透明度这里有一个地方需要注意，样式的设置必须写在绘制图形（ stroke() ）方法之前，否则不会生效。因为 stroke() 方式是进行绘制，如果已经绘制了再设置线条的样式，自然不会生效。
2.3、图形绘制示例
2.3.1、html代码
<div class="container">
<!-- 创建canvas标签： -->
<canvas id="canvas" height="600" width="700"></canvas>
</div>2.3.2、css代码
增加一个父元素，并设置canvas居中
<style>
.container {
display: flex;
justify-content: center;
}
canvas {
box-shadow: inset;
border: solid 1px red;
}
</style>2.3.3、js代码
<script>
// 得到canvas标签的dom对象
const canvas = document.getElementById('canvas')
// 通过getContext()方法来获取渲染上下文
const ctx = canvas.getContext('2d')
// 定义画线的起始点
ctx.moveTo(200, 300)
// 定义画线的折点
ctx.lineTo(500, 300)
// 设置线条的颜色
ctx.strokeStyle = '#FF0EE0'
// 设置线条的宽度
ctx.lineWidth = 10
// 通过线条来绘制图形轮廓
ctx.stroke()
</script>2.3.4、运行结果
2.4、连续画线
如果现在你画了两条宽20px圆角的线，并且想一条设置为红色，一条设置为天蓝色，那么你可能会这样写：
<canvas id="canvas" height="600" width="700"></canvas>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.moveTo(200, 200)
ctx.lineTo(500, 200)
ctx.strokeStyle = 'skyblue' // 设置为天蓝色
ctx.lineWidth = 20
ctx.lineCap = 'round'
ctx.stroke()
// 绘制第二条线：
ctx.moveTo(200, 300)
ctx.lineTo(500, 300)
ctx.strokeStyle = 'red'
ctx.lineWidth = 20
ctx.lineCap = 'round'
ctx.stroke()
</script>但是运行结果是这样的：
两条线都显示的是红色，这是因为第二条线的颜色“覆盖”了第一条线的颜色。如果我们想分别设置每条线的样式，就需要用到下面两个方法：
beginPath()：开启一条新路径，生成之后，图形绘制命令会被指向到新路径上；
closePath()：关闭上一条路径的绘制把代码改成下面这样：
<canvas id="canvas" height="600" width="700"></canvas>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(200, 200)
ctx.lineTo(500, 200)
ctx.strokeStyle = 'skyblue' // 设置为天蓝色
ctx.lineWidth = 20
ctx.lineCap = 'round'
ctx.stroke()
ctx.closePath()
// 绘制第二条线：
ctx.beginPath()
ctx.moveTo(200, 300)
ctx.lineTo(500, 300)
ctx.strokeStyle = 'red'
ctx.lineWidth = 20
ctx.lineCap = 'round'
ctx.stroke()
ctx.closePath()
</script>运行结果按照预期显示：
