当前位置： 首页 > article >正文

3_使用 HTML5 Canvas API (2) --[HTML5 API 学习之旅]

article 2025/1/16 14:49:59

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 方法绘制一个与画布大小相等的矩形，从而将图案作为背景应用到整个画布上。

http://www.kler.cn/a/442612.html

相关文章：

  • TCP-IP详解卷 TCP的超时与重传
  • C++并发编程之std::partial_sum的并行版本
  • excel 整理表格，分割一列变成多列数据
  • FLASK 上传文件
  • 接口测试Day09-数据库工具类封装
  • Kafka——两种集群搭建详解 k8s
  • Qt之自定义标题栏拓展（十）
  • Tree-of-Counterfactual Prompting for Zero-Shot Stance Detection
  • spring使用rabbitmq当rabbitmq集群节点挂掉 spring rabbitmq怎么保证高可用，rabbitmq网络怎么重新连接
  • 使用Python打造高效的PDF文件管理应用（合并以及分割）
  • Spring Boot 集成 Elasticsearch怎样在不启动es的情况下正常启动服务
  • 【21天学习AI底层概念】day5 机器学习的三大类型不能解决哪些问题？
  • 秒杀抢购场景下实战JVM级别锁与分布式锁
  • 四、网络层：数据平面，《计算机网络（自顶向下方法 第7版，James F.Kurose，Keith W.Ross）》
  • WPF 使用LibVLCSharp.WPF实现视频播放、停止、暂停功能
  • 【排序算法】——插入排序
  • .Net Core注册一个定制任务执行类服务
  • 首屏加载慢问题
  • 备战秋招：2024游戏开发入行与跳槽面试详解
  • 智能移动交通执法方案：易泊车牌识别相机助力精准执法与数据驱动管理
  • HCIA-Access V2.5_3_3_2_VLAN路由配置与实现
  • 机器学习之偏差
  • Shadcn UI 实战：打造可维护的企业级组件库
  • 简单配置，全面保护：HZERO审计服务让安全触手可及
  • 2412d,d的8月会议
  • Unity超优质动态天气插件(含一年四季各种天气变化，可用于单机局域网VR)