1.填充矩形区域
当然，我将给出两个使用 <canvas> 填充矩形区域的示例。这两个示例将展示如何使用纯色填充和线性渐变填充来绘制矩形。
示例 1: 使用纯色填充矩形
此示例展示了如何使用一种纯色（例如蓝色）来填充一个矩形。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Fill Rectangle Example 1</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>纯色填充矩形示例</h1><canvas id="solidColorRectCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('solidColorRectCanvas');const ctx = canvas.getContext('2d');// 设置填充颜色为蓝色ctx.fillStyle = 'blue';// 绘制并填充矩形 (起点x坐标, 起点y坐标, 宽度, 高度)ctx.fillRect(50, 50, 200, 100);</script>
</body>
</html>
在这个例子中：
fillStyle设置为'blue'来定义矩形的填充颜色。fillRect方法用来绘制并立即以设定的颜色填充一个矩形。矩形的位置由左上角的坐标(50, 50)决定，宽度是200，高度是100。
示例 2: 使用线性渐变填充矩形
这个例子展示了如何创建一个从左到右颜色从红色逐渐变为绿色的线性渐变，并用它来填充矩形。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Fill Rectangle Example 2</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>线性渐变填充矩形示例</h1><canvas id="linearGradientRectCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('linearGradientRectCanvas');const ctx = canvas.getContext('2d');// 创建一个线性渐变对象let gradient = ctx.createLinearGradient(0, 0, 300, 0); // 水平渐变gradient.addColorStop(0, 'red'); // 渐变起始颜色为红色gradient.addColorStop(1, 'green'); // 渐变结束颜色为绿色// 设置矩形的填充样式为刚才创建的渐变ctx.fillStyle = gradient;// 绘制并填充矩形ctx.fillRect(50, 200, 300, 100);</script>
</body>
</html>
在这个例子中：
- 我们通过调用
createLinearGradient方法创建了一个线性渐变对象，该方法接收四个参数，分别是渐变开始点的 x 和 y 坐标，以及结束点的 x 和 y 坐标。本例中的渐变是水平方向的。 - 使用
addColorStop方法添加了两个颜色停止点，定义了渐变的颜色：从左侧的红色 ('red') 到右侧的绿色 ('green')。 - 最后，我们将
fillStyle设置为这个渐变对象，并使用fillRect方法绘制并填充了一个矩形，其位置、宽度和高度与之前相同，但这次它将被我们定义的线性渐变所填充。
你可以根据需要调整这些代码片段，以适应你的具体需求或尝试其他类型的填充效果。
2.绘制曲线
绘制曲线在 <canvas> 中可以通过使用 quadraticCurveTo 方法（二次贝塞尔曲线）或 bezierCurveTo 方法（三次贝塞尔曲线）来实现。下面我将提供两个示例，分别展示如何使用这两种方法来绘制不同类型的曲线。
示例 1: 绘制二次贝塞尔曲线
这个例子展示了如何使用 quadraticCurveTo 方法绘制一条简单的二次贝塞尔曲线。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Quadratic Curve Example</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>二次贝塞尔曲线示例</h1><canvas id="quadraticCurveCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('quadraticCurveCanvas');const ctx = canvas.getContext('2d');// 开始一个新路径ctx.beginPath();// 移动到起始点ctx.moveTo(50, 200);// 创建一条二次贝塞尔曲线 (控制点x坐标, 控制点y坐标, 结束点x坐标, 结束点y坐标)ctx.quadraticCurveTo(300, 50, 550, 200);// 设置线条样式并绘制ctx.strokeStyle = 'blue';ctx.lineWidth = 5;ctx.stroke();// 可选：画出控制点和结束点以辅助理解ctx.fillStyle = 'red';ctx.beginPath();ctx.arc(300, 50, 5, 0, Math.PI * 2); // 控制点ctx.fill();ctx.beginPath();ctx.arc(550, 200, 5, 0, Math.PI * 2); // 结束点ctx.fill();</script>
</body>
</html>
在这个例子中：
moveTo定义了曲线的起点。quadraticCurveTo定义了曲线的形状。它需要三个参数：控制点的位置（本例中的(300, 50)），以及结束点的位置（本例中的(550, 200)）。strokeStyle和lineWidth分别设置了线条的颜色和宽度。- 使用
stroke()来实际绘制这条线。
示例 2: 绘制三次贝塞尔曲线
此示例展示了如何使用 bezierCurveTo 方法绘制一条复杂的三次贝塞尔曲线。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Bezier Curve Example</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>三次贝塞尔曲线示例</h1><canvas id="bezierCurveCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('bezierCurveCanvas');const ctx = canvas.getContext('2d');// 开始一个新路径ctx.beginPath();// 移动到起始点ctx.moveTo(50, 350);// 创建一条三次贝塞尔曲线 (控制点1x坐标, 控制点1y坐标, 控制点2x坐标, 控制点2y坐标, 结束点x坐标, 结束点y坐标)ctx.bezierCurveTo(150, 50, 450, 50, 550, 350);// 设置线条样式并绘制ctx.strokeStyle = 'green';ctx.lineWidth = 5;ctx.stroke();// 可选：画出控制点和结束点以辅助理解ctx.fillStyle = 'red';ctx.beginPath();ctx.arc(150, 50, 5, 0, Math.PI * 2); // 第一控制点ctx.fill();ctx.beginPath();ctx.arc(450, 50, 5, 0, Math.PI * 2); // 第二控制点ctx.fill();ctx.beginPath();ctx.arc(550, 350, 5, 0, Math.PI * 2); // 结束点ctx.fill();</script>
</body>
</html>
在这个例子中：
bezierCurveTo定义了一条三次贝塞尔曲线，它需要六个参数：前两个是第一个控制点的位置（本例中的(150, 50)），接下来两个是第二个控制点的位置（本例中的(450, 50)），最后两个是结束点的位置（本例中的(550, 350)）。- 同样地，
strokeStyle和lineWidth设置了线条的颜色和宽度，并且使用stroke()方法绘制了这条线。
你可以根据你的需求调整这些代码片段，比如改变颜色、线条粗细或者控制点的位置，来创建各种各样的曲线效果。
3.在 canvas 中插入图片
在 <canvas> 元素中插入图片可以通过使用 drawImage 方法来实现。下面我将提供两个示例，展示如何使用这个方法。
示例 1: 插入并显示单张图片
这个例子展示了如何加载一张图片并在 <canvas> 上绘制它。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Insert Image Example</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>在 Canvas 中插入图片示例 1</h1><canvas id="imageCanvas" width="600" height="400"></canvas><script>// 创建一个 Image 对象const img = new Image();// 设置图像的源（可以是本地路径或网络链接）img.src = 'https://img0.baidu.com/it/u=858853239,2979507083&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'; // 替换为你的图片URL// 确保图像加载完毕后才绘制到 canvas 上img.onload = function() {const canvas = document.getElementById('imageCanvas');const ctx = canvas.getContext('2d');// 绘制图像到 canvas (x坐标, y坐标)ctx.drawImage(img, 50, 50);};</script>
</body>
</html>
在这个例子中：
- 我们创建了一个新的
Image对象，并设置了它的src属性以加载图片。 - 使用
onload事件确保图片完全加载之后再绘制到<canvas>上。 drawImage方法用于将图像绘制到指定的位置。
示例 2: 调整和裁剪图片
此示例展示了如何调整图片大小、改变位置以及裁剪图片。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Adjust and Crop Image Example</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>在 Canvas 中调整和裁剪图片示例 2</h1><canvas id="adjustCropImageCanvas" width="600" height="400"></canvas><script>// 创建一个 Image 对象const img = new Image();// 设置图像的源（可以是本地路径或网络链接）img.src = 'https://img0.baidu.com/it/u=858853239,2979507083&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'; // 替换为你的图片URL// 确保图像加载完毕后才绘制到 canvas 上img.onload = function() {const canvas = document.getElementById('adjustCropImageCanvas');const ctx = canvas.getContext('2d');// 定义裁剪区域 (从原图开始裁剪的 x 坐标, y 坐标, 裁剪宽度, 裁剪高度)const sourceX = 30;const sourceY = 30;const sourceWidth = 150;const sourceHeight = 150;// 定义放置到 canvas 的位置及大小 (canvas 上的 x 坐标, y 坐标, 显示宽度, 显示高度)const destX = 50;const destY = 50;const destWidth = 300;const destHeight = 300;// 绘制图像到 canvas 并应用裁剪和缩放ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);};</script>
</body>
</html>
在这个例子中：
drawImage方法被用来指定从原始图片中裁剪出一块特定大小的区域，并将其缩放到不同的尺寸，然后绘制到<canvas>的特定位置。- 参数
(sourceX, sourceY, sourceWidth, sourceHeight)定义了要从原始图片中裁剪的矩形区域。 - 参数
(destX, destY, destWidth, destHeight)定义了该裁剪区域将在<canvas>上的位置以及最终显示的尺寸。
请记得替换 'https://example.com/path/to/image.jpg' 为实际的图片 URL 或相对路径。这些代码片段可以在 HTML 文件中直接运行，或者作为 JavaScript 文件的一部分引入到网页中。
4.渐变
在 <canvas> 中创建渐变效果，你可以使用 CanvasRenderingContext2D 提供的 createLinearGradient 或 createRadialGradient 方法。下面我将给出两个示例，一个用于线性渐变，另一个用于径向渐变。
示例 1: 线性渐变
线性渐变沿着一条直线变化颜色。你可以定义多个颜色停止点来指定渐变的颜色和位置。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Linear Gradient Example</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>Canvas 线性渐变示例</h1><canvas id="linearGradientCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('linearGradientCanvas');const ctx = canvas.getContext('2d');// 创建一个从左到右的线性渐变const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);// 添加颜色停止点gradient.addColorStop(0, 'red'); // 起始颜色为红色gradient.addColorStop(0.5, 'yellow'); // 中间颜色为黄色gradient.addColorStop(1, 'green'); // 结束颜色为绿色// 使用渐变填充矩形ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);</script>
</body>
</html>
在这个例子中：
createLinearGradient(x0, y0, x1, y1)方法创建了一个线性的渐变对象，其中(x0, y0)是渐变的起点，(x1, y1)是终点。addColorStop(offset, color)方法为渐变添加了颜色停止点，offset是一个介于 0 和 1 之间的数字，代表渐变的位置，color则是该位置的颜色。- 最后，我们将渐变设置为
fillStyle并绘制一个填充矩形以显示渐变。
示例 2: 径向渐变
径向渐变是从一个中心点向外扩散的颜色变化。你可以定义内圆和外圆，并且可以在两者之间定义多个颜色停止点。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Radial Gradient Example</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>Canvas 径向渐变示例</h1><canvas id="radialGradientCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('radialGradientCanvas');const ctx = canvas.getContext('2d');// 创建一个径向渐变 (内圆心坐标, 内圆半径, 外圆心坐标, 外圆半径)const gradient = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);// 添加颜色停止点gradient.addColorStop(0, 'blue'); // 内圆颜色为蓝色gradient.addColorStop(0.5, 'cyan'); // 中间颜色为青色gradient.addColorStop(1, 'white'); // 外圆颜色为白色// 使用渐变填充矩形ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);</script>
</body>
</html>
在这个例子中：
createRadialGradient(x0, y0, r0, x1, y1, r1)方法创建了一个径向渐变对象，其中(x0, y0, r0)定义了内圆（渐变开始的地方），而(x1, y1, r1)定义了外圆（渐变结束的地方）。- 其余部分与线性渐变相似，我们使用
addColorStop方法添加颜色停止点，并用渐变作为fillStyle来绘制矩形。
这两个示例展示了如何在 HTML5 的 <canvas> 元素中使用 JavaScript 创建不同的渐变效果。你可以根据需要调整参数，以实现想要的效果。
5.背景图
在 <canvas> 中设置背景图可以通过几种方式实现。一种常见的方式是使用 drawImage 方法将图片绘制到整个画布上，另一种方法是创建一个图案（Pattern）并将其设置为画布的填充样式。下面是两个具体的示例来展示这两种方法。
示例 1: 使用 drawImage 设置背景图
这个例子展示了如何通过加载一张图片并使用 drawImage 方法将其作为背景绘制到整个 <canvas> 上。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Background Image Example 1</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>使用 drawImage 设置背景图示例</h1><canvas id="backgroundImageCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('backgroundImageCanvas');const ctx = canvas.getContext('2d');// 创建一个新的 Image 对象const img = new Image();// 设置图像源（可以是本地路径或网络链接）img.src = '1.png'; // 替换为你的图片URL// 确保图像加载完毕后才绘制到 canvas 上img.onload = function() {// 将图像绘制到整个 canvas 区域ctx.drawImage(img, 0, 0, canvas.width, canvas.height);};</script>
</body>
</html>
在这个例子中：
- 我们创建了一个新的
Image对象，并设置了它的src属性以加载背景图片。 - 使用
onload事件确保图片完全加载之后再绘制到<canvas>上。 drawImage方法用于将图像绘制到指定的位置和大小，覆盖整个画布。
示例 2: 使用图案（Pattern）设置背景图
此示例展示了如何创建一个图案对象，并将其作为画布的填充样式来设置背景图。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Background Pattern Example</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>使用图案设置背景图示例</h1><canvas id="patternBackgroundCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('patternBackgroundCanvas');const ctx = canvas.getContext('2d');// 创建一个新的 Image 对象const img = new Image();// 设置图像源（可以是本地路径或网络链接）img.src = '1.png'; // 替换为你的图片URL// 确保图像加载完毕后才创建图案并应用到 canvas 上img.onload = function() {// 创建一个重复的图案const pattern = ctx.createPattern(img, 'repeat'); // 'repeat' 表示平铺图案// 设置画布的 fillStyle 为图案ctx.fillStyle = pattern;// 绘制一个矩形以应用图案作为背景ctx.fillRect(0, 0, canvas.width, canvas.height);};</script>
</body>
</html>
在这个例子中：
- 我们同样创建了一个新的
Image对象，并设置了它的src属性以加载图案图片。 - 使用
createPattern方法基于该图片创建了一个图案对象，第二个参数'repeat'指定了图案应如何重复：水平、垂直或同时在两个方向上重复。 - 将图案设置为
fillStyle，然后用fillRect方法绘制一个与画布大小相等的矩形，从而将图案作为背景应用到整个画布上。
