成都建设公司网站,百度seo新规则,网络专业毕业设计,海南创想✨博主#xff1a;命运之光 #x1f338;专栏#xff1a;Python星辰秘典 #x1f433;专栏#xff1a;web开发#xff08;简单好用又好看#xff09; ❤️专栏#xff1a;Java经典程序设计 ☀️博主的其他文章#xff1a;点击进入博主的主页 前言#xff1a;欢迎踏入… ✨博主命运之光 专栏Python星辰秘典 专栏web开发简单好用又好看 ❤️专栏Java经典程序设计 ☀️博主的其他文章点击进入博主的主页 前言欢迎踏入我的Web项目专栏一段神奇而令人陶醉的数字世界 在这里我将带您穿越时空揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力我创造了一系列令人惊叹的Web项目它们仿佛是从梦境中涌现而出。 在这个专栏中您将遇到华丽的界面如流星划过夜空般迷人您将感受到动态的交互如魔法般让您沉浸其中您将探索响应式设计的玄妙让您的屏幕变幻出不同的绚丽景象。 无论您是一个探险家还是一位嗜血的代码巫师这个专栏将成为您的魔法书。我将分享每个项目的秘密解开编码的谜题让您也能够拥有制作奇迹的力量。 准备好了吗拿起您的键盘跟随我的指引一起进入这个神秘而充满惊喜的数字王国。在这里您将找到灵感的源泉为自己创造出一段奇幻的Web之旅 目录
介绍
动态图展示
静态图展示
图片1 图片2
实现思路
完整代码
代码的使用方法超简单什么都不用下载
1.打开记事本
2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
3.打开html文件大功告成(●◡●)
结语 介绍
在本篇技术博客中我们将介绍一个有趣的创意动态画布它会在页面上绘制出缤纷的移动涂鸦。我们使用 HTML5 的 Canvas 元素和 JavaScript 来实现这个动态效果。每次页面加载时涂鸦的起点位置和颜色都将随机生成让每次绘制都成为一个独特的艺术创作。 动态图展示 静态图展示
图片1 图片2 实现思路 首先我们需要一个用于绘制动画的 Canvas 元素。我们将设置 CSS 样式使 Canvas 铺满整个页面并添加背景图片作为画布的底色。 接下来在 JavaScript 中我们获取 Canvas 元素和 2D 上下文以便后续绘制。 我们定义一个方框的大小并根据页面的宽高计算出在 x 和 y 轴上的方框数量。 为了绘制移动涂鸦我们使用一个包含颜色信息的对象以记录每个位置的颜色。 实现一个函数来随机生成颜色我们将使用这个颜色来绘制方框。 编写绘制方框的函数该函数接受位置和颜色作为参数用于在 Canvas 上绘制方框。 创建一个更新画布的函数。在该函数中我们首先绘制之前记录的位置的颜色信息然后随机生成一个颜色并绘制当前位置的方框并将位置和颜色信息记录到颜色对象中。接下来我们随机生成方框的速度并移动方框。最后我们进行边界检测以确保方框不会超出 Canvas 的范围。然后使用 requestAnimationFrame() 函数来循环调用更新函数实现动画效果。 最后在页面加载时启动动画并随机设置方框的初始位置。 完整代码
!DOCTYPE html
html
headtitleColorful Moving Doodle/titlestyle/* 设置整个页面铺满屏幕 */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
bodycanvas idcanvas/canvasscript// 获取 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文件大功告成(●◡●) 结语 本章的内容就到这里了觉得对你有帮助的话就支持一下博主把~ 点击下方个人名片交流会更方便哦~ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
