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

❤️创意网页：创意动态画布~缤纷移动涂鸦~图片彩色打码

news 2026/5/26 11:33:54

✨博主：命运之光 

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

目录

介绍

动态图展示

静态图展示

图片1

 图片2

实现思路

完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

介绍

在本篇技术博客中，我们将介绍一个有趣的创意动态画布，它会在页面上绘制出缤纷的移动涂鸦。我们使用 HTML5 的 Canvas 元素和 JavaScript 来实现这个动态效果。每次页面加载时，涂鸦的起点位置和颜色都将随机生成，让每次绘制都成为一个独特的艺术创作。

动态图展示

静态图展示

图片1

 图片2

实现思路

  1. 首先，我们需要一个用于绘制动画的 Canvas 元素。我们将设置 CSS 样式，使 Canvas 铺满整个页面，并添加背景图片作为画布的底色。

  2. 接下来，在 JavaScript 中，我们获取 Canvas 元素和 2D 上下文，以便后续绘制。

  3. 我们定义一个方框的大小，并根据页面的宽高计算出在 x 和 y 轴上的方框数量。

  4. 为了绘制移动涂鸦，我们使用一个包含颜色信息的对象，以记录每个位置的颜色。

  5. 实现一个函数来随机生成颜色，我们将使用这个颜色来绘制方框。

  6. 编写绘制方框的函数，该函数接受位置和颜色作为参数，用于在 Canvas 上绘制方框。

  7. 创建一个更新画布的函数。在该函数中，我们首先绘制之前记录的位置的颜色信息，然后随机生成一个颜色并绘制当前位置的方框，并将位置和颜色信息记录到颜色对象中。接下来，我们随机生成方框的速度并移动方框。最后，我们进行边界检测，以确保方框不会超出 Canvas 的范围。然后使用 requestAnimationFrame() 函数来循环调用更新函数，实现动画效果。

  8. 最后，在页面加载时启动动画，并随机设置方框的初始位置。

完整代码

<!DOCTYPE html>
<html>
<head><title>Colorful Moving Doodle</title><style>/* 设置整个页面铺满屏幕 */html, body {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;}/* 将 Canvas 铺满整个页面 */#canvas {display: block;width: 100%;height: 100%;border: 1px solid black;image-rendering: pixelated; /* 确保画布保持像素大小，防止插值处理 *//* 添加背景图片设置 */background-image: url('background-image.jpg');background-size: cover; /* 调整背景图片大小以覆盖整个画布 */}</style>
</head>
<body><canvas id="canvas"></canvas><script>// 获取 Canvas 元素和 2D 上下文const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 设置方框的大小和初始位置const boxSize = 5; // 缩小方块的大小const numBoxesX = Math.ceil(canvas.width / boxSize);const numBoxesY = Math.ceil(canvas.height / boxSize);// 存储每个位置的颜色信息const colors = {};// 随机生成颜色function getRandomColor() {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}// 绘制方框的函数function drawBox(x, y, color) {ctx.fillStyle = color;ctx.fillRect(x * boxSize, y * boxSize, boxSize, boxSize);}// 更新方框位置和绘制涂鸦function update() {// 绘制之前记录的位置颜色信息for (const key in colors) {if (colors.hasOwnProperty(key)) {const [x, y] = key.split('_').map(Number);drawBox(x, y, colors[key]);}}// 随机生成一个颜色const color = getRandomColor();// 绘制方框并记录位置颜色信息drawBox(boxX, boxY, color);colors[`${boxX}_${boxY}`] = color;// 移动方框const velocityX = Math.floor(Math.random() * 3) - 1; // 随机生成速度const velocityY = Math.floor(Math.random() * 3) - 1;boxX += velocityX;boxY += velocityY;// 边界检测if (boxX < 0) {boxX = numBoxesX - 1;} else if (boxX >= numBoxesX) {boxX = 0;}if (boxY < 0) {boxY = numBoxesY - 1;} else if (boxY >= numBoxesY) {boxY = 0;}requestAnimationFrame(update);}// 启动动画let boxX = Math.floor(Math.random() * numBoxesX);let boxY = Math.floor(Math.random() * numBoxesY);update();</script>
</body>
</html>

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

 

相关文章：

