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

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

news 2026/5/23 16:51:36

目录

一、程序代码

二、代码原理

三、运行效果

一、程序代码

<!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

MoE稀疏激活原理与实战：解密大模型高效计算的核心机制

1. 这不是“参数越多越强”的简单故事&#xff1a;拆解大模型里那个被悄悄藏起来的“开关”你肯定见过这类标题&#xff1a;“GPT-4 参数量突破1.8万亿&#xff01;”、“DeepSeek-R1 达到6710亿参数&#xff01;”——光看数字&#xff0c;像在比谁家粮仓堆得更高。但真正懂行…...

编程新知 2026/5/23 16:07:28

负载开关电路设计：从分立PMOS到集成芯片的选型与应用

1. 负载开关电路&#xff1a;从分立搭建到集成方案的全景解析在电路设计&#xff0c;尤其是电源管理领域&#xff0c;一个常见的需求是控制多个负载的供电通断。想象一下&#xff0c;你的系统里有主控MCU、传感器、通信模块和显示屏&#xff0c;你希望系统休眠时只保留MCU的待机…...

编程新知 2026/5/23 14:10:59

从零到精通：3分钟掌握gdown，让Google Drive下载不再是噩梦

从零到精通&#xff1a;3分钟掌握gdown&#xff0c;让Google Drive下载不再是噩梦 【免费下载链接】gdown Google Drive public file downloader when curl/wget fails. 项目地址: https://gitcode.com/gh_mirrors/gd/gdown 还在为Google Drive大文件下载失败而烦恼吗&a…...

编程新知 2026/5/23 12:31:06

终极指南：5步永久免费解锁Cursor AI Pro功能，告别试用限制

终极指南&#xff1a;5步永久免费解锁Cursor AI Pro功能&#xff0c;告别试用限制 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve r…...

编程新知 2026/5/23 12:26:49

X-TRACK开源GPS自行车码表深度解析：从嵌入式架构到离线地图的完全实战指南

X-TRACK开源GPS自行车码表深度解析&#xff1a;从嵌入式架构到离线地图的完全实战指南 【免费下载链接】X-TRACK A GPS bicycle speedometer that supports offline maps and track recording 项目地址: https://gitcode.com/gh_mirrors/xt/X-TRACK X-TRACK是一款基于A…...

编程新知 2026/5/23 12:17:49

Triton推理服务生产实践：模型部署的可观测性与弹性保障

1. 项目概述&#xff1a;当模型走出Jupyter&#xff0c;真正开始呼吸真实世界的空气“From Notebook to Production: Running ML in the Real World (Part 4)”——这个标题本身就像一句暗号&#xff0c;专为那些在Jupyter里调通了模型、画出了漂亮ROC曲线、却在部署时被现实迎…...

编程新知 2026/5/23 11:26:54

从官方例程到实际项目：AXI Timer v2.0在Zynq平台上的避坑指南与调试实录

从官方例程到实际项目&#xff1a;AXI Timer v2.0在Zynq平台上的避坑指南与调试实录 在嵌入式系统开发中&#xff0c;定时器是最基础也最关键的硬件外设之一。Xilinx提供的AXI Timer v2.0 IP核因其灵活的配置选项和丰富的功能特性&#xff0c;成为Zynq平台上实现精确时间控制的…...

编程新知 2026/5/23 11:22:44

Chrome画中画扩展终极指南：如何实现视频悬浮播放，彻底解放你的多任务能力

Chrome画中画扩展终极指南&#xff1a;如何实现视频悬浮播放&#xff0c;彻底解放你的多任务能力 【免费下载链接】picture-in-picture-chrome-extension 项目地址: https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension 你是否曾经因为需要在不同窗…...

编程新知 2026/5/23 11:16:39

实战指南：5个技巧高效部署BBS-Go开源社区平台

实战指南&#xff1a;5个技巧高效部署BBS-Go开源社区平台 【免费下载链接】bbs-go A lightweight community and Q&A platform for forums, knowledge bases, and discussions. 项目地址: https://gitcode.com/gh_mirrors/bb/bbs-go 想快速搭建一个功能完备的在线社…...

编程新知 2026/5/23 10:17:29

终极字体压缩指南：如何用Fontmin让网页字体加载快3倍

终极字体压缩指南&#xff1a;如何用Fontmin让网页字体加载快3倍 【免费下载链接】fontmin Minify font seamlessly 项目地址: https://gitcode.com/gh_mirrors/fo/fontmin Fontmin是一款基于纯JavaScript开发的字体压缩工具&#xff0c;能够将庞大的字体文件压缩成仅包…...

编程新知 2026/5/23 10:03:53