使用canvas实现一个loading的效果

王铁柱666

于 2024-10-31 07:36:08 发布

阅读量323

点赞数 10

文章标签：前端

本文链接：https://blog.youkuaiyun.com/2401_87873725/article/details/143379379

版权

在前端开发中，使用HTML5的<canvas>元素可以实现各种动态效果，包括loading动画。以下是一个简单的示例，展示如何使用canvas创建一个基本的loading动画：

HTML结构：

首先，在HTML文件中添加一个<canvas>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Animation with Canvas</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="loadingCanvas" width="200" height="200"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码：

然后，在script.js文件中添加JavaScript代码来控制canvas并创建动画。

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

let angle = 0;
const speed = 0.02;
const radius = 70;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

function drawCircle() {
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 10;
    ctx.stroke();
}

function drawLoadingAnimation() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的绘制
    drawCircle(); // 绘制外圈

    // 绘制加载部分
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, -Math.PI / 2, angle - Math.PI / 2);
    ctx.strokeStyle = '#f00'; // 你可以改变这个颜色来匹配你的设计
    ctx.lineWidth = 10;
    ctx.lineCap = 'round'; // 使线条的端点更加圆润
    ctx.stroke();

    // 更新角度以实现动画效果
    angle += speed;
    if (angle > Math.PI * 2) {
        angle = 0; // 如果动画完成一圈，则重置角度以循环播放
    }
    requestAnimationFrame(drawLoadingAnimation); // 使用requestAnimationFrame来循环调用此函数并创建动画效果
}

drawLoadingAnimation(); // 开始动画

这段代码首先定义了一个canvas元素和相关的绘制上下文。然后，它定义了一个函数来绘制一个完整的圆（作为loading动画的外圈），以及另一个函数来绘制加载部分的动画。通过使用requestAnimationFrame函数循环调用drawLoadingAnimation函数，可以创建一个平滑的动画效果。你可以根据需要调整颜色、速度、半径等参数来定制这个loading动画的外观和行为。