HTML5的Canvas实现小圆点在屏幕内跑动

最新推荐文章于 2024-06-02 00:26:11 发布

Orange_J

最新推荐文章于 2024-06-02 00:26:11 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/juhaotian/article/details/47423505

这篇博客展示了如何使用HTML5的Canvas元素创建一个动态效果，使得小圆点在屏幕上移动。用户通过点击屏幕可以增加小圆点的数量，提供了一个互动的视觉体验。示例代码可以在HTML文件中直接运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击屏幕可以增加小圆点个数，效果如图：

完整代码如下，复制到HTML文件，打开即可运行。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title id="title">Hover</title>       
        <!-- <link href="css/css.css" rel="stylesheet"> -->
        <style>
            /*@import url(http://fonts.googleapis.com/css?family=Righteous);*/
            body {
              width: 100%;
              margin: 0;
              overflow: hidden;
              cursor: move;
              background: black;
              height: 100%;
            }