分享篇：Canvas绘制简单图像
目录
Canvas绘制简单图形需要用到的基本知识：
1.moveTo()
2. lineTo()
3.stroke()
4.strokeStyle/lineWidth
5.beginPath()
6.closePath()
7.arc（）
8.createLinearGradient（）
9.createRadialGradient（）
10.createConicGradient（）
11.addColorStop()
绘制直线
示例
绘制折线
示例
绘制多边形
绘制三角形示例
绘制笑脸
示例
效果图
渐变效果
线性渐变
示例折线渐变
径向渐变
锥形渐变
Canvas绘制简单图形需要用到的基本知识：
1.
moveTo()移动到起始点：使用
moveTo()方法将画笔移动到直线的起始点。这个方法接受 x 和 y 坐标作为参数，用于指定起始点的位置。2.
lineTo()画直线：使用
lineTo()方法绘制直线。它接受 x 和 y 坐标作为参数，用于指定直线的终点位置。3.
stroke()描边路径：使用
stroke()方法来描绘路径，即绘制直线。这个方法会将路径上的线条以当前设置的属性进行描边。4.strokeStyle/
lineWidth设置线条属性：要绘制直线，你需要设置一些线条属性，如线条的颜色、宽度、端点样式等。可以使用上下文对象的属性来设置这些属性。例如，使用
context.strokeStyle来设置线条的颜色，使用context.lineWidth来设置线条的宽度。5.beginPath()
开始路径：在绘制直线之前，需要使用
beginPath()方法来开始一个新的路径。这个方法会将当前路径重置为空路径，以便开始绘制新的路径。6.closePath()
用于创建一个从当前路径绘制到起始点的路径段，并闭合路径。
7.arc（）
arc()是 Canvas 上的一个方法，用于绘制弧形或圆形。arc(圆心,圆心,半径,圆弧的起始点，x 轴方向开始计算，单位以弧度表示。,圆弧的终点，单位以弧度表示。，可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制);8.createLinearGradient（）
用于创建一个线性渐变对象，可以用于填充或描边图形。
createLinearGradient(x0, y0, x1, y1)方法接受四个参数来指定线性渐变的起点和终点的坐标：(x0, y0)：渐变起点的坐标。(x1, y1)：渐变终点的坐标。9.createRadialGradient（）
创建一个径向渐变对象，可以用于填充或描边图形。
createRadialGradient(x0, y0, r0, x1, y1, r1)方法接受六个参数来指定径向渐变的起点、半径和终点的坐标：
(x0, y0)：渐变起点的坐标。
r0：起点的半径。
(x1, y1)：渐变终点的坐标。
r1：终点的半径。10.createConicGradient（）
锥形渐变这个方法目前还没有广泛的浏览器支持createConicGradient（45*(Math.PI)/180,100,100）
第一个参数
45*(Math.PI)/180表示渐变的起始角度。在这里，它被设置为 45 度（π/4 弧度）。您可以根据需要进行角度的转换，例如将度数转换为弧度。第二个参数
100表示渐变的中心点的 x 坐标。在此示例中，将中心点设置为(100,100)。 第三个参数100表示渐变的中心点的 y 坐标。同样，在此示例中，中心点的 y 坐标也设置为 100。11.
addColorStop()
addColorStop是Canvas API中的一个方法，用于向渐变对象添加颜色停止点。
绘制直线
绘制直线需要用到
moveTo()lineTo()stroke()等方法，演示代码如下。需要注意的是，moveTo()lineTo()参数是坐标位置 x，ymoveTo()lineTo()分别对应直线的起点和终点。
示例
绘制折线
绘制折线需要的用到
moveTo()lineTo()stroke()，折线的绘制和直线的绘制原理一致，使用moveTo()规定折线的起点，lineTo(),规定折线需要经过的位置，再使用stroke()绘制路径即可。
示例
绘制多边形
有了上面两个例子我们再来绘制多边形会简单很多，绘制多边形和绘制直线折线本质上都是一样的，使用moveTo（）规定起点，lineTo（）规定需要经过的点，再使用stroke（）绘制路径即可。下面是一个绘制三角形的例子以供参考。
绘制三角形示例
绘制笑脸
绘制笑脸需要用到arc()，beginPath()，等方法,需要使用beginPath（）创建新的路径绘制每个圆时都会使用 stroke() 方法，默认情况下，绘制的路径会沿着之前的路径绘制，形成相互连接的效果，而这些圆之间是相互连接的。closePath()是配合的beginPath()api 闭合路径
示例
效果图
渐变效果
线性渐变
let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');
// 创建线性渐变对象
let gradient = context.createLinearGradient(0, 0, 200, 0);
// 设置渐变的颜色
gradient.addColorStop(0, 'red'); // 起点颜色为红色
gradient.addColorStop(1, 'blue'); // 终点颜色为蓝色
// 使用线性渐变填充矩形
context.fillStyle = gradient;
context.fillRect(50, 50, 200, 100);
在上述示例中，首先使用 createLinearGradient() 方法创建一个线性渐变对象。起点坐标为 (0, 0)，终点坐标为 (200, 0)，即水平从左到右的渐变。然后，通过 addColorStop() 方法设置渐变的颜色。在本例中，起点颜色设置为红色（位置比例为 0），终点颜色设置为蓝色（位置比例为 1）。最后，使用 fillRect() 方法绘制一个矩形，并使用线性渐变对象作为填充样式，使矩形按照渐变色进行填充。
示例折线渐变
径向渐变
let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');
// 创建径向渐变对象
let gradient = context.createRadialGradient(100, 100, 50, 100, 100, 150);
// 设置渐变的颜色
gradient.addColorStop(0, 'red'); // 起点颜色为红色
gradient.addColorStop(1, 'blue'); // 终点颜色为蓝色
// 使用径向渐变填充圆形
context.fillStyle = gradient;
context.arc(100, 100, 100, 0, 2 * Math.PI);
context.fill(); 在上述示例中，首先使用 createRadialGradient() 方法创建一个径向渐变对象。起点坐标为 (100, 100)，起点半径为 50，终点坐标为 (100, 100)，终点半径为 150。这表示渐变从圆心起点开始，从半径为 50 的位置渐变到半径为 150 的位置。然后，通过 addColorStop() 方法设置渐变的颜色。在本例中，起点颜色设置为红色（位置比例为 0），终点颜色设置为蓝色（位置比例为 1）。最后，使用 arc() 方法绘制一个圆形，并使用径向渐变对象作为填充样式，使圆形按照渐变色进行填充。
锥形渐变