HTML5 canvas创建动态蓝天白云背景动画

悦闻闻

于 2024-08-29 09:08:44 发布

阅读量1k

点赞数 30

本文链接：https://blog.csdn.net/weixin_34725745/article/details/141714887

版权

本文还有配套的精品资源，点击获取

简介：HTML5的canvas元素是网页动态图形绘制的关键工具，它支持像素级图像处理和丰富的交互式图形。通过该元素，开发者能够使用JavaScript创建动态图像，如飘动的白云。本文将深入讲解如何使用canvas元素和JavaScript实现一个蓝天上漂浮的白云背景动画效果，包括获取canvas元素、设置绘图颜色、构建和填充路径，以及利用 requestAnimationFrame 进行动画制作。本项目不仅提升了用户体验，还展示了canvas绘图的基础知识。

1. HTML5 canvas元素介绍

随着HTML5的普及， <canvas> 元素已经成为网页上绘制图形的标准方式之一。它提供了一个平面区域，可以通过JavaScript中的Canvas API进行绘制。 <canvas> 元素不仅可以用于绘制图形，还可以用于构建交互式的图表、游戏甚至是动画。它的出现，使得开发者无需依赖插件就能实现在网页上进行复杂的图形操作。

1.1 canvas的基本概念

<canvas> 元素通过JavaScript访问一个名为 CanvasRenderingContext2D 的对象，该对象提供了大量用于绘图的方法和属性。要开始绘制，首先需要在HTML文档中声明一个 <canvas> 标签，然后在JavaScript中通过 getContext() 方法获取一个绘制上下文（context），之后就可以使用Canvas API进行绘图操作了。

<!-- HTML中的canvas元素 -->
<canvas id="myCanvas" width="400" height="400"></canvas>

<!-- JavaScript中获取canvas元素并进行绘制 -->
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  // 使用ctx进行绘图操作...
</script>

1.2 canvas与SVG的区别

在选择绘图技术时，经常需要考虑使用 <canvas> 还是SVG。SVG（可缩放矢量图形）使用XML格式描述2D图形，适合需要精确控制图形的场景，因为它可以无限放大缩小而不失真。而 <canvas> 则是一个像素绘图的解决方案，适合复杂的脚本动画和游戏。 <canvas> 适合动态绘制，但一旦画布上的内容绘制完成，就无法与它进行交互。

选择哪种技术，取决于你的具体需求和预期的效果。通过合理选择，可以让页面渲染更加高效，同时为用户提供更丰富的视觉体验。

2. JavaScript绘图基础

2.1 canvas绘图基础

2.1.1 canvas基本概念

在网页中， <canvas> 是一个可以使用JavaScript中的脚本来绘制图形的HTML元素。它可以用来进行位图渲染，支持复杂的动画和游戏图形。它最初由苹果公司为了OS X系统的Dashboard开发而提出，后来被各大主流浏览器支持。

要使用canvas，你需要在HTML中定义一个 <canvas> 标签，并通过JavaScript访问这个元素的绘图上下文（ getContext('2d') ）。通过这个上下文，可以绘制图形、文本、图像等各种类型的视觉效果。

2.1.2 canvas与SVG的区别

canvas和SVG是网页上常用的两种图形处理方式，它们之间存在一些关键的区别：

Canvas ：是一种位图技术，提供了一个可以绘制的像素网格。它非常适合处理复杂动画和大量动态生成图形，因为它的渲染性能通常比SVG要好。一旦图形绘制完成，canvas便不再保留任何关于它的绘制信息，例如形状、位置等。
SVG ：是一种基于XML的矢量图形格式，它允许用一组绘图命令来描述图像内容。SVG的优势在于它的可交互性和可缩放性，同时因为保留了图形的结构信息，所以非常容易进行动态编辑和样式改变。

因此，根据具体需求选择合适的技术至关重要，例如简单的图形或需要频繁交互的场景适合使用SVG，而复杂的动画和游戏场景更适合使用canvas。