❤️创意网页：创意动态画布~缤纷移动涂鸦~图片彩色打码

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;Python星辰秘典 &#x1f433;专栏&#xff1a;web开发&#xff08;简单好用又好看&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主页 前言&#xff1a;欢迎踏入…...

编程日记 2023/7/30 2:09:36

数值分析第六章节 用Python实现解线性方程组的迭代法

参考书籍&#xff1a;数值分析 第五版 李庆杨 王能超 易大义编 第5章 解线性方程组的迭代法 文章声明&#xff1a;如有发现错误&#xff0c;欢迎批评指正 文章目录 迭代法的基本概念雅可比迭代法与高斯-塞格尔迭代法雅可比迭代法高斯-塞格尔迭代法 迭代法的基本概念 6.1.1引言…...

编程日记 2023/7/30 2:08:35

【低代码专题方案】使用iPaaS平台下发数据，快捷集成MDM类型系统

01 场景背景 伴随着企业信息化建设日趋完善化、体系化&#xff0c;使用的应用系统越来越多&#xff0c;业务发展中沉淀了大量数据。主数据作为数据治理中枢&#xff0c;保存大量标准数据库&#xff0c;如何把庞大的数据下发到各个业务系统成了很棘手的问题。 传统的数据下发方…...

编程日记 2023/7/30 2:07:34

驱动开发 day3 (模块化驱动启动led,蜂鸣器,风扇,震动马达)

模块化驱动启动led,蜂鸣器,风扇,震动马达并加上Makefile 封装模块化驱动&#xff0c;可自由安装卸载驱动&#xff0c;便于驱动更新(附图) 1.安装模块驱动同时初始化各个设备并使能 2.该驱动会自动创建驱动节点. 3.通过c函数程序输入控制各个设备 4.卸载模块驱动 //编译驱动…...

编程日记 2023/7/30 2:06:32

数据结构与算法基础-学习-27-图之最短路径之Dijkstra（迪杰斯特拉）算法

一、最短路径应用案例 例如从北京到上海旅游&#xff0c;有多条路可以到目的地&#xff0c;哪条路线最短&#xff0c;哪条路线最省钱&#xff0c;就是典型的最短路径问题。 二、最短路径问题分类 最短路径问题可以分为两类&#xff0c;第一类为&#xff1a;两点间最短路径。第…...

编程日记 2023/7/30 2:05:31

Windows Server 2012 能使用的playwright版本

由于在harkua_bot里面使用到了playwright&#xff0c;我的服务器又是Windows Server 2012 R2&#xff0c;最新版playwright不支持Windows Server 2012 R2&#xff0c;支持Windows Server 2016以上&#xff0c;所以有了这个需求 https://cdn.npmmirror.com/binaries/playwright…...

编程日记 2023/7/30 2:04:30

css实现溢出变为省略号

单行文本溢出省略 text-overflow&#xff1a;规定当文本溢出时&#xff0c;显示省略符号来代表被修剪的文本 white-space&#xff1a;设置文字在一行显示&#xff0c;不能换行 overflow&#xff1a;文字长度超出限定宽度&#xff0c;则隐藏超出的内容overflow设为hidden&#…...

编程日记 2023/7/30 2:03:28

nginx如何配置两个服务器的连接

nginx 中通过server_name listen的方式配置多个服务器 nginx配置两个站点的windows操作方法&#xff0c;双域名双站点...

编程日记 2023/7/30 2:02:26

Linux环境Arduino IDE中配置ATOM S3

linux选择ubuntu发行版。 硬件设备有多小呢&#xff1a; 功能超级强大。 之前的ROS1和ROS2案例已经全部移植完成并测试结束&#xff08;三轮纯人力校验&#x1f60e;&#xff09;。 官网文档信息非常非常好&#xff1a; https://docs.m5stack.com/zh_CN/quick_start/atoms3…...

编程日记 2023/7/30 2:01:25

【C#】.Net Framework框架下的Authorize权限类

2023年&#xff0c;第31周&#xff0c;第3篇文章。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; 在C#的.NET Framework中&#xff0c;你可以使用Authorize类来处理权限认证。Authorize类位于System.Web.Mvc命名空间中&#xff0c;它提供了…...

编程日记 2023/7/30 2:00:24

C++ list底层实现原理

