炫酷的HTML代码-程序员宅基地

技术标签: 程序杂记  html  

在这里插入图片描述
在这里插入图片描述

很炫酷的html代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>star</title>
<script type="text/javascript">
window.onload = function () {
     
C = Math.cos; // cache Math objects
S = Math.sin;
U = 0;
w = window;
j = document;
d = j.getElementById("c");
c = d.getContext("2d");
W = d.width = w.innerWidth;
H = d.height = w.innerHeight;
c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
c.globalCompositeOperation = "lighter";  // switch to additive color application
c.lineWidth = 0.2;
c.lineCap = "round";
var bool = 0, 
t = 0; // theta
d.onmousemove = function (e) {
     
if(window.T) {
     
if(D==9) {
      D=Math.random()*15; f(1); }
clearTimeout(T);
}
X = e.pageX; // grab mouse pixel coords
Y = e.pageY;
a=0; // previous coord.x
b=0; // previous coord.y 
A = X, // original coord.x
B = Y; // original coord.y
R=(e.pageX/W * 999>>0)/999;
r=(e.pageY/H * 999>>0)/999;
U=e.pageX/H * 360 >>0;
D=9;
g = 360 * Math.PI / 180;
T = setInterval(f = function (e) {
      // start looping spectrum
c.save();
c.globalCompositeOperation = "source-over"; // switch to additive color application
if(e!=1) {
     
c.fillStyle = "rgba(0,0,0,0.02)";
c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
}
c.restore();
i = 25; while(i --) {
     
c.beginPath();
if(D > 450 || bool) {
      // decrease diameter
if(!bool) {
      // has hit maximum
bool = 1;
}
if(D < 0.1) {
      // has hit minimum
bool = 0;
}
t -= g; // decrease theta
D -= 0.1; // decrease size
}
if(!bool) {
     
t += g; // increase theta
D += 0.1; // increase size
}
q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // center on xy coords
y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
if (a) {
      // draw once two points are set
c.moveTo(a, b);
c.lineTo(x, y)
}
c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
c.stroke();
a = x; // set previous coord.x
b = y; // set previous coord.y
}
U -= 0.5; // increment hue
A = X; // set original coord.x
B = Y; // set original coord.y
}, 16);
}
j.onkeydown = function(e) {
      a=b=0; R += 0.05 }
d.onmousemove({
     pageX:300, pageY:290})
}


</script>
</head>

<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
<canvas id="c"></canvas>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/baidu_34971492/article/details/116091504

智能推荐

git commit提交报错subject may not be empty [subject-empty]-程序员宅基地

文章浏览阅读2.3w次,点赞10次,收藏7次。今天在sourcetree提交写好的代码突然报错,显示如下错误: subject may not be empty [subject-empty] type may not be empty [type-empty]_subject may not be empty

FS102WS是一款用于 LED 灯光开关控制及亮度调节的触摸IC-程序员宅基地

文章浏览阅读187次。每次短按触摸,依OPT1/2/3选择不同,灯光亮度按[高亮度→>中亮度->低亮度->灭]依次循环变化,或[低亮度->中亮度->高亮度->灭]依次循环变化。FS102WS是一款用于 LED 灯光开关控制及亮度调节的触摸IC,支持单通道触摸输入、单路 PWM 输出,可在有介质(如玻璃、亚克力、塑料、陶瓷等)隔离保护的情况下实现触摸功能,可靠性非常高,灯光无闪频。未断电短按开灯后第一次长按调光的方向由之前记忆的亮度值来决定,若记忆亮度值大于45%,则向下调光:若记忆亮度值小于45%,则向上调光。

Python办公自动化实战 09 | Python-docx库:Python与Word的完美结合_ 如何在Word中生成表格?把Python办公自动化进行到底-程序员宅基地

文章浏览阅读911次。本小节主要演示了怎么向Word文档中创建表格并插入数据,并且对表格格式做个性化的设定。_python与word的完美结合

MySQL:从库binlog 使用mysqlbinlog stop-datetime过滤问题-程序员宅基地

文章浏览阅读2k次。更多主从同步相关可以参考我的《深入理解MySQL主从原理》专栏:本文是一个朋友问我问题。从库使用mysqlbinlog..._mysql stop-datetime

SAP入门经验_sap经验-程序员宅基地