2.2 JavaScript基础操作

2.2.1 JavaScript变量、函数定义

在JavaScript中，变量是使用 var ， let 或 const 关键字声明的。函数可以使用 function 关键字定义，或者使用箭头函数的形式简写。

// 使用function关键字定义函数
function sum(a, b) {
  return a + b;
}

// 使用箭头函数定义函数
const multiply = (a, b) => a * b;

变量和函数的定义是编写JavaScript绘图逻辑的基础，它们在canvas操作中是不可或缺的。

2.2.2 JavaScript DOM操作基础

Document Object Model（DOM）是HTML文档的编程接口。在JavaScript中，通过DOM可以操作HTML文档，包括获取元素、修改元素的内容、样式等。

// 获取canvas元素
const canvas = document.getElementById('myCanvas');

// 获取canvas的绘图上下文
const ctx = canvas.getContext('2d');

// 修改canvas元素的样式
canvas.style.width = '500px';
canvas.style.height = '300px';

DOM操作允许开发者与HTML元素交互，是进行JavaScript绘图操作的前提条件。

以上就是对JavaScript绘图基础的简介，接下来的章节将深入探讨 fillStyle 和 strokeStyle 属性的使用，它们是控制canvas绘图样式的重要属性。

3. `fillStyle` 和 `strokeStyle` 属性使用

3.1 `fillStyle` 属性深入解析

3.1.1 `fillStyle` 的颜色填充使用

fillStyle 属性在HTML5 canvas元素中用于定义填充图形的颜色、渐变或者图案。它的默认值是黑色，但是在复杂图形设计中，我们往往需要使用不同的填充颜色来增强视觉效果。

通过设置 fillStyle 属性，我们可以用CSS格式的字符串（如十六进制颜色值、RGB、RGBA、HSL、HSLA等）或者CanvasGradient和CanvasPattern对象来指定颜色。当使用字符串时，我们可以通过以下方式设置不同格式的颜色：

// 设置为十六进制颜色
canvas.fillStyle = "#FF5733";

// 设置为RGB颜色
canvas.fillStyle = "rgb(255, 87, 51)";

// 设置为RGBA颜色以增加透明度
canvas.fillStyle = "rgba(255, 87, 51, 0.5)";

需要注意的是， fillStyle 不会影响 strokeStyle 属性的设置。即使我们将 fillStyle 设置为某种颜色，绘制的图形轮廓颜色仍然需要单独设置。

3.1.2 `fillStyle` 的渐变填充应用

渐变是图形设计中常用的视觉效果，能够为静态图形增加动态感和立体感。在canvas中，渐变可以通过 CanvasGradient 对象来实现。使用 fillStyle 属性，我们可以将渐变对象应用到图形的填充上。

创建 CanvasGradient 有两种方式： createLinearGradient 和 createRadialGradient ，分别用于创建线性渐变和径向渐变。

// 创建线性渐变对象
const linearGradient = canvas.getContext('2d').createLinearGradient(0, 0, 100, 100);

// 添加颜色停靠点
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(1, 'blue');

// 应用渐变填充
canvas.fillStyle = linearGradient;

在上面的代码示例中，我们首先创建了一个从左上角(0, 0)到右下角(100, 100)的线性渐变对象，然后添加了两个颜色停靠点，使得渐变从红色过渡到蓝色。最后，我们将这个渐变对象赋值给 fillStyle ，用于填充图形。

渐变在动画和图形设计中是一个非常重要的特性，通过不同颜色的组合和过渡，可以创造出丰富的视觉效果。

3.2 `strokeStyle` 属性深入解析

3.2.1 `strokeStyle` 的颜色边框绘制

strokeStyle 属性用于定义图形边框的颜色，其用法和 fillStyle 类似，可以是CSS格式的字符串或者CanvasGradient对象。