文章目录 一、list底层实现二、类构成三、构造函数四、迭代器五、获取第一个元素六、获取最后一个元素七、插入元素 一句话&#xff1a;list底层实现一个双向循环链表 一、list底层实现 一个双向循环链表 二、类构成 class list : protected_List_base_list_base.lsit_impl…...

编程日记 2023/7/30 1:59:23

C#实现数字验证码

开发环境&#xff1a;VS2019&#xff0c;.NET Core 3.1&#xff0c;ASP.NET Core API 1、建立一个验证码控制器 新建两个方法Create和Check&#xff0c;Create用于创建验证码&#xff0c;Check用于验证它是否有效。 声明一个静态类变量存放列表&#xff0c;列表中存放包含令…...

编程日记 2023/7/30 1:58:22

Git的常用命令以及使用场景

文章目录 1.前言2.工作区,暂存区,版本库简介3.Git的常用命令4.版本回退5.撤销修改6.删除文件7.总结 1.前言 在学习Git命令之前,需要先了解工作区,暂存区和版本库这三个概念 2.工作区,暂存区,版本库简介 在使用Git进行版本控制时&#xff0c;有三个重要的概念&#xff1a;工作…...

编程日记 2023/7/30 1:57:20

tcp keepalive

tcp keepalive用于检查两者之间的链路是否正常&#xff0c;或防止链路断开。 一旦建立了TCP连接&#xff0c;该连接被定义为有效&#xff0c;直到一方关闭它。一旦连接进入连接状态&#xff0c;它将无限期地保持连接状态。但实际上&#xff0c;这种联系不会无限期地持续下去。如…...

编程日记 2023/7/30 1:56:18

PP-Matting: AI高精度图像前景Matting，让抠图轻而易举

分割和Matting的一个重要区别是：分割返回的是像素分类标签，其结果是整型数据；而Matting返回的是属于前景或背景的概率P，从而在前景与背景交互区域产生渐变的效果，使得抠图更加自然。Matting分割模型训练完成后，对于原始图像每个位置上的像素，都将生成一个表示其前景透明…...

编程日记 2023/7/30 1:55:17

VUE3-01

1.选项式和组合式 选项式API&#xff1a;按照作用组织代码 组合式API&#xff1a;按照功能组织代码 2.<script setup> <template><div class"about"><h1>{{name}}</h1><button click"sayHello">测试</button>…...

编程日记 2023/7/30 1:54:16

分库分表之基于Shardingjdbc+docker+mysql主从架构实现读写分离（二）

说明&#xff1a;如果实现了docker部署mysql并完成主从复制的话再继续&#xff0c;本篇文章主要说明springboot配置实现Shardingjdbc进行读写分离操作。 如果没实现docker部署mysql实现主从架构的话点击我 Shardingjdbc配置介绍&#xff08;版本&#xff1a;5.3.2&#xff09;…...

编程日记 2023/7/30 1:53:10

Python 进阶（四）：日期和时间（time、datetime、calendar 模块）

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 1. time模块1.1 获取当前时间1.2 时间休眠1.3 格式化时间 2. datetime模块2.1 获取当前…...

编程日记 2023/7/30 1:52:08

Transformer背景介绍

目录 Transformer的诞生Transformer的优势Transformer的市场 Transformer的诞生 论文地址 Transformer的优势 Transformer的市场...

编程日记 2023/7/30 1:51:07

深入理解BeanDefinition和Spring Beans

深入理解BeanDefinition和Spring Beans 引言 在Spring框架中&#xff0c;BeanDefinition和Spring Beans是非常重要的概念。BeanDefinition定义了Spring Bean的元数据&#xff0c;而Spring Beans是应用程序中的对象实例。理解BeanDefinition和Spring Beans的概念和使用方法对于…...

编程日记 2023/7/30 1:50:06

隧道裂缝剥落病害AI识别系统

我国现有公路隧道超2.5万座&#xff0c;总里程超2.8万公里&#xff0c;其中运营超过15年的老旧隧道占比达35%。据交通运输部2025年统计&#xff0c;年均因隧道结构病害导致的交通中断超1200次&#xff0c;直接经济损失超45亿元。传统检测模式暴露四大核心痛点&#xff1a;检测周…...

编程新知 2026/5/26 3:44:10

