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

用HTML Canvas和JavaScript创建美丽的花朵动画效果

news 2026/4/6 5:58:38

目录

一、程序代码

二、代码原理

三、运行效果

一、程序代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>炫酷花朵</title><style>* {margin: 0;padding: 0;overflow: hidden;background-color: black;}</style>
</head>
<body><!-- 在这里创建一个canvas元素，用于绘制图形 --><canvas id="c"></canvas><!-- 开始JavaScript脚本 --><script>// 获取canvas元素及其上下文var C = document.getElementById("c");var Ctx = C.getContext("2d");// 设置canvas的宽度和高度var Cw = C.width = window.innerWidth,Cx = Cw / 2;var Ch = C.height = window.innerHeight,Cy = Ch / 2;// 创建一个临时canvas元素及其上下文，用于绘制花瓣var c = document.createElement("canvas");var ctx = c.getContext("2d");var cw = c.width = 400,cx = cw / 2;var ch = c.height = 400,cy = ch / 2;// 定义一些绘制花朵所需要的变量var rad = Math.PI / 180;var frames = 0;var stopped = true;var Rx = 150,Ry = 150,kx = 3,ky = 4,x, y, x1, y1, x2, y2, t;var petals = 7;// 设置临时canvas的线条宽度ctx.lineWidth = .25;// 将坐标原点移动到canvas中心，并缩放画布Ctx.translate(Cw / 2, Ch / 2);Ctx.scale(.75, .75);// 定义绘制函数function Draw() {// 更新帧数frames += .3;// 清空整个canvasCtx.clearRect(-Cw, -Ch, 2 * Cw, 2 * Ch);// 计算花朵的路径t = frames * rad;rx = Rx * Math.abs(Math.cos(t)) + 50;ry = Ry * Math.abs(Math.sin(t)) + 50;x = cx + rx * Math.sin(kx * t + Math.PI / 2);y = cy + ry * Math.sin(ky * t + Math.PI / 2);x1 = cx + rx * Math.sin(kx * t + Math.PI);y1 = cy - ry * Math.sin(ky * t + Math.PI);x2 = cx + rx * Math.sin(kx * t);y2 = cy - ry * Math.sin(ky * t);// 绘制花朵的路径曲线ctx.beginPath();ctx.moveTo(x, y);ctx.quadraticCurveTo(x1, y1, x2, y2);ctx.strokeStyle = "hsl(" + (frames % 360) + ", 100%, 50%)";ctx.stroke();ctx.globalCompositeOperation = "lighter";var img = c;// 绘制花瓣for (var i = 0; i < petals; i++) {Ctx.globalCompositeOperation = "source-over";Ctx.drawImage(img, -200, -400);Ctx.rotate(2 * Math.PI / petals);}// 请求下一帧绘制requestId = window.requestAnimationFrame(Draw);}// 开始动画function start() {requestId = window.requestAnimationFrame(Draw);stopped = false;}// 停止动画function stopAnim() {if (requestId) {window.cancelAnimationFrame(requestId);}stopped = true;}// 在页面加载完成后开始动画window.addEventListener("load", function() {start();}, false);// 清空临时canvas并重新开始动画function cleanSlate() {ctx.clearRect(0, 0, cw, ch);stopped = true;start();// 30秒后停止动画window.setTimeout(function() {stopAnim();}, 30000);}// 30秒后停止动画window.setTimeout(function() {stopAnim();}, 30000);// 点击canvas时清空临时canvas并重新开始动画C.addEventListener("click", function() {cleanSlate();}, false);</script>
</body>
</html>

二、代码原理

这段代码使用HTML Canvas和JavaScript实现了一个美丽的花朵动画效果。代码中通过使用canvas元素和其上下文对象来绘制花朵的路径曲线和花瓣。其中，花朵的路径曲线是由数学公式计算得出的，并随着时间的推移而不断变化。花瓣是通过将临时canvas元素中的图形复制多次而生成的，形成了一个完整的花朵。此外，代码中还包含了一些交互功能，如点击canvas来清空临时canvas并重新开始动画。

  • 使用 <!DOCTYPE html> 来定义文档类型为 HTML5。
  • 定义了一个包含头部信息和 body 的 HTML 页面结构。
  • 在 head 中设置页面标题和样式表，其中，样式表中通过 * 选择器来将所有元素的 margin、padding、背景色等属性设置为 0，overflow 设置为 hidden。
  • 在 body 中创建一个 canvas 元素，并设置 id 属性为 c。
  • 在 JavaScript 部分，首先获取 canvas 元素及其上下文，然后设置 canvas 的宽度和高度，并创建一个临时的 canvas 元素及其上下文，用于绘制花瓣。
  • 定义一些绘制花朵所需要的变量，例如旋转角度、花朵路径曲线的参数、花瓣数量等。
  • 将坐标原点移动到 canvas 中心，并缩放画布，然后定义绘制函数 Draw。
  • 在绘制函数中，更新帧数，清空整个 canvas，计算花朵的路径，绘制花朵的路径曲线。
  • 绘制花瓣，并请求下一帧绘制。
  • 定义开始动画函数 start 和停止动画函数 stopAnim。
  • 在页面加载完成后开始动画。
  • 定义清空临时 canvas 并重新开始动画的函数 cleanSlate。
  • 在点击 canvas 时清空临时 canvas 并重新开始动画。
  • 在页面加载后和 30 秒后，分别调用停止动画函数来停止动画。

