html玫瑰花ui,玫瑰花小制作分享-JavaScript(七夕专属浪漫)
分享一个玫瑰花的制作小方法,用小小的代码给自己的她送上一个不一样的玫瑰花。
玫瑰花代码由JavaScript实现,JavaScript 作为一种脚本语言, 被发明用于在 HTML 网页上使用,可以给HTML网页增加动态功能,让网页呈现各种特殊效果。
1.简单介绍
JavaScript 特点:
可以使用任何文本编辑工具编写,然后使用浏览器就可以执行程序。
是一种解释型脚本语言:代码不进行预编译,从上往下逐行执行,不需要进行严格的变量声明。
要要用来向 HTML 页面添加交互行为。
代码一般格式:
这里需要一些HTML的知识,代码整体结构是基于HTML的,JavaScript 代码放在 标签里,
2.具体制作及源码
首先创建一个.html文件,如果你有JavaScript 开发经验,拥有自己的编辑器,使用自己的即可,下面再分享一种纯小白的原始文本制作方法,(还没下载安装JavaScript相关的编辑器vim、Visual Studio Code等)
新建一个文本文档,菜单栏选择“文件-另存为”设置文件名称,类型。注意,名称后缀为.html,类型为所有文件。
创建如下:
玫瑰花制作是使用 JavaScript 实现多个不同的形状图来组成一个逼真的玫瑰花。共使用了 31 个形状:24 个花瓣,4 个萼片,2 个叶子和 1 根花茎,其中每一个形状图都用代码进行描绘。
源码:
Rose making and sharing(玫瑰花)
Looking forward to more exchanges and sharing(玫瑰花)
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
var a = context;
var b = document.body;
var c = canvas;
document.body.clientWidth;
var zBuffer = [];
var SIZE = 777;
canvas.width = canvas.height = SIZE;
var h = -350;
function surface(a, b, c) {
if (c > 60) {
return {
x : Math.sin(a * 7) * (13 + 5 / (.2 + Math.pow(b * 4, 4))) - Math.sin(b) * 50,
y : b * SIZE + 50,
z : 625 + Math.cos(a * 7) * (13 + 5 / (.2 + Math.pow(b * 4, 4))) + b * 400,
r : a * 1 - b / 2, g : a };
}
var A = a * 2 - 1;
var B = b * 2 - 1;
if (A * A + B * B < 1) {
if (c > 37) {
var j = c & 1;
var n = j ? 6 : 4;
var o = .5 / (a + .01) + Math.cos(b * 125) * 3 - a * 300;
var w = b * h;
return {
x : o * Math.cos(n) + w * Math.sin(n) + j * 610 - 390,
y : o * Math.sin(n) - w * Math.cos(n) + 550 - j * 350,
z : 1180 + Math.cos(B + A) * 99 - j * 300,
r : .4 - a * .1 + Math.pow(1 - B * B, -h * 6) * .15 - a * b * .4 + Math.cos(a + b) / 5 + Math.pow(Math.cos((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), g : o / 1e3 + .7 - o * w * 3e-6
};
}
if (c > 32) {
c = c * 1.16 - .15;
var o = a * 45 - 20;
var w = b * b * h;
var z = o * Math.sin(c) + w * Math.cos(c) + 620;
return {
x : o * Math.cos(c) - w * Math.sin(c),
y : 28 + Math.cos(B * .5) * 99 - b * b * b * 60 - z / 2 - h,
z : z,
r : (b * b * .3 + Math.pow((1 - (A * A)), 7) * .15 + .3) * b,
g : b * .7
};
}
var o = A * (2 - b) * (80 - c * 2);
var w = 99 - Math.cos(A) * 120 - Math.cos(b) * (-h - c * 4.9) + Math.cos(Math.pow(1 - b, 7)) * 50 + c * 2;
var z = o * Math.sin(c) + w * Math.cos(c) + 700;
return {
x : o * Math.cos(c) - w * Math.sin(c),
y : B * 99 - Math.cos(Math.pow(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z : z,
r : (1 - b / 1.2) * .9 + a * .1,
g : Math.pow((1 - b), 20) / 4 + .05
};
}
}
setInterval(function() {
for ( var i = 0; i < 10000; i++) {
var part = i % 46;
var c = part / .74;
var point = surface(Math.random(), Math.random(), c);
if (point) {
var z = point.z;
var x = parseInt(point.x * SIZE / z - h);
var y = parseInt(point.y * SIZE / z - h);
var zBufferIndex = y * SIZE + x;
if ((typeof zBuffer[zBufferIndex] === "undefined") || (zBuffer[zBufferIndex] > z)) {
zBuffer[zBufferIndex] = z;
var r = -parseInt(point.r * h); var g = -parseInt(point.g * h);
var b = -parseInt(point.r * point.r * -80);
context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
context.fillRect(x, y, 1, 1);
}
}
}
}, 0);
3.总结
玫瑰花制作采用JavaScript 实现,是一个动态的精美的玫瑰花网页,展示效果美观,学习中其代码有一定的深度,主要结合应用了计算机图形创建方法。具有一定难度挑战。
效果图:
html玫瑰花ui,玫瑰花小制作分享-JavaScript(七夕专属浪漫)相关推荐
- html制作玫瑰代码,玫瑰花小制作分享-JavaScript(七夕专属浪漫)
分享一个玫瑰花的制作小方法,用小小的代码给自己的她送上一个不一样的玫瑰花. 玫瑰花代码由JavaScript实现,JavaScript作为一种脚本语言,被发明用于在HTML网页上使用,可以给HTML网 ...
- 微信小程序:2022虎年背景全新UI头像框制作
2021马上就结束了,2022也马上到来了,虎年降至 给大家带来一款以2022虎年为主的一款头像制作小程序源码 前两天小编也分享过一款虎年头像框的小程序 不过那款为了美观,所以就没有给那款小程序添加流 ...
- 小程序源码:2022虎年背景全新UI头像框制作
2021马上就结束了,2022也马上到来了,虎年降至 给大家带来一款以2022虎年为主的一款头像制作小程序源码 前两天小编也分享过 一款虎年头像框的小程序 不过那款为了美观,所以就没有给那款小程序添加 ...
- UI界面如何制作?这些版式设计小技巧收藏好!
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 UI界面如何制作?这些版式设计小技巧收藏好!在做UI界面的时候,很多时候我们需要去看很多的产品进行竞品分析.市场调研 ...
- 小程序源码:简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码 内包含了N种模板制作,另外并有大分类 另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了 而且流量主还不是单一种: Banner 激励视频 视频广告 多格子广告 横 ...
- 微信小程序:简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码 内包含了N种模板制作,另外并有大分类 另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了 而且流量主还不是单一种: Banner 激励视频 视频广告 多格子广告 横 ...
- 微信小程序:2022虎年背景全新UI头像框制作带安全检测
不知不觉已经2022年了,记得上一次发布这款小程序还在2021 感叹时间过得还是挺快的,为什么小编又要重新发布一次这个小程序呢 因为有很多小伙伴说之前的没有安全内容检测,然后审核过不去 所以小编今天就 ...
- 小程序源码:2022虎年背景全新UI头像框制作微信小程序源码下载-多玩法安装简单
内包含了虎年虎娃多种分类头像框模板,全是和2022虎年有关 每一种分类都包含了多种模板制作 虎娃的小编个人感觉那个卡通也是挺可爱的! 另外整个小程序的背景UI都是以虎年为背景,所以总体的感觉还是很不错 ...
- 2022虎年背景全新UI头像框制作带安全检测微信小程序源码下载支持多种流量主
这个只是在之前的哪一款的基础上面加一个安全内容检测 至于界面UI什么的基本是没有变化的,只是让大家审核能过得去 内包含了虎年虎娃多种分类头像框模板,全是和2022虎年有关 每一种分类都包含了多种模板制 ...
- 【小程序源码】2022虎年背景全新UI头像框制作带安全检测
有很多小伙伴说之前的没有安全内容检测,然后审核过不去 所以小编今天就重新发布一下,这个只是在之前的哪一款的基础上面加一个安全内容检测 至于界面UI什么的基本是没有变化的,只是让大家审核能过得去 内包含 ...
最新文章
- 编码不规范,同事真的会两行泪?
- 接口的特点及,抽象类与接口的区别
- Denoising DNA deep sequencing data—high-throughput sequencing errors and their correction
- 概率论快速学习03:概率公理补充
- python matplotlib画折线图出现连线混乱_python使用matplotlib模块绘制多条折线图、散点图...
- ec6110刷linux系统,华为EC6110-T优盘强刷固件升级包及刷机教程
- Jenkins打包之本地远程自动打包教程
- MOXy的对象图和动态JAXB
- c++中的函数适配器
- 月薪3万的python程序员都看了这本书
- as导入项目没有gradle文件夹_【Studio】导入其他项目卡死
- qt文件怎么设置全局变量_QT编程之——使用全局变量
- Haar特征与积分图
- 如何用“云崽(Yunzai)”搭建一个原神群机器人(转载)
- Qt创建Qt Designer自定义控件及使用
- 华为手机非华为电脑NFC一碰传使用
- 虚拟机Ubuntu21.04全屏显示
- 十年职场软件工程师感悟
- 世界时间查询服务器(一)
- 【数据结构】- 教你一步完美应对面试官让你10分钟内实现带头双向循环链表(下)
热门文章
- Unity2019最新ECS架构开发MMO游戏笔记更新计划
- 2017小象学院Python数据分析与挖掘
- 计算机的奇迹英语作文,高中英语作文范文:奇迹
- Swagger、Rap与Yapi接口管理
- 戏法人人会做, 巧妙各有不同。 你文不会之乎者也, 武不能安国定邦。 只会些鸡鸣狗盗, 雕虫小伎。 智者顺时而谋, 愚者逆理而动。 我接受你的挑战!
- python 统计excel表格_利用python对excel计数,并输出结果 python返回excel中sheet的数量...
- WORD之文字处理之页眉页脚的设置
- Linux修改文件句柄数及vm.max_map_count、stack size
- 常见数据收集网站-数学建模(二十二)
- limits.conf文件_Limits.conf文件限制用户,在Linux中通过示例进行处理