默认情况下， strokeStyle 属性为黑色，但是通过设置它，我们可以自定义图形边框的颜色，达到设计上的需求。

// 设置边框颜色为灰色
canvas.strokeStyle = "#808080";

// 绘制边框
canvas.stroke();

通过设置 strokeStyle ，我们可以很容易地改变边框颜色，增强图形元素的区分度，或者创造出符合视觉效果的图形。

3.2.2 `strokeStyle` 与路径的关系处理

strokeStyle 属性不仅仅是设置颜色那么简单，它还与canvas中的路径绘制紧密相关。在绘图过程中，路径通过调用 moveTo 和 lineTo 等方法来定义，而 strokeStyle 则用于定义这些路径的边框颜色。

当路径创建完成后，通过调用 stroke 方法，可以将路径的边框绘制到canvas上。 strokeStyle 定义的颜色会被应用到绘制的边框上。

// 定义一个矩形路径
canvas.rect(10, 10, 100, 50);

// 设置边框颜色为黄色
canvas.strokeStyle = "yellow";

// 描绘路径边框
canvas.stroke();

在这个例子中，我们首先定义了一个矩形路径，然后设置了边框颜色为黄色，并通过 stroke 方法完成了矩形边框的绘制。 strokeStyle 属性的设置使得矩形边框呈现出黄色，如果我们没有设置 strokeStyle ，则边框默认为黑色。

路径和 strokeStyle 的关系处理是创建复杂图形边框的关键。通过合理的设置和路径的构建，可以实现复杂多变的视觉效果。

4. `CanvasRenderingContext2D` 对象操作

4.1 `CanvasRenderingContext2D` 属性介绍

4.1.1 `lineWidth` 、 `lineCap` 、 `lineJoin` 属性使用

CanvasRenderingContext2D 是canvas元素的2D渲染上下文，提供了多种绘图属性和方法来绘制图形和文本。其中， lineWidth 、 lineCap 、 lineJoin 是用于定义线条样式的关键属性。理解这些属性的使用对绘图效果的把控至关重要。

lineWidth 属性设置线条的宽度。其值必须为正数，其默认值为1.0。在绘制直线或曲线时，指定的线宽将贯穿整个绘制路径。例如， ctx.lineWidth = 5; 会将线条宽度设置为5像素。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(100, 20);
ctx.stroke();

上面的代码会绘制一条从(20,20)到(100,20)的直线，线宽为5像素。

lineCap 属性定义了开放路径时线条的端点样式。它接受三个可能的值： butt 、 round 和 square 。 butt 是默认值，意味着线条是直的，直接在路径的末端结束。 round 则会添加一个半径与线条宽度相同的半圆形。 square 会添加一个等于线条宽度一半的正方形。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const lineCaps = ['butt', 'round', 'square'];
lineCaps.forEach(function(lineCap, index) {
    ctx.lineCap = lineCap;
    ctx.beginPath();
    ctx.moveTo(50 + index * 60, 50);
    ctx.lineTo(50 + index * 60, 150);
    ctx.stroke();
});

以上代码会连续绘制三条线段，每条线段的端点样式依次为 butt 、 round 和 square 。

lineJoin 属性控制两条线段连接处的样式。它可取三个值： miter （尖角，默认）、 round （圆角）、 bevel （斜角）。 miter 样式会使得线条在连接处外扩形成尖角，外扩程度由 miterLimit 属性控制。 round 和 bevel 则分别创建圆角和斜角连接。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const lineJoins = ['miter', 'round', 'bevel'];
lineJoins.forEach(function(lineJoin, index) {
    ctx.lineJoin = lineJoin;
    ctx.beginPath();
    ctx.moveTo(50, 150 - index * 20);
    ctx.lineTo(70, 180 - index * 20);
    ctx.lineTo(90, 150 - index * 20);
    ctx.stroke();
});

