用HTML5 Canvas创造视觉盛宴——动态彩色线条效果

目录

一、程序代码

二、代码原理

三、运行效果


一、程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!-- 声明文档类型为XHTML 1.0 Transitional --><html xmlns="http://www.w3.org/1999/xhtml"> <!-- 定义文档命名空间为XHTML --><head><title>视觉盛宴</title> <!-- 设置页面标题为“视觉盛宴” --><script type="text/javascript">window.onload = function () { // 当窗口加载完成时执行以下代码C = Math.cos; // 缓存Math对象的cos函数S = Math.sin; // 缓存Math对象的sin函数U = 0; // 设置变量U的初始值为0(用于记录鼠标位置)w = window; // 将window对象缓存在变量w中j = document; // 将document对象缓存在变量j中d = j.getElementById("c"); // 获取id为"c"的Canvas元素,并将其缓存在变量d中c = d.getContext("2d"); // 获取Canvas绘图上下文,并将其缓存在变量c中W = d.width = w.innerWidth; // 设置Canvas的宽度为窗口的宽度,并将其缓存在变量W中H = d.height = w.innerHeight; // 设置Canvas的高度为窗口的高度,并将其缓存在变量H中c.fillRect(0, 0, W, H); // 在Canvas上绘制一个黑色的矩形,覆盖整个画布(默认)c.globalCompositeOperation = "lighter"; // 设置全局合成操作为"lighter",即颜色叠加模式c.lineWidth = 0.2; // 设置线条宽度为0.2c.lineCap = "round"; // 设置线条的端点样式为圆形var bool = 0, t = 0; // 定义两个变量bool和t,初始值分别为0d.onmousemove = function (e) { // 当鼠标在Canvas上移动时执行以下代码if(window.T) { // 如果变量T存在,则执行以下代码if(D==9) { D=Math.random()*15; f(1); } // 如果变量D等于9,则将变量D设置为一个0到15之间的随机数,并调用函数f(1)clearTimeout(T); // 清除计时器T}X = e.pageX; // 获取鼠标的X坐标,并将其缓存在变量X中Y = e.pageY; // 获取鼠标的Y坐标,并将其缓存在变量Y中a=0; // 将变量a的值设置为0b=0; // 将变量b的值设置为0 A = X, // 将变量A的值设置为鼠标的X坐标B = Y; // 将变量B的值设置为鼠标的Y坐标R=(e.pageX/W * 999>>0)/999; // 计算半径R,根据鼠标的X坐标和窗口宽度的比例计算得出r=(e.pageY/H * 999>>0)/999; // 计算半径r,根据鼠标的Y坐标和窗口高度的比例计算得出U=e.pageX/H * 360 >>0; // 计算角度U,根据鼠标的X坐标和窗口高度的比例计算得出,并取整数部分D=9; // 将变量D的值设置为9g = 360 * Math.PI / 180; // 将变量g的值设置为360度对应的弧度值T = setInterval(f = function (e) { // 创建一个定时器T,每16毫秒执行一次函数fc.save(); // 保存当前的绘图状态c.globalCompositeOperation = "source-over"; // 设置合成操作为"source-over",即覆盖模式if(e!=1) { // 如果传入的参数不等于1,则执行以下代码c.fillStyle = "rgba(0,0,0,0.02)"; // 设置填充颜色为半透明黑色c.fillRect(0, 0, W, H); // 在Canvas上绘制一个黑色的矩形,覆盖整个画布(默认)}c.restore(); // 恢复之前保存的绘图状态i = 25; while(i --) { // 循环25次执行以下代码c.beginPath(); // 开始一个新的路径if(D > 450 || bool) { // 如果变量D大于450或bool为真,则执行以下代码if(!bool) { // 如果bool为假,则执行以下代码bool = 1; // 将bool设置为真}if(D < 0.1) { // 如果变量D小于0.1,则执行以下代码bool = 0; // 将bool设置为假}t -= g; // 减小角度t的值D -= 0.1; // 减小半径D的值}if(!bool) { // 如果bool为假,则执行以下代码t += g; // 增加角度t的值D += 0.1; // 增加半径D的值}q = (R / r - 1) * t; // 计算变量q的值,用于创建hypotrochoid(参考:http://en.wikipedia.org/wiki/Hypotrochoid)x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // 计算x坐标的值,根据hypotrochoid公式计算得出y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25)); // 计算y坐标的值,根据hypotrochoid公式计算得出if (a) { // 如果变量a的值存在,则执行以下代码c.moveTo(a, b); // 将当前绘图点移动到变量a和b所表示的位置c.lineTo(x, y) // 绘制一条直线到坐标(x, y)}c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // 设置线条颜色为根据角度U计算得出的彩虹色c.stroke(); // 绘制线条a = x; // 将变量a的值设置为x坐标的值b = y; // 将变量b的值设置为y坐标的值}U -= 0.5; // 减小角度U的值A = X; // 将变量A的值设置为鼠标的X坐标B = Y; // 将变量B的值设置为鼠标的Y坐标}, 16); // 定时器每16毫秒执行一次函数f}j.onkeydown = function(e) { a=b=0; R += 0.05 } // 当按下键盘时执行以下代码,将变量a和b的值都设为0,并将半径R增加0.05d.onmousemove({pageX:300, pageY:290}) // 模拟鼠标移动事件,设置pageX为300,pageY为290}</script></head><body>
<canvas id="c"></canvas> <!-- 创建一个id为"c"的Canvas元素 -->
</body></html>

二、代码原理

该代码利用Canvas的绘图功能和数学函数,创建了一个动态的彩色线条效果,能够根据鼠标的移动和键盘的操作呈现不同的视觉效果。它使用了数学函数来计算线条的坐标和角度,并根据鼠标位置和窗口大小进行动态调整。代码首先获取Canvas元素,并设置其宽度和高度为窗口的宽度和高度。然后设置绘图上下文的属性,如颜色叠加模式、线条宽度和端点样式。在鼠标移动事件中,根据鼠标的位置计算出各种参数,包括半径、角度和颜色。然后使用循环和数学函数绘制彩色线条,线条的位置和颜色会随着时间和鼠标移动而变化。

  1. 声明文档类型为XHTML 1.0 Transitional。
  2. 定义文档命名空间为XHTML。
  3. 设置页面标题为“视觉盛宴”。
  4. <head>标签内包含了一个JavaScript脚本。
  5. JavaScript脚本中,使用了一些全局变量和函数。
  6. window.onload事件处理函数会在窗口加载完成后执行。
  7. 在函数中,缓存了一些常用的对象和元素,如Math对象、window对象、document对象和Canvas元素。
  8. 设置了Canvas的宽高为窗口的宽高。
  9. 使用Canvas的上下文进行绘制操作。
  10. 创建了一个鼠标移动事件处理函数,当鼠标在Canvas上移动时执行一些操作。
  11. 创建了一个定时器,每16毫秒执行一次函数f
  12. 函数f中,保存了当前的绘图状态,并设置了合成操作和样式。
  13. 使用while循环绘制一些形状,并根据鼠标位置和其他参数计算出坐标值。
  14. 更新一些变量的值。
  15. 在按键事件处理函数中,更新了一些变量的值。
  16. 模拟了一次鼠标移动事件。

三、运行效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685223.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python四级考试笔记

Python四级考试笔记【源源老师】 四级标准 一、 理解函数及过程、函数的参数、函数的返回值、变量作用域等概念。 二、 能够创建简单的自定义函数。 三、 理解算法以及算法性能、效率的概念&#xff0c;初步认识算法优化 效率的方法。 四、 理解基本算法中递归的概念。 五、 掌…

C语言---自幂数(“水仙花数”)

1.打印0~100000的自幂数 #include<stdio.h> #include<math.h> int main() {int i 0; for (i 0; i<100000; i){int n 0;int temp i;//判断位数while (temp){n;temp temp / 10;}//每个数字求和temp i;int sum 0;while (temp){sum sum pow(temp % 10, n)…

[office] 如何固定excel单元格的方法 #笔记#微信#微信

如何固定excel单元格的方法 在Excel中录入好数据以后就需要进行统计数据&#xff0c;在有些单元格中的数据不能够改变位置&#xff0c;因此我们需要对特定的单元格进行锁定固定。下面是由小编分享的如何固定excel单元格的方法&#xff0c;供大家阅读、学习。 如何固定excel单元…

掘根宝典之C++多重继承,二义性,虚基类

多重继承派生类 除去一个类从一个基类派生&#xff0c;C还支持一个派生类同时继承多个基类 MI&#xff1a;有多个直接基类的类 1.多重继承派生类的定义 如果已经定义了多个基类&#xff0c;那么定义多重继承的派生类的形式为&#xff1a; class 派生类名:访问标号1 基类名…

【开源】SpringBoot框架开发独居老人物资配送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询社区4.2 新增物资4.3 查询物资4.4 查询物资配送4.5 新增物资配送 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的独居老人物资配送系统&#xff0c;包含了社区档案、…

win7自带截图工具保存失效解决办法

今日发现一台远航技术的win7中自带的截图工具使用时正常&#xff0c;保存图片时没有弹出保存位置的对话窗口&#xff0c;无法正常保存图片。解决方案如下&#xff1a; 1、进入注册表编辑器。开始-搜索程序和文件-输入 regedit 按下回车键&#xff0c;打开注册表&#xff1b; 2、…

多模态基础---BERT

1. BERT简介 BERT用于将一个输入的句子转换为word_embedding&#xff0c;本质上是多个Transformer的Encoder堆叠在一起。 其中单个Transformer Encoder结构如下&#xff1a; BERT-Base采用了12个Transformer Encoder。 BERT-large采用了24个Transformer Encoder。 2. BERT的…

360小工具

有时候不希望打开360安全卫士&#xff0c;但又需要使用它的小工具 小工具目录统一基于360安装目录&#xff0c;一般情况在&#xff1a;C:\Program Files (x86)\360\360Safe 备份还原小工具 C:\Program Files (x86)\360\360Safe\Utils\winrebackup\360WinREBackup64.exe 360LS…

静态时序分析:SDC约束命令set_clock_transition详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 在静态时序分析&#xff1a;SDC约束命令create_clock详解一文的最后&#xff0c;我们谈到了针对理想(ideal)时钟&#xff0c;可以使用set_clock_transition命令直…

MQTT的应用场景和发展方向

随着物联网&#xff08;IoT&#xff09;技术的发展&#xff0c;MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;作为一种轻量级的通信协议&#xff0c;正在被广泛应用于各种物联网场景中。本文将介绍MQTT的应用场景以及未来的发展方向。 一、MQTT的应用场景…

在Linux系统中,yum 和 apt-get 都是用于管理软件包和更新系统的命令行工具,它们的区别是什么?

一、 yum yum 是在基于RPM的Linux发行版&#xff08;如CentOS、RHEL及其衍生版&#xff09;中使用的包管理器。它通过网络连接到软件仓库并自动处理依赖关系来安装、更新和卸载软件包。主要命令包括&#xff1a; 1、更新软件包列表 yum update 2、安装软件包 yum install …

c++堆排序解释

堆排序是一种基于二叉堆数据结构的排序算法。它是利用了堆的性质&#xff0c;即父节点的值总是大于或等于&#xff08;或小于或等于&#xff09;其子节点的值。 堆排序的基本思想是首先将待排序的数组构建成一个最大堆&#xff08;或最小堆&#xff09;&#xff0c;然后将堆的…

数据结构与算法:双向链表

朋友们大家好啊&#xff0c;在上节完成单链表的讲解后&#xff0c;我们本篇文章来对带头循环双向链表进行讲解 双向链表 双向链表、头节点和循环的介绍构建双向链表节点的构建初始化双向循环链表&#xff08;空链表&#xff09;销毁双向链表 链表的打印双向链表头尾的插与删尾插…

Medical Boundary Diffusion Modelfor Skin Lesion Segmentation

皮肤病灶分割的医学边界扩散模型 摘要 由于多尺度边界关注和特征增强模块的进步&#xff0c;皮肤镜图像中的皮肤病变分割最近取得了成功。然而&#xff0c;现有的方法依赖于端到端学习范式&#xff0c;直接输入图像和输出分割图&#xff0c;经常与极其困难的边界作斗争&#…

B端系统升级方案模板:针对美观性和体验性升级(总体方案)

大家好&#xff0c;我是大美B端工场&#xff0c;专注于前端开发和UI设计&#xff0c;有需求可以私信。本篇从全局分享如何升级B端系统&#xff0c;搞B端系统升级的有个整体思维&#xff0c;不是说美化几个图标&#xff0c;修改几个页面就能解决的&#xff0c;这个方案模板&…

laravel_进程门面_再次介绍

文章目录 单次调用进程池调用伪造和断言断言和判断的区别 前面我已经简单介绍了一点process facades&#xff0c;这里再进行一个补充的介绍。 可以也看看前面的介绍。 单次调用 use Illuminate\Support\Facades\Process;$result Process::run(ls -la);return $result->ou…

c++希尔排序解释

希尔排序是一种排序算法&#xff0c;它是插入排序的改进版本。它通过将序列分成多个子序列&#xff0c;对每个子序列进行插入排序&#xff0c;然后逐步减小子序列的长度&#xff0c;直到整个序列有序。 希尔排序的基本思想是&#xff1a;选择一个增量序列&#xff0c;根据增量…

【天枢系列 01】Linux行数统计:命令对决,谁才是王者?

文章目录 01 统计行数命令1.1 wc 命令1.2 grep 命令1.3 sed 命令1.4 awk 命令1.5 Perl 命令 02 Linux的wc命令详细用法2.1 基本语法2.2 主要选项2.3 附加选项2.4 示例用法2.5 注意事项【重要&#xff01;】 03 Linux的grep命令详细用法3.1 基本语法3.2 主要选项3.3 示例用法3.4…

Spring AMQP(3.1.1)设置ConfirmCallback和ReturnsCallback

文章目录 一、起因二、代码1. 定义exchange和queue2. RabbitTemplate3. EnhancedCorrelationData4. 发送消息 环境如下 VersionSpringBoot3.2.1spring-amqp3.1.1RabbitMq3-management 一、起因 老版本的spring-amqp在CorrelationData上设置ConfirmCallback。但是今天却突然发…

非常详细!操作系统【IO核心子系统】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;OS从基础到进阶 &#x1f3c6;&#x1f3c6;本文完整PDF源文件请翻阅至文章底部下载。&#x1f3c6;&#x1f3c6; 1 I/O核心子系统——概述1.1 核心子系统要完成的功能1.1.1 假脱机技术1…