三、运行效果

相关文章：

用HTML Canvas和JavaScript创建美丽的花朵动画效果

目录 一、程序代码 二、代码原理 三、运行效果 一、程序代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>炫酷花朵</title><style>* {margin: 0;padding: 0;overflow: hidden;bac…...

编程日记 2024/2/20 15:03:20

java----js常用的api

java----js常用的api 时间函数获取当前时间: DateUtil.today()时间偏移字符换时间格式化 map.computeIfAbsent添加list 时间函数 获取当前时间: DateUtil.today() String todayDateUtil.today()String today “2024-02-01”; 时间偏移 往前退役30天 DateUtil.offsetDay(D…...

编程日记 2024/2/20 14:58:14

unity 使用VS Code 开发，VS Code配置注意事项

vscode 对应的插件&#xff08;unity开发&#xff09; 插件&#xff1a;.Net Install Tool,c#,c# Dev Kit,IntelliCode For C# Dev Kit,Unity,Unity Code Snippets 本人现在是用了这些插件 unity需要安装Visual Studio Editor 1、.Net Install Tool 设置 需要在设置里面配置…...

编程日记 2024/2/20 14:50:06

领域驱动设计（Domain Driven Design）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、场景和要求二、领域模型关键词1.领域2.子域3.通用语言4.限界上下文5.领域模型6.实体和值对象7.聚合根8.领域服务9.领域事件 总结 前言 Domain Driven Desi…...

编程日记 2024/2/20 14:49:04

CF778A String Game 题解

文章目录 CF778A String Game 题解题面翻译Input DataOutput DataInput Sample 1Output Sample 1题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示算法&#xff1a;二分代码&#xff1a; CF778A String Game 题解 link 题面翻译 …...

编程日记 2024/2/20 14:43:59

【工具插件类教学】Unity运行时监控变量，属性，事件等的值和调用Runtime Monitoring

目录 一、介绍 二、安装方式 三、入门 1.实例化和静态成员...

编程日记 2024/2/20 14:42:58

实际生产中的一次非典型的基于jmeter的接口自动化实践

实际工作中遇到过一次自动化巡检的需求&#xff0c;作为测试人员没法从源代码入手&#xff0c;加之数据库也不熟悉&#xff0c;故采取接口自动化的方式来实现巡检&#xff0c;算是一种歪门邪道吧&#xff0c;应该不是接口自动化的常规使用方式。jmeter在这里的作用实际上也只是…...

编程日记 2024/2/20 14:33:45

新能源汽车软件开发设计规范

新能源汽车 软件开发设计规范 版本&#xff1a; 1.0 编 制&#xff1a; 校 对&#xff1a; 审 核&#xff1a; 会 签&#xff1a; …...

编程日记 2024/2/20 14:31:42

Linux：grep进阶（11）

Linux&#xff1a;shell脚本&#xff1a;基础使用&#xff08;4&#xff09;《正则表达式-grep工具》_shell grep 全角字符串-CSDN博客https://blog.csdn.net/w14768855/article/details/132338954?ops_request_misc%257B%2522request%255Fid%2522%253A%252217083360171680022…...

编程日记 2024/2/20 14:28:39

【实战】二、Jest难点进阶（一） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（五）

文章目录 一、Jest 前端自动化测试框架基础入门二、Jest难点进阶1.snapshot 快照测试 学习内容来源&#xff1a;Jest入门到TDD/BDD双实战_前端要学的测试课 相对原教程&#xff0c;我在学习开始时&#xff08;2023.08&#xff09;采用的是当前最新版本&#xff1a; 项版本babe…...

编程日记 2024/2/20 14:26:37

8.2 新特性 - 透明的读写分离

文章目录 前言1. 安装部署1.1 下载安装包1.2 MySQL Shell1.3 配置 MySQL 实例1.4 启动 ReplicaSet1.5 启动 8.2 Router 2. 测试路由总结 前言 MySQL 8.0 官方推出过一个高可用方案 ReplicaSet 主要由 Router、MySQL Shell、MySQL Server 三个组件组成。 MySQL Shell 负责管理…...

编程日记 2024/2/20 14:25:36

关于三维GIS开发成长路线的一些思考

三维GIS是将GIS三维化表达&#xff0c;从一个三维GIS开发门外汉的角度来看&#xff0c;三维GIS开发成长路线分几个层面&#xff1a; 第一层面 做三维开发&#xff0c;最基本的Cesium、ThreeJS、MapBox这些要能做到接口级熟悉&#xff0c;熟悉接口是用来干嘛的&#xff0c;接口…...

编程日记 2024/2/20 14:22:33

git操作---＞ 使用git push，和使用git push origin HEAD:[分支名]有什么区别呢？

git push origin HEAD:branch2: 这个命令显式地指定了你要推送的本地引用&#xff08;HEAD&#xff09;&#xff0c;以及远程仓库的目标引用&#xff08;origin/branch2&#xff09;。 HEAD 是一个引用&#xff0c;指向你当前所在的本地分支的最新提交。 这个命令的意图是将当…...

编程日记 2024/2/20 14:21:32

基于Java的大学社团管理平台

功能介绍 平台采用B/S结构&#xff0c;后端采用主流的Springboot框架进行开发&#xff0c;前端采用主流的Vue.js进行开发。 整个平台包括前台和后台两个部分。 前台功能包括&#xff1a;首页、社团详情、申请加入、用户中心模块。后台功能包括&#xff1a;社团管理、分类管理…...

编程日记 2024/2/20 14:18:29

1.函数模板基础

1.1函数模板作用&#xff1a; 建立一个通用函数&#xff0c;其函数返回值类型和形参类型可以不具体指定&#xff0c;用一个虚拟的类型来代表&#xff0c;提高复用性 1.2语法&#xff1a; //第一种 template <typename T> 函数声明或定义//第二种 template <class T&…...

编程日记 2024/2/20 14:17:28

22-k8s中pod的调度-亲和性affinity

一、概述 在k8s当中&#xff0c;“亲和性”分为三种&#xff0c;节点亲和性、pod亲和性、pod反亲和性&#xff1b; 亲和性分类名称解释说明nodeAffinity节点亲和性通过【节点】标签匹配&#xff0c;用于控制pod调度到哪些node节点上&#xff0c;以及不能调度到哪些node节点上&…...

编程日记 2024/2/20 14:16:27

通俗易懂，Spring Bean生命周期管理的理解

目录 1、实例化阶段 2、初始化阶段 3、销毁阶段 总结 在Spring框架中&#xff0c;Bean是最基本的组件&#xff0c;它是Spring框架中的一个Java对象。 下面通过Bean来理解bean的生命周期&#xff1a; Bean(initMethod "customInit", destroyMethod "cust…...

编程日记 2024/2/20 14:15:26

找座位 - 华为OD统一考试（C卷）

OD统一考试（C卷） 分值： 100分 题解： Java / Python / C++ 题目描述 在一个大型体育场内举办了一场大型活动，由于疫情防控的需要，要求每位观众的必须间隔至少一个空位才允许落座。 现在给出一排观众座位分布图，座位中存在已落座的观众，请计算出，在不移动现有观众座位…...

编程日记 2024/2/20 14:12:23

npm run dev运行出现NODE_OPTIONS=--max_old_space_size=4096 vite --mode dev --host？

问题描述 PS E:\AWorkDataease\DataEase\core\core-frontend> npm run dev dataease0.0.0 dev NODE_OPTIONS–max_old_space_size4096 vite --mode dev --host 0.0.0.0 ‘NODE_OPTIONS’ 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 解决方案 遇到…...

编程日记 2024/2/20 14:11:23

钠离子电池技术

一、什么是钠离子电池 1、发展背景 在现有电池技术中&#xff0c;锂离子电池&#xff08;LIB&#xff09;具有无与伦比的能量密度和多功能性。自其首次商业化以来&#xff0c;便携式设备一直在推动其高速增长。近年&#xff0c;电动汽车和固定式储能应用开始兴起。由于锂离子…...

编程日记 2024/2/20 14:04:17

Qwen3-ForcedAligner-0.6B在法庭庭审记录自动化中的创新应用

Qwen3-ForcedAligner-0.6B在法庭庭审记录自动化中的创新应用 1. 引言 想象一下这样的场景&#xff1a;法庭书记员正紧张地记录着庭审过程&#xff0c;手指在键盘上飞快敲击&#xff0c;却还是跟不上律师和证人的语速。重要细节被遗漏&#xff0c;庭审记录不完整&#xff0c;甚…...

编程新知 2026/4/6 5:30:18

手把手教你使用Qwen3.5推理模型：从部署到实战问答全流程

手把手教你使用Qwen3.5推理模型&#xff1a;从部署到实战问答全流程 1. 模型介绍与特点 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF 是一个基于 Qwen3.5-4B 的推理蒸馏模型&#xff0c;重点强化了结构化分析、分步骤回答、代码与逻辑类问题的处理能力。该版本以 G…...

编程新知 2026/4/6 5:10:14

智能家居中枢：OpenClaw桥接Qwen3.5-9B实现语音控制图片检索

智能家居中枢&#xff1a;OpenClaw桥接Qwen3.5-9B实现语音控制图片检索 1. 为什么需要智能家居中的图片检索 每次家庭聚会后整理照片都让我头疼。手机相册里堆积着上千张照片&#xff0c;当亲友们围坐在客厅想回顾某次旅行时&#xff0c;"找那张在雪山前跳起来的合影&qu…...

编程新知 2026/4/6 4:39:17

OpenClaw智能搜索：Qwen3.5-9B支持的知识检索与摘要

OpenClaw智能搜索&#xff1a;Qwen3.5-9B支持的知识检索与摘要 1. 为什么需要智能搜索助手 作为一个经常需要查阅技术文档的研究者&#xff0c;我每天要花大量时间在不同平台间切换——打开浏览器搜索、翻阅PDF论文、在GitHub仓库里找示例代码。最头疼的是&#xff0c;当需要…...

编程新知 2026/4/6 4:34:54

JAVA无人共享无人机赁柜预约小程序源码代码

JAVA无人共享无人机租赁柜预约小程序源码实现方案采用Uniapp框架开发无人共享无人机租赁柜预约小程序&#xff0c;需整合后端Java服务和前端跨平台技术。以下是核心实现方案&#xff1a;技术栈选择前端&#xff1a;Uniapp Vue.js uView UI后端&#xff1a;Spring Boot MyBat…...

编程新知 2026/4/6 3:11:10

东莞市SEO优化对网站收录有何影响_东莞市SEO优化的常见问题有哪些

东莞市SEO优化对网站收录有何影响 在互联网时代&#xff0c;东莞市的企业和个人网站希望在搜索引擎上获得高排名&#xff0c;是非常重要的目标。搜索引擎优化&#xff08;SEO&#xff09;在这一过程中扮演了关键角色。东莞市SEO优化对网站收录有何影响呢&#xff1f;SEO优化不…...

编程新知 2026/4/6 2:58:55

形式验证实战：5个降低状态空间复杂度的黑科技（附内存控制器案例）

形式验证实战&#xff1a;5个降低状态空间复杂度的黑科技&#xff08;附内存控制器案例&#xff09; 在芯片设计领域&#xff0c;形式验证&#xff08;Formal Verification, FV&#xff09;正逐渐成为确保设计正确性的重要手段。然而&#xff0c;随着设计复杂度的提升&#xff…...

编程新知 2026/4/6 2:28:26

从DH参数到3D动画：手把手教你用SimMechanics在Simulink里‘拼’出一个六轴机械臂

从DH参数到3D动画&#xff1a;手把手教你用SimMechanics在Simulink里‘拼’出一个六轴机械臂 刚接触机器人学的同学常会遇到这样的困境&#xff1a;DH参数表背得滚瓜烂熟&#xff0c;但面对真实的机械臂结构时&#xff0c;那些α、a、d、θ参数突然变得抽象难懂。我在研究生阶段…...

编程新知 2026/4/6 2:00:12

[具身智能-228]：OpenCV的主要功能

OpenCV&#xff08;Open Source Computer Vision Library&#xff09;被誉为计算机视觉领域的“瑞士军刀”。它是一个基于 BSD 许可发行的开源库&#xff0c;提供了超过 2500 个优化算法&#xff0c;涵盖了从底层像素处理到高层视觉理解的完整技术链路。结合最新的技术资料&…...

编程新知 2026/4/6 0:20:50

告别纸上谈兵：用STM32和FreeRTOS动手复现NCRE嵌入式考试里的经典案例

告别纸上谈兵&#xff1a;用STM32和FreeRTOS动手复现NCRE嵌入式考试里的经典案例 当你在NCRE三级嵌入式考试的题库里反复刷到"任务调度优先级"或"I2C时序配置"这类概念时&#xff0c;是否觉得这些知识点就像漂浮在空中的理论碎片&#xff1f;作为经历过这个…...

编程新知 2026/4/6 0:16:50