记录--canvas基础操作

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

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

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

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

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

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

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

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

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

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

示例代码：

	const canvas = document.getElementById('myCanvas');

	const ctx = canvas.getContext('2d');

	ctx.font = '24px Arial'; // 设置字体样式和大小

	ctx.fillStyle = 'black'; // 设置文本颜色

	ctx.fillText('Hello, World!', 50, 50); // 绘制填充文本

	ctx.strokeStyle = 'red'; // 设置描边颜色

	ctx.lineWidth = 2; // 设置描边宽度

	ctx.strokeText('Hello, World!', 50, 100); // 绘制描边文本

以上代码将在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(); // 描边路径

在上述示例中，我们先调用了 beginPath() 方法开始一个新的路径，然后使用 moveTo() 、 lineTo() 和 arc() 方法绘制了一条线和一个圆弧，最后使用 closePath() 方法将路径闭合。最后，我们调用 stroke() 方法描边路径。

beginPath() 方法的作用是开始一个新的路径，清除之前定义的路径，以便绘制新的路径。这在需要绘制多个不相关的路径时非常有用，可以避免不同路径之间的重叠或干扰。

绘制矩形时，不需要使用 beginPath() 方法。 beginPath() 方法主要用于创建和定义路径，而绘制矩形可以直接使用 fillRect() 或 strokeRect() 方法进行绘制，不需要通过路径来实现。

5. 绘制图像方法和参数

在Canvas中绘制图像有多种方法，其中最常用的方法是使用 drawImage() 函数。 drawImage() 函数可以绘制图像到Canvas上，并可以根据需要调整图像的位置、大小和剪裁。 drawImage() 函数的基本语法如下： ctx.drawImage(image, x, y); 其中， image 是要绘制的图像对象，可以是 <img> 元素、 <canvas> 元素或 <video> 元素。 x 和 y 是图像在Canvas上的坐标位置。除了基本的 drawImage() 函数外，还可以使用其他参数来调整图像的大小和剪裁。以下是 drawImage() 函数的常用参数：

ctx.drawImage(image, x, y, width, height) ：指定绘制图像的宽度和高度，可以将图像缩放到指定的大小。
ctx.drawImage(image, sx, sy, swidth, sheight, x, y, width, height) ：可以剪裁图像的一部分，并在Canvas上指定位置绘制。例如，下面的代码将在Canvas上绘制一个图像：

	const canvas = document.getElementById('myCanvas');

	const ctx = canvas.getContext('2d');

	const image = new Image();

	image.src = 'image.jpg';

	 image.onload = function() {

	  ctx.drawImage(image, 0, 0);

	}

在上述示例中，我们创建了一个 <img> 元素，并将其赋值给 image 变量。然后，使用 drawImage() 函数将图像绘制到Canvas上，坐标为(0, 0)。

6. 渐变和阴影

渐变和阴影是Canvas中常用的效果，可以通过Canvas的API来实现。

渐变（Gradient）：渐变可以用来创建平滑的过渡效果，可以是线性渐变或径向渐变。
- 线性渐变（Linear Gradient）：使用 createLinearGradient() 方法创建线性渐变对象，指定起始点和结束点的坐标，然后使用 addColorStop() 方法指定渐变的颜色和位置。示例代码：

	const canvas = document.getElementById('myCanvas');

	     const ctx = canvas.getContext('2d');

	      const gradient = ctx.createLinearGradient(0, 0, 200, 0);

	     gradient.addColorStop(0, 'red');

	     gradient.addColorStop(1, 'blue');

	      ctx.fillStyle = gradient;

	     ctx.fillRect(0, 0, 200, 200);

径向渐变（Radial Gradient）：使用 createRadialGradient() 方法创建径向渐变对象，指定内圆和外圆的坐标和半径，然后使用 addColorStop() 方法指定渐变的颜色和位置。示例代码：

	const canvas = document.getElementById('myCanvas');

	     const ctx = canvas.getContext('2d');

	      const gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);

	     gradient.addColorStop(0, 'red');

	     gradient.addColorStop(1, 'blue');

	      ctx.fillStyle = gradient;

	     ctx.fillRect(0, 0, 200, 200);

阴影（Shadow）：阴影效果可以通过设置Canvas的阴影属性来实现。使用 shadowColor 指定阴影的颜色， shadowOffsetX 和 shadowOffsetY 指定阴影的偏移量， shadowBlur 指定阴影的模糊程度。示例代码：

const canvas = document.getElementById('myCanvas');

   const ctx = canvas.getContext('2d');

    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

   ctx.shadowOffsetX = 5;

   ctx.shadowOffsetY = 5;

   ctx.shadowBlur = 10;

    ctx.fillStyle = 'red';

   ctx.fillRect(50, 50, 100, 100);

7. 动画效果

动画效果在Canvas中可以通过多种方式实现，以下是几种常见的动画效果：

基于帧的动画（Frame-based Animation）：基于帧的动画是通过在Canvas上连续绘制不同的帧来创建动画效果。可以使用 requestAnimationFrame() 方法来实现帧动画，该方法会在浏览器每次重新绘制页面时调用指定的回调函数。示例代码：

	const canvas = document.getElementById('myCanvas');

	   const ctx = canvas.getContext('2d');

	   let x = 0;

	    function animate() {

	     ctx.clearRect(0, 0, canvas.width, canvas.height);

	     ctx.fillRect(x, 50, 50, 50);

	     x += 1;

	     if (x > canvas.width) {

	       x = 0;

	     }

	     requestAnimationFrame(animate);

	   }

	    animate();

在上述示例中，我们使用 requestAnimationFrame() 方法循环调用 animate() 函数，每次调用时清除Canvas并绘制一个矩形，并将矩形的x坐标递增，实现了一个矩形在Canvas上移动的动画效果。 2. 通过改变属性值的动画（Property-based Animation）：除了基于帧的动画外，还可以通过改变属性值来实现动画效果。可以使用 setInterval() 或 setTimeout() 方法来定时改变属性值，并在每次改变后重新绘制Canvas，从而创建动画效果。示例代码：

	const canvas = document.getElementById('myCanvas');

	   const ctx = canvas.getContext('2d');

	   let x = 0;

	    function animate() {

	     ctx.clearRect(0, 0, canvas.width, canvas.height);

	     ctx.fillRect(x, 50, 50, 50);

	     x += 1;

	     if (x > canvas.width) {

	       clearInterval(animation);

	     }

	   }

	    const animation = setInterval(animate, 10);

在上述示例中，我们使用 setInterval() 方法每隔一段时间调用一次 animate() 函数，每次调用时清除Canvas并绘制一个矩形，并将矩形的x坐标递增，直到达到指定的条件后清除定时器，停止动画效果。 3. 使用第三方库：除了原生的Canvas API外，还可以使用一些第三方库来简化动画效果的创建，如GreenSock Animation Platform (GSAP)、Anime.js等。这些库提供了更多的动画效果和控制选项，可以帮助开发者更方便地创建复杂的动画效果。

本文转载于:

https://juejin.cn/post/7259558728059158588

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。