分享一个玫瑰花的制作小方法，用小小的代码给自己的她送上一个不一样的玫瑰花。
玫瑰花代码由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、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实现，是一个动态的精美的玫瑰花网页，展示效果美观，学习中其代码有一定的深度，主要结合应用了计算机图形创建方法。具有一定难度挑战。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html