记录--canvas基础操作

1. 以下是一些有关使用Canvas的技巧：

1. 绘制基本形状：Canvas可以用于绘制各种基本形状，如矩形、圆形、线条等。使用 fillRect() 方法绘制矩形，使用 arc() 方法绘制圆形，使用 lineTo() 方法绘制线条等。
2. 绘制文本：使用 fillText() 或 strokeText() 方法可以在Canvas上绘制文本。可以设置字体、大小、颜色等属性来自定义文本样式。
3. 绘制图像：Canvas可以加载和绘制图像，使用 drawImage() 方法可以将图像绘制到Canvas上。可以设置图像的位置、大小等属性。
4. 渐变和阴影：Canvas支持渐变和阴影效果，可以使用 createLinearGradient() 或 createRadialGradient() 方法创建渐变对象，并使用 fillStyle 属性将其应用到形状上。使用 shadowOffsetX 、 shadowOffsetY 、 shadowBlur 和 shadowColor 属性可以创建阴影效果。
5. 动画效果：Canvas可以用于创建动画效果。通过在每一帧中更新Canvas上的元素位置或属性，并使用 requestAnimationFrame() 方法递归调用动画函数，可以实现平滑的动画效果。
6. 保存和恢复状态：Canvas上的绘制操作可以使用 save() 和 restore() 方法保存和恢复状态。这对于在绘制过程中切换样式、平移、旋转等操作非常有用。

2. 基本图形绘制方法和参数解释如下：

1. 绘制矩形（ fillRect() ）：
   • 参数： fillRect(x, y, width, height)
   • x和y表示矩形左上角的坐标，width和height表示矩形的宽度和高度。
2. 绘制圆形（ arc() ）：
   • 参数： arc(x, y, radius, startAngle, endAngle, anticlockwise)
   • x和y表示圆心的坐标，radius表示半径，startAngle和endAngle表示起始角度和结束角度（以弧度为单位），anticlockwise表示是否逆时针绘制。
3. 绘制线条（ lineTo() ）：
   • 参数： lineTo(x, y)
   • x和y表示线条终点的坐标。
4. 绘制文本（ fillText() 和 strokeText() ）：
   • 参数： fillText(text, x, y) 或 strokeText(text, x, y)
   • text表示要绘制的文本，x和y表示文本的起始位置的坐标。

3.要在Canvas上绘制文本，可以使用 fillText() 或 strokeText() 方法。这些方法的参数和用法如下：

1. fillText(text, x, y [, maxWidth]) ：

• text：要绘制的文本内容。
• x 和 y：文本起始位置的坐标，即文本的左下角或左侧中心点的坐标。
• maxWidth（可选）：文本的最大宽度，超过该宽度时文本会进行换行。

2. strokeText(text, x, y [, maxWidth]) ：

• text：要绘制的文本内容。
• x 和 y：文本起始位置的坐标，即文本的左下角或左侧中心点的坐标。
• maxWidth（可选）：文本的最大宽度，超过该宽度时文本会进行换行。

示例代码：

以上代码将在Canvas上绘制一个填充文本和一个描边文本，分别位于坐标(50, 50)和(50, 100)的位置。

请注意，绘制文本前需要设置字体样式、颜色等属性。同时，可以使用 measureText() 方法获取文本的宽度信息，以便进行布局和对齐操作。

4.beginPath() 的使用

beginPath() 是Canvas中的方法，用于开始一个新的路径。路径可以是一条线、一段曲线、一个矩形或者一个闭合的形状。

在使用 beginPath() 之后，你可以使用其他绘制方法（如 moveTo() 、 lineTo() 、 arc() 等）来创建路径。当你完成路径的绘制后，可以使用 stroke() 或 fill() 方法来描边或填充路径。

以下是 beginPath() 方法的基本使用示例：

	const canvas = document.getElementById('myCanvas');
	const ctx = canvas.getContext('2d');
	
	ctx.beginPath(); // 开始新的路径
	
	// 绘制路径
	ctx.moveTo(50, 50); // 移动到起始点
	ctx.lineTo(100, 100); // 绘制一条直线
	ctx.arc(150, 50, 30, 0, Math.PI * 2, false); // 绘制一个圆弧
	ctx.closePath(); // 闭合路径
	
	ctx.stroke(); // 描边路径