分享一个玫瑰花的制作小方法，用小小的代码给自己的她送上一个不一样的玫瑰花。

　　玫瑰花代码由JavaScript实现，JavaScript 作为一种脚本语言， 被发明用于在 HTML 网页上使用，可以给HTML网页增加动态功能，让网页呈现各种特殊效果。

1.简单介绍

　　JavaScript 特点：

  • 可以使用任何文本编辑工具编写，然后使用浏览器就可以执行程序。
  • 是一种解释型脚本语言：代码不进行预编译，从上往下逐行执行，不需要进行严格的变量声明。
  • 要要用来向 HTML 页面添加交互行为。

代码一般格式：　

<html>
<head></head>
<body>

<script>

</script>

</body>
</html>

　　这里需要一些HTML的知识，代码整体结构是基于HTML的，JavaScript 代码放在 <script>……</script> 标签里，

2.具体制作及源码

　　首先创建一个.html文件，如果你有JavaScript 开发经验，拥有自己的编辑器，使用自己的即可，下面再分享一种纯小白的原始文本制作方法，（还没下载安装JavaScript相关的编辑器vim、Visual Studio Code等）

　　新建一个文本文档，菜单栏选择“文件-另存为”设置文件名称，类型。注意，名称后缀为.html，类型为所有文件。

　　创建如下：

　　玫瑰花制作是使用 JavaScript 实现多个不同的形状图来组成一个逼真的玫瑰花。共使用了 31 个形状：24 个花瓣，4 个萼片，2 个叶子和 1 根花茎，其中每一个形状图都用代码进行描绘。

源码：　　

<html>
<head>
<title>Rose making and sharing（玫瑰花）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
</head>
<body style="margin-left:200px">
<div style="text-align: center">
<canvas id="c"></canvas>
</div>
<h1>Looking forward to more exchanges and sharing（玫瑰花）</h1>
<script type="text/javascript">
　　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);

</script>

</body>
</html>

3.总结

　　玫瑰花制作采用JavaScript 实现，是一个动态的精美的玫瑰花网页，展示效果美观，学习中其代码有一定的深度，主要结合应用了计算机图形创建方法。具有一定难度挑战。

　　效果图：

玫瑰花小制作分享-JavaScript（七夕专属浪漫）的更多相关文章

  1. 好程序员web前端分享javascript关联数组用法总结

    好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...

  2. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  3. 微信小程序分享及信息追踪

    我就是个搬用工—来源:https://www.jianshu.com/p/87a75ec2fd53 小程序分享群及信息追踪 需求 页面分享 ​ 小程序页面分享链接增加source参数,值为用户ID加密 ...

  4. 微信小程序分享支持自定义封面图

    微信小程序又发布更新了,刚好昨天支付宝也发布小程序,不能让它抢了风头的节奏.微信小程序主要更新如下:“小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片.同时,我们还开放了获取发票抬头,指 ...

  5. 微信小程序--分享报错（thirdScriptError Cannot read property 'from' of undefined;at pages/index/index page onShareAppMessage function TypeError: Cannot read property 'from' of undefined）

    分享功能: onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res. ...

  6. 微信小程序分享朋友圈的实现思路与解决办法

    实现思路 那么既然小程序没有分享到朋友圈的api,我们怎么实现分享到朋友圈呢,下面我介绍一下实现思路. 既然没有捷径,那就走复杂一点的路线,那就是需要用户手动分享到朋友圈,问题又来了,用户手动分享的话 ...

  7. web前端分享JavaScript到底是什么？特点有哪些？

    web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...

  8. 关于微信小程序分享/转发功能的实现方法

    实现微信小程序分享,可以有两个入口: 1. 小程序右上角菜单自带的分享 这个入口是默认关闭的,需要在当前页面中调用showShareMenu方法,开启分享 onLoad: function () { ...

  9. 小程序分享链接功能 - onShareAppMessage

    onShareAppMessage用法: 只需要在button标签中加入open-type="share",小程序ui就会自动识别分享链接功能 <button data-na ...

随机推荐

  1. springcloud config自动刷新中文乱码问题

    摘录一段网上盛传的,如下: 在使用 spring cloud config 时,如果在 properties 文件里面有中文的话,会出现乱码. 乱码的原因是:spring 默认使用org.spring ...

  2. JVM(一) ---JVM的数据模型

    JVM的逻辑内存模型图 [逻辑内存模型图] ----- JVM内部分区 其实JVM内部不仅仅只有栈和堆 包括 程序计数器 . Java 虚拟机栈 .本地方法栈.Java 堆.方法区等 1. 程序计数器 ...

  3. 【转】php7+IIS 配置环境（windows环境）

    继php7+apache2.4 配置环境(window环境)后,由于B2C项目准备上线:特此小编在阿里云上搭建PHP7环境,为此特写上搭建过程希望正处于搭建php7+IIS(windows环境)中的朋 ...

  4. pypy

    #coding:utf-8 import requests,codecs import json import re import os, shutil import urllib.request, ...

  5. essential

    essential - 必应词典 美[ɪ'senʃ(ə)l]英[ɪ'senʃ(ə)l] n.要点:要素:实质:必需品 adj.完全必要的:必不可少的:极其重要的:本质的 网络基本的:必需的 变形复数: ...

  6. Vue-CLI 标准开发工具-快速准备环境和创建项目

    https://cli.vuejs.org/zh/ 淘宝镜像安装: npm install -g cnpm --registry=https://registry.npm.taobao.org 2.x ...

  7. python清理docker-harbor的多余镜像

    # coding: utf-8 from operator import itemgetter from urllib import parse import requests import date ...

  8. [转][osg]探究osg中的程序设计模式【目录】

    作者:3wwang 原文接连:http://www.3wwang.cn/html/article_104.html 前序 探究osg中的程序设计模式---开篇 探究osg中的程序设计模式---创造性模 ...

  9. Linux 服务器远程管理

    一.Linux 常用远程管理工具 点击下载 二.查看服务器 ip 地址命令 1.通过 ip addr 查看网卡 ip 地址 ip addr 2.通过 ifconfig 查看网卡 ip 地址 最小化安装 ...

  10. Bmp格式图片与16进制的互相转换简解 Python

    BMP TO HEX 首先介绍Github上一个简单的Bmp转成16进制的py: https://github.com/robertgallup/bmp2hex 网上这种例子很多.思路也简单:将bmp ...