先说好，这篇文章都是一些很简单的讲解和例子，主要是让小白快速懂的Canvas，如果你以及都Canvas有了解了，后期会有进阶的文章。
Canvas介绍
Canvas 是 HTML5 提供的一个元素，用于在网页上进行图形绘制和动画展示。使用 Canvas，您可以通过 JavaScript 动态地创建和操作图形，实现各种炫酷的效果
Canvas 的特点和功能
此处只是先进行简单介绍，为了方面后面快速理解，主要为了针对于小白，如果对这些有过了解，可直接跳过往下看
-
绘图表面：Canvas 提供了一个绘图表面，类似于一块空白的画布，您可以在上面绘制各种图形。它可以是一个矩形区域，默认大小为 300 像素 × 150 像素，但您也可以自定义其大小。
-
2D 上下文：在 Canvas 上绘制图形之前，需要获取 2D 上下文。通过调用
getContext('2d')方法，您可以获取一个表示 Canvas 绘图功能的对象，可以用来执行绘制操作。 -
绘制基本形状：Canvas API 提供了一组方法来绘制基本的图形，如矩形、圆形、线条、弧线等。您可以设置填充颜色、边框样式、线条粗细等属性，来自定义它们的外观。
-
图像绘制：Canvas 允许您加载并在画布上显示图像。通过使用 drawImage() 方法，您可以将图像绘制到 Canvas 上，可以是来自
<img src=" " >标签、另一个 Canvas 元素或者是远程 URL。 -
文本绘制：您可以使用 Canvas 绘制文本，设置字体、大小、对齐方式等属性来指定文本的样式。可以使用
fillText()或strokeText()方法来在画布上绘制文本。 -
变换与动画：Canvas 提供了一些方法来实现变换和动画效果。例如，可以使用
translate()、rotate()、scale()方法来进行图形的平移、旋转和缩放。通过结合定时器和重绘动画帧，可以创建平滑的动画效果。 -
像素操作：Canvas 允许您直接访问和操纵画布上的像素数据。您可以读取和修改像素的颜色值，从而实现各种像素级别的图像处理和特效
以上就是一些Canvas的功能和用处，接下来开始实操讲解
创捷Canvas骨架
首先先创建一个最基础的图像，先进行了解Canvas,后期就用这个骨架来拓展更多
<!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>
<style>
#canvas {
border: 1px solid #000;
}
</style>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
上面就创建了一个空白的Canvas，Canvas默认宽高是300*150，这里设置了一个宽高150 * 150的画布，注意 如果使用css设置宽高，宽高与初始画布不一样，那么会出现图像扭曲
绘制图形
上面创建好了一个空白的Canvas画布，接下来可以进行绘制图形了。
Canvas是被网格进行覆盖的，我们上面创建了一个150宽度的Canvas，相当与是150个单元，1像素相当于一单元。所有元素都是基于原点定位（0，0），也就是左上角
<!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>
<style>
#canvas {
border: 1px solid #000;
}
</style>
<body onload="fn()">
<canvas id="canvas" width="150" height="150"></canvas>
<script>
function fn () {
const canvas = document.getElementById("canvas")
// 判断浏览器是否支持Canvas
if (canvas.getContext('2d')) {
const cvs = canvas.getContext('2d');
// 这里可以打印一些can看一下里面的一些方法属性，先了解方面后期更好的学习
// console.log(cvs);
// 给图形设置颜色
cvs.fillStyle = '#3eca98'
// 绘制有图形，也就是有填充的(x, y,宽，高)
cvs.fillRect(10, 0, 100, 100)
// 设置颜色
cvs.strokeStyle = '#e74032'
// 绘制边框，也就是没用填充的
cvs.strokeRect(30, 30, 100, 100)
// 清除指定区域，(x,y,width,height)
cvs.clearRect(10, 10, 20, 20)
}
}
</script>
</body>
</html>
<canvas>只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。接下来进行路劲的绘制，路径绘制可以绘制复杂的图形。例如电子签名就可以使用到Canvas的路径绘画
<!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>
<style>
#canvas {
border: 1px solid #000;
}
</style>
<body onload="fn()">
<canvas id="canvas" width="150" height="150"></canvas>
<script>
function fn () {
const canvas = document.getElementById("canvas")
// 判断浏览器是否支持Canvas
if (canvas.getContext('2d')) {
const cvs = canvas.getContext('2d');
// 新建一条路径
cvs.beginPath();
// 路径开始点
cvs.moveTo(10, 20)
// 去往路径点
cvs.lineTo(20, 50)
cvs.lineTo(50, 50)
// 将点位进行闭合，也就是起点与结束点进行闭合
cvs.closePath() //路径闭合以后图形绘制命令会重新指向到上下文
// 将点位进行连接
cvs.stroke()
// 填充图形
// 当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，
// 所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。
// 你可以试一下把cvs.stroke()和cvs.closePath()注释
cvs.fill()
}
}
</script>
</body>
</html>
一些方法的作用我都是直接放到注释上，你可以复制代码运行看一下，根据注释来看会对方法上有一些更好的了解
上面主要看了简单的路径绘制和图形绘制，接下来会讲解一些圆形，圆弧的绘制
<!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>
<style>
#canvas {
border: 1px solid #000;
}
</style>
<body onload="fn()">
<canvas id="canvas" width="150" height="150"></canvas>
<script>
function fn () {
const canvas = document.getElementById("canvas")
// 判断浏览器是否支持Canvas
if (canvas.getContext('2d')) {
const cvs = canvas.getContext('2d');
// 绘制圆弧的话有两种方法，一种是arc(),另一种是arcTo(),我们这边直接使用简单的arc()
// (x点位(园的中心点),y点位(圆的中心点),半径，开始弧度，结束弧度，半圆还是圆,顺时针还是逆时针)
// 注意，开始弧度 和 结束弧度 是以弧度为单位的值，0 表示角度的正右方，以逆时针方向增加。
// cvs.arc(75, 75, 50, 30, 0, Math.PI * 2, false)
// cvs.stroke()
// 结合上面画一个微笑
// 先创建路径
cvs.beginPath()
cvs.arc(75, 75, 70, 50, 0, Math.PI * 2, true); // 轮毂
// cvs.moveTo()调整画笔的位置，要不会连接上一次结束的点位，可以注释看一下
cvs.moveTo(119, 75);
cvs.arc(75, 75, 45, 0, Math.PI, false); // 口 (顺时针)
cvs.moveTo(65, 45);
cvs.arc(50, 45, 15, 0, Math.PI * 2, true); // 左眼
cvs.moveTo(120, 45);
cvs.arc(105, 45, 15, 0, Math.PI * 2, true); // 右眼
cvs.stroke()
}
}
</script>
</body>
</html>
渐变
上面介绍关于图形的简单内容介绍完了，介绍了可以了解一些样式之类的，上面介绍了fillStyle和strokeStyle用来设置线条的颜色和填充的颜色，接下来可以看一下渐变
Canvas 提供了两种类型的渐变：线性渐变和径向渐变。
线性渐变从一个起点到一个终点，按照指定的颜色和位置在这条轴线上进行插值。可以使用
createLinearGradient(x0, y0, x1, y1)方法创建线性渐变对象，其中(x0, y0)表示起点坐标，(x1, y1)表示终点坐标。径向渐变从一个中心点向外扩散，按照指定的颜色和位置在半径上进行插值。可以使用
createRadialGradient(x0, y0, r0, x1, y1, r1)方法创建径向渐变对象，其中(x0, y0)表示内圆的中心点坐标，r0表示内圆的半径，(x1, y1)表示外圆的中心点坐标，r1表示外圆的半径。
//线性渐变
//定义开始位置和结束位置
const gradient = cvs.createLinearGradient(x0, y0, x1, y1);
//使用addColorStop进行上色
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
//最后，将渐变对象设置为绘图上下文的填充样式或描边样式，并使用绘图方法绘制图形。
cvs.fillStyle = gradient; // 设置填充样式
cvs.fillRect(x, y, width, height); // 绘制矩形并填充
//径向渐变
//(x0, y0) 表示内圆的中心点坐标，r0 表示内圆的半径，(x1, y1) 表示外圆的中心点坐标，r1 表示外圆的半径。
const gradient = cvs.createRadialGradient(x0, y0, r0, x1, y1, r1);
//同样地，可以使用 addColorStop(position, color) 方法为渐变对象添加颜色和位置。
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
//最后进行填充
cvs.fillStyle = gradient; // 设置填充样式
cvs.fillRect(x, y, width, height); // 绘制矩形并填充
线形
在Canvas中可以使用多种线型来绘制线条，其中主要包含，实线，虚线，点线，自定义线条，
- 实线：实线是默认的线型，在绘制线条时不需要进行额外设置。可以通过设置上下文的属性来定义实线的样式，
cvs.lineWidth = 2; // 设置线条宽度
cvs.strokeStyle = "black"; // 设置线条颜色
cvs.beginPath();
cvs.moveTo(x1, y1); // 设置起点坐标
cvs.lineTo(x2, y2); // 设置终点坐标
cvs.stroke(); // 绘制线条
- 虚线：虚线由多个实线段和间隔组成，可以使用
setLineDash(segments)方法设置虚线的样式，其中segments是一个数组，表示实线段和间隔的长度
cvs.setLineDash([5, 2]); // 设置虚线的样式，[5, 2] 表示实线段长度为 5，间隔长度为 2
cvs.beginPath();
cvs.moveTo(x1, y1); // 设置起点坐标
cvs.lineTo(x2, y2); // 设置终点坐标
cvs.stroke(); // 绘制线条
- 点线：点线由短小的点组成，可以使用
setLineDash(segments)方法设置点线的样式，其中segments是一个数组，表示实线段和间隔的长度
cvs.setLineDash([1, 3]); // 设置点线的样式，[1, 3] 表示实线段长度为 1，间隔长度为 3
cvs.beginPath();
cvs.moveTo(x1, y1); // 设置起点坐标
cvs.lineTo(x2, y2); // 设置终点坐标
cvs.stroke(); // 绘制线条
- 自定义线条：除了上述内置的线型，你还可以自定义线型。通过使用
setLineDash方法，传入具体的实线段和间隔长度，可以创建出各种不同的线型效果
// 定义自定义线型
const customLineDash = [10, 5, 10]; // 设置线型样式
cvs.setLineDash(customLineDash);
// 绘制线条
cvs.beginPath();
cvs.moveTo(20, 50);
cvs.lineTo(280, 50);
cvs.stroke();
- 线条末端样式
cvs.lineCap = "butt"; //方形末端
cvs.lineCap = "round";//圆形末端
cvs.lineCap = "square"; //方形末端，但是增加了一个宽度和线段相同，高度是线段宽度一半的矩形区域
- 线条与线条间接合处的样式
cvs.lineJoin = "bevel"; //填充一个圆角，圆角的半径是线段的宽度
cvs.lineJoin = "round";//填充一个三角形
cvs.lineJoin = "miter";//菱形
- 设置虚线偏移量
cvs.lineDashOffset这个就不用多介绍了，主要就是线条的偏移，例如你的线条长度为100，如果偏移100的话线条就会看不见，但是还是存在的
结语
本篇主要就是讲解了一些简单的东西，主要也是先回使用，讲解的没用那么细，主要是针对于小白初次学习Canvas来讲解的，后面会慢慢的进阶一些稍微有点难度的东西，下面可以根据上面讲解的实现一个伪3D的效果，主要是用到了径向渐变
下一篇会讲解文字图片的一些东西
