玫瑰花小制作分享-JavaScript（七夕专属浪漫）

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

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

　　1.简单介绍

　　JavaScript特点：

　　可以使用任何文本编辑工具编写，然后使用浏览器就可以执行程序。

　　是一种解释型脚本语言：代码不进行预编译，从上往下逐行执行，不需要进行严格的变量声明。

　　要要用来向HTML页面添加交互行为。

　　代码一般格式：

　　<html>

　　<body>

　　</script>

　　</body>

　　</html>

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

　　2.具体制作及源码

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

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

　　创建如下：

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

　　源码：

　　<html>

　　<head>

　　<title>Rosemakingandsharing（玫瑰花）</title>

　　<metahttp-equiv="Content-Type"content="text/html;charset=gbk">

　　</head>

　　<bodystyle="margin-left:200px">

　　<divstyle="text-align:center">

　　<canvasid="c"></canvas>

　　</div>

　　<h1>Lookingforwardtomoreexchangesandsharing（玫瑰花）</h1>

　　<scripttype="text/javascript">

　　varcanvas=document.getElementsByTagName('canvas')[0];

　　varcontext=canvas.getContext('2d');

　　vara=context;

　　varb=document.body;

　　varc=canvas;

　　document.body.clientWidth;

　　varzBuffer=[];

　　varSIZE=777;

　　canvas.width=canvas.height=SIZE;

　　varh=-350;

　　functionsurface(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};

　　}

　　varA=a*2-1;

　　varB=b*2-1;

　　if(A*A+B*B<1){

　　if(c>37){

　　varj=c&1;

　　varn=j?6:4;

　　varo=.5/(a+.01)+Math.cos(b*125)*3-a*300;

　　varw=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;

　　varo=a*45-20;

　　varw=b*b*h;

　　varz=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

　　};

　　}

　　varo=A*(2-b)*(80-c*2);

　　varw=99-Math.cos(A)*120-Math.cos(b)*(-h-c*4.9)+Math.cos(Math.pow(1-b,7))*50+c*2;

　　varz=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(vari=0;i<10000;i++){

　　varpart=i%46;

　　varc=part/.74;

　　varpoint=surface(Math.random(),Math.random(),c);

　　if(point){

　　varz=point.z;

　　varx=parseInt(point.x*SIZE/z-h);

　　vary=parseInt(point.y*SIZE/z-h);

　　varzBufferIndex=y*SIZE+x;

　　if((typeofzBuffer[zBufferIndex]==="undefined")||(zBuffer[zBufferIndex]>z)){

　　zBuffer[zBufferIndex]=z;

　　varr=-parseInt(point.r*h);varg=-parseInt(point.g*h);

　　varb=-parseInt(point.r*point.r*-80);

　　context.fillStyle="rgb("+r+","+g+","+b+")";

　　context.fillRect(x,y,1,1);

　　}

　　},0);

　　</script>

　　</body>

　　</html>

　　3.总结

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

　　效果图：

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56488.shtml