【2026最新】应对Turnitin查重：实测5大英文查降AI宝藏工具，一站式搞定初稿

现在的英文初稿&#xff0c;无论是期刊文章、SCI 还是普通的 Course Essay&#xff0c;基本都需要评估内容的原创度&#xff0c;进行文章 AI 率检测。很多伙伴以为纯手敲就能过&#xff0c;结果一查数据依然不尽如人意。 针对英文内容&#xff0c;咱们必须使用专门的英文检测和…...

编程新知 2026/5/26 2:03:14

我靠这个测试设计方法，把漏测率降低了80%

当“直觉测试”撞上南墙很长一段时间里&#xff0c;我和许多测试同行一样&#xff0c;测试用例的设计主要依靠两样东西&#xff1a;需求文档和“测试直觉”。这种模式在业务逻辑相对简单、迭代速度平缓时还能勉强应付。一旦面对复杂的企业级应用、高频的敏捷迭代&#xff0c;或…...

编程新知 2026/5/26 0:40:30

告别元素变动导致的报错：探索自动化测试脚本的 AI“自愈”能力

前言：一个所有测试人都经历过的噩梦 周三晚上十一点，CI/CD流水线再次亮起红灯。 你打开日志，满屏的NoSuchElementException扑面而来。仔细一看——前端团队在昨天的版本中重构了登录页面的DOM结构，原本的#login-btn变成了#signin-button-v2，30个测试用例因此全军覆没。 …...

编程新知 2026/5/25 23:08:50

为什么鸿蒙 App 最终都会走向状态驱动？

子玥酱 &#xff08;掘金 / 知乎 / CSDN / 简书 同名&#xff09; 大家好&#xff0c;我是 子玥酱&#xff0c;一名长期深耕在一线的前端程序媛 &#x1f469;‍&#x1f4bb;。曾就职于多家知名互联网大厂&#xff0c;目前在某国企负责前端软件研发相关工作&#xff0c;主要聚…...

编程新知 2026/5/25 23:08:49

同步带装配工艺要点与损伤防控策略

一、引言在工业精密传动系统中&#xff0c;盖茨同步带凭借高精度、高效率、无滑差的优势&#xff0c;成为自动化设备、精密机床、输送产线的核心传动部件。多数企业在运维中&#xff0c;普遍将同步带异常磨损、断齿、断带等故障归咎于工况恶劣或产品质量问题&#xff0c;却忽略…...

编程新知 2026/5/25 21:39:52

TV Bro电视浏览器：为智能电视打造的最佳遥控器上网解决方案

TV Bro电视浏览器&#xff1a;为智能电视打造的最佳遥控器上网解决方案 【免费下载链接】tv-bro Simple web browser for android optimized to use with TV remote 项目地址: https://gitcode.com/gh_mirrors/tv/tv-bro 还在为智能电视上网操作不便而烦恼吗&#xff1f…...

编程新知 2026/5/25 21:31:51

MPC Video Renderer终极指南：如何在Windows上实现专业级视频渲染体验

MPC Video Renderer终极指南&#xff1a;如何在Windows上实现专业级视频渲染体验 【免费下载链接】VideoRenderer Внешний видео-рендерер 项目地址: https://gitcode.com/gh_mirrors/vi/VideoRenderer MPC Video Renderer是一款专为Windows平台设计…...

编程新知 2026/5/25 16:12:59

Python到Android的魔法之旅：5步将你的代码变成移动应用

Python到Android的魔法之旅&#xff1a;5步将你的代码变成移动应用 【免费下载链接】python-for-android Turn your Python application into an Android APK 项目地址: https://gitcode.com/gh_mirrors/py/python-for-android 想象一下&#xff0c;你花了几个月时间精心…...

编程新知 2026/5/25 15:39:42

拒绝繁琐 PS：美图秀秀 电脑版在技术博客配图、无畸变裁剪与尺寸标准化中的应用

在日常开发、技术写作或维护 GitHub 开源项目时&#xff0c;技术配图和录屏展示是不可或缺的组成部分。 然而&#xff0c;对于大多数程序员和前端开发者来说&#xff0c;仅仅为了裁剪一个 App Icon 尺寸、给一系列产品图加防伪水印、对系统敏感配置截图进行脱敏打码&#xff0…...

编程新知 2026/5/25 14:00:18