这段代码将绘制三条线段，它们的交点使用了不同的 lineJoin 样式。

理解这些属性并熟练运用它们，可以为我们的绘图增加更多的视觉效果和艺术感，让我们的作品更加生动和有趣。

5. 实现蓝天上漂浮的白云背景动画效果

在本章中，我们将通过HTML5的canvas元素来实现一个逼真的动态天空背景，其中包含漂浮的白云效果。该动画不仅会增加页面的美观度，而且在用户体验方面能够提供一种平静和放松的感觉。我们将分解实现该动画的每个步骤，包括绘制白云形状、实现动画循环以及增加云朵移动逻辑和变化效果。

5.1 白云形状的路径绘制

为了绘制逼真的云朵，我们可以使用canvas中的 arc() 方法来绘制云朵的轮廓。 arc() 方法可以绘制一个圆弧路径，这对于基本的云朵形状来说已经足够。

5.1.1 `arc()` 方法绘制云朵轮廓

首先，我们定义一个函数来绘制一个简单的云朵形状。我们可以创建一个圆形路径作为云朵的基本形状。

function drawCloud(ctx, x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = "#fff"; // 设置填充颜色为白色
    ctx.fill(); // 填充路径
}

在上述代码中， x 和 y 代表云朵中心的坐标， radius 代表云朵的半径。我们使用 .beginPath() 来开始一个新的路径， arc() 来绘制圆形路径，并使用 fill() 来填充路径。

5.1.2 结合路径操作创建云朵形状

实际的云朵形状比标准的圆形更复杂。通过使用多个 arc() 方法，或者使用路径的 moveTo() 方法来移动路径起点，可以创造出不规则的云朵形状。

function drawComplexCloud(ctx, points, radius) {
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);

    for (let i = 1; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
    }

    // 形成一个闭合的路径
    ctx.lineTo(points[0].x, points[0].y);

    // 绘制路径上的云朵
    ctx.arc(points[0].x, points[0].y, radius, 0, Math.PI * 2, true);

    ctx.closePath();
    ctx.fillStyle = "rgba(255, 255, 255, 0.7)"; // 半透明的白色
    ctx.fill();
}

在这个函数中，我们使用一个点数组 points 来定义云朵边缘的路径。使用 moveTo() 来移动到起始点，然后使用 lineTo() 来绘制多条线段形成云朵的轮廓，最后使用 arc() 来绘制边缘的圆弧部分。

5.2 动画效果实现与 `requestAnimationFrame` 使用

创建完云朵形状后，我们希望它们在背景中动态地漂浮。为此，我们将使用 requestAnimationFrame 方法来实现平滑的动画循环。

5.2.1 `requestAnimationFrame` 动画循环原理

requestAnimationFrame 方法用于请求浏览器在下一次重绘之前执行指定的代码，这有助于实现更加平滑和高性能的动画。

let lastTime = 0;
function animate(time) {
    const deltaTime = time - lastTime;
    lastTime = time;

    // 更新画面和渲染新的帧
    update(deltaTime);
    render();

    requestAnimationFrame(animate);
}

// 开始动画循环
requestAnimationFrame(animate);

在 animate 函数中，我们计算了 deltaTime ，即本次帧与上次帧的时间间隔。然后我们调用 update 函数来更新动画的状态，接着调用 render 函数来渲染新的画面，并通过递归调用 requestAnimationFrame 来继续动画循环。

5.2.2 结合 `requestAnimationFrame` 实现动画效果

为了实现云朵在背景中移动的效果，我们需要更新每个云朵的位置，并在每一帧重新绘制它们。

const clouds = []; // 存储所有云朵的位置和速度信息

function update(deltaTime) {
    // 更新云朵位置
    for (let cloud of clouds) {
        cloud.x -= cloud.speed * deltaTime;
        if (cloud.x < 0) {
            cloud.x = canvas.width;
        }
    }
}

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

    // 绘制所有云朵
    for (let cloud of clouds) {
        drawComplexCloud(ctx, cloud.points, cloud.radius);
    }
}