文章浏览阅读8k次,点赞18次,收藏30次。SAP入门的经验SAP业务顾问入门确实起点比较高,这在我最开始入门的时候不以为然,但是随着学习的深入,才发现原来老师们说的是真的!简单说一下我自己的入门经历,我是本科是工业工程(IE)专业的,如果有了解的肯定知道这个专业是干什么的,步入这个行业我才发现我所学的专业知识都挺有用的,特别是PP模块,我本身在大学就经常参加一些生产优化案例竞赛,对于排产,MRP等信息有了初步的了解,更重要的是IE专业培养了我的优化意识我感觉这是我的一大笔财富。好了步入正题,说一下我的入门经历:最开始公司培训讲了很多模块的知_sap经验

C++中派生类成员变量和基类成员变量同名问题_c++ 在派生类函数中修改基类同名变量-程序员宅基地

文章浏览阅读8.8k次,点赞5次,收藏18次。1.当派生类存在与基类同名的成员变量时候,派生类的成员会隐藏基类成员,但派生类中存在基类成员的拷贝,要显示的访问BASE::date member#include &lt;iostream&gt;using namespace std;class Base{ public: int a = 10; void print() { cout &..._c++ 在派生类函数中修改基类同名变量

随便推点

【计算机毕设选题】基于机器视觉的二维码识别检测 - opencv 二维码 识别检测 机器视觉_基于opencv的二维码识别课程设计-程序员宅基地

文章浏览阅读733次,点赞19次,收藏23次。今天学长向大家介绍一个机器视觉的毕设项目,二维码 / 条形码检测与识别基于机器学习的二维码识别检测 - opencv 二维码 识别检测 机器视觉。_基于opencv的二维码识别课程设计

互联网医院智慧医院系统_互联网可访问的医院系统有哪些-程序员宅基地

文章浏览阅读8.5k次。什么是互联网医院?我们来看一下百度百科的定义“互联网医院系统”带有在线问诊、随访、慢病管理等功能,它有实体医院作强有力的支撑,线上方便病人,就是简单的问题不需要到医院,在网上就可以进行。可见在线问诊、随访、慢病管理是互联网医院的核心功能,下面我们来逐个分析一下在线问诊:一般是图文问诊、视频问诊、语音问诊、电话问诊几种问诊方式,多种方式方便医患在线沟通随访:医生可以对患者发起线上随访,患者可在线填写随访表单,后台可统计随访结果慢病管理:能对糖尿病、高血压等常见慢性病进行健康管理,医生可以随时查看病人_互联网可访问的医院系统有哪些

IOS开发 生成app图标_ios app图标生成-程序员宅基地

文章浏览阅读1.6k次。IOS开发,给app设置图标_ios app图标生成

[Python] Django 报错记录与解决_importerror: cannot import name 'iterable' from 'c-程序员宅基地

文章浏览阅读6.7k次,点赞3次,收藏17次。配置记录pycharm中打开Django项目并配置虚拟环境运行项目;将Django项目全局配置文件用统一的包进行管理;配置jinja2模板引擎;补充 Jinja2 模板引擎环境报错记录ImportError;You must set settings.ALLOWED_HOSTS if DEBUG is False;'cryptography' package is required;ImproperlyConfigured_importerror: cannot import name 'iterable' from 'collections

JSON文本互转及JsonNode,ObjectNode,ArrayNode简单理解-程序员宅基地

文章浏览阅读5.7k次。JSON文本互转及JsonNode,ObjectNode,ArrayNode简单理解``JsonNode是Jackson中为了处理JOSN文本的树模型(tree model)。可以将JSON文本转成JsonNode,也可以将JsonNode转成JOSN文本。。ObjectNode和ArrayNode都是JsonNode类的扩展,不同的是JsonNode是只读的,而。..._arraynode

测试理论-程序员宅基地

文章浏览阅读2.6w次,点赞10次,收藏71次。一、基本概念定义:软件测试是为了发现错误而执行程序的过程,“寻找错误”是测试的目的 使用人工或自动手段运行或测定某个系统的过程,其目的在于检验它是否满足规定的需求或是否弄清预期结果与实际结果之间的差别 软件测试是一种重要的软件质量保证活动,测试过程中的活动包括分析软件和运行软件,是在软件投入运行前,对软件需求分析、设计规格说明和编码的最终复审,是软_测试理论

推荐文章

热门文章

相关标签