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

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

news 2025/7/12 17:42:58

目录

一、程序代码

二、代码原理

三、运行效果

一、程序代码

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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/7/12 6:00:25

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/7/7 10:48:47

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/6/21 13:57:28

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/11 17:14:38

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/7/10 7:05:58

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/6/27 10:06:34

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/6/15 11:28:43

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/6/24 6:21:26

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/7/12 3:44:16

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/7/6 16:08:12