在 update 函数中，我们更新了云朵的位置，并在 render 函数中重新绘制了云朵，通过检测位置来实现云朵的循环移动。

5.3 云朵移动逻辑实现

为了使云朵看起来更加自然，我们需要添加一些逻辑来模拟云朵在风中飘动的效果。

5.3.1 移动云朵的基本逻辑编写

移动逻辑可以通过在每个云朵上添加一个随机的速度向量来实现。这样，每个云朵将具有不同的移动速度和方向，增加了动态效果。

function createCloud() {
    const x = Math.random() * canvas.width; // 随机起始位置
    const y = Math.random() * (canvas.height - 100) + 50; // 避免云朵出现在地平线以下
    const speed = (Math.random() * 2) + 0.5; // 速度范围

    // 随机生成几个点来构造云朵形状
    let points = [];
    for (let i = 0; i < 8; i++) {
        points.push({
            x: x + Math.random() * 100 - 50,
            y: y + Math.random() * 50 - 25
        });
    }

    return {
        x, y, speed, radius: Math.random() * 20 + 10, points
    };
}

// 创建一组云朵
for (let i = 0; i < 5; i++) {
    clouds.push(createCloud());
}

5.3.2 实现云朵在画面中随风飘动的效果

为了增加更自然的飘动效果，我们可以在更新云朵位置时加入随机的侧移。

function update(deltaTime) {
    for (let cloud of clouds) {
        cloud.x -= cloud.speed * deltaTime;
        cloud.y -= cloud.speed * 0.5 * deltaTime + Math.random() - 0.5 * deltaTime;
        if (cloud.x < 0) {
            cloud.x = canvas.width;
        }
    }
}

在上述代码中，我们在更新 cloud.y 时添加了一个随机的偏移量，模拟了随风飘动的效果。

5.4 云朵大小、形状、透明度变化增加真实感

为了让云朵更具有逼真感，我们可以动态改变它们的大小、形状和透明度，以模拟云朵在风中的变化。

5.4.1 实现云朵大小变化的策略

我们可以在每一帧中根据需要随机改变云朵的半径，或者根据云朵的位置调整其大小。

function updateCloud(cloud) {
    cloud.radius += (Math.random() - 0.5) * 0.2; // 随机改变半径
    cloud.radius = Math.min(Math.max(cloud.radius, 10), 30); // 限制半径的范围
}

5.4.2 实现云朵形状和透明度动态变化的方法

为了模拟云朵形状的变化，我们可以在绘制时改变每个点的位置，根据云朵的位置调整透明度。

function drawComplexCloud(ctx, cloud, alpha = 1) {
    ctx.globalAlpha = alpha; // 设置透明度
    ctx.beginPath();
    ctx.moveTo(cloud.points[0].x, cloud.points[0].y);

    for (let i = 1; i < cloud.points.length; i++) {
        ctx.lineTo(cloud.points[i].x + Math.random() * 5 - 2.5, cloud.points[i].y + Math.random() * 5 - 2.5);
    }

    ctx.lineTo(cloud.points[0].x, cloud.points[0].y);
    ctx.arc(cloud.points[0].x, cloud.points[0].y, cloud.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = "rgba(255, 255, 255, " + alpha + ")"; // 半透明的白色
    ctx.fill();
}

在 drawComplexCloud 函数中，我们在绘制路径时给每个点添加了一个小的随机偏移，并且通过 globalAlpha 和 rgba 函数调整了透明度，使其随着云朵的位置和大小的变化而动态调整。

通过结合以上各章节的知识点，我们已经能够创建出一个具有逼真效果的动态白云背景动画。这些动画不仅为用户带来视觉上的享受，而且在技术上也展示出了canvas绘图的强大功能和灵活性。

本文还有配套的精品资源，点击获取