canvas简单动画案例（圆圈闪烁渐变动画）

最新推荐文章于 2023-03-18 18:07:41 发布

原创

最新推荐文章于 2023-03-18 18:07:41 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#canvas动画

这篇博客介绍了如何使用canvas创建一个简单的动画效果——圆圈闪烁渐变。通过随机绘制圆圈并利用计时器动态重绘，实现了圆圈的动态变化和移除。代码中包含详细注释。

canvas的第二篇博客，终于开始做动画了，不得不说，canvas是真的强，虽然写起来不是那么顺手，但是实现的东西真的让我很满意。

实现效果：

主要思想：随机画出圆圈，然后利用计时器动态重绘，实现圆圈的变化，动态移除；

代码如下，注释已写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
    // 圆圈