3D玫瑰

最新推荐文章于 2024-04-29 17:01:02 发布

bingxinBK

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量741

点赞数

分类专栏：前台小知识文章标签： javascript

本文链接：https://blog.csdn.net/bingxinBK/article/details/52329883

版权

前台小知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title> Hana </title>

</head>

<body>

<script type="text/javascript">
//定义画板
var canvas = document.body.appendChild(document.createElement("canvas")),
context = canvas.getContext("2d"),
//玫瑰的旋转角度
radi = 0;
//简写Math及Math中的cos(),sin(),pow()函数
with(m=Math)
C=cos,S=sin,P=pow;
//获取当前图像对象，大小为256*256
var obj=context.getImageData(0,0,canvas.height=width=256,width);
//图像对象中的数据
var Data=obj.data;
//存储所有像素点
var Pointset={};
//存储像素点包含的坐标、色彩
var Point=[];
//对p，前三项为坐标，后三项为色彩
function pushPoint(p){
//人工添加p[5]=0
p[5]=0;
Q=0;
//将像素信息存入数组(r,g,b,alpha)，然后将该数组压入Points
for(j=3;j--;)
//若p[j]/4+Q*256位置未存储像素点，则放入该点
if(!Pointset[Q=(p[j]>>=2)+Q*width])
Pointset[Q]=Point.push(p);
}
//以蒙特卡罗方法描绘图像
setInterval(function()
{
//每次随机描绘1000个点
for(i=1e3;i--;)
{
//系数（1.35）影响花萼和花瓣的数量
c=i%42*1.35;
//T初始为0,angle为弧度
angle=T;
//绝对值为0-1的随机浮点数
T=m.random();
A=angle*2-1;
B=T*2-1;
//花梗
pushPoint([S(angle*7)*(o=13+5/(.2+P(T*4,4)))-T*50,
T*550+500,
(l=C(angle*7))*o,
(G=l/7+.5)-T/4,
G]);
if(A*A+B*B<1)
if(c>32)
{
//叶片
pushPoint([(o=.5/(angle+.01)-angle*300)*C(n=(j=c&1)?6:4)+(w=T*-width)*S(n)+j*630-390,
o*S(n)-w*C(n)+999-j*350,
C(B+A)*99-j*50,
(P(l=1-B*B,width*6)+C(angle+T)+P(C((o*angle+o+(B>0?w:-w))/25),30)*l-angle+2)/5,
o/1e3+.7-o*w/3e5]);
//花萼
pushPoint([(o=angle*45-20)*C(l=c/.86)+(w=T*T)*width*S(l),
C(B/2)*99-w*T*60+436,
o*S(l)-w*width*C(l),
w*.3+.3,
T*.7]);
}
//花瓣
else
pushPoint([(o=A*(2-T)*(80-c*2))*C(c)-(w=99-C(A)*120-C(T)*(width-c*5)+C(P(1-T,7))*50+c*2)*S(c),
(B*2-C(P(T,7))+9)*50,
o*S(c)+w*C(c),
//1-T*.7,
//P(1-T,9)/4
//替换了原来的参数,生成黄色花瓣
1-T*.6,
.7/(angle+.01)
]);
}
//清空画布
var canv=[];
//r,g,b,alpha都变为255
for(i=0;i<canvas.height*width;canv[i++]=width)
for(l=4;l--;)
Data[i*4+l]=255;
//描绘玫瑰
context.font="bold 30px sans-serif",context.fillText(Point.length,93,54);
for(cos=C(radi),sin=S(radi),j=Point.length;j--;)
{
//像素点信息传给k，[0],[1],[2]为坐标，[3],[4],[5]为色彩
k=Point[j],
x=k[0]*cos+k[2]*sin+99,
z=k[0]*sin-k[2]*cos,
y=k[1]-z*.4<<8;
for(i=3;i--;)
{
var arr = [0,1,width];
//投影
var p=y-~x+arr[i];
//z缓冲，若z小于缓冲数组canv中的值，该点距离镜头较近，覆盖
if(z<canv[p])
for(canv[p]=z,l=3;l--;)
Data[p*4+l]=k[l+3]*width;
}
}
//将图像放回画布
context.putImageData(obj,0,0);
//进行旋转
radi+=.03;
},T=0);
</script>
</body>

</html>

bingxinBK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D玫瑰

Hana //定义画板var canvas = document.body.appendChild(document.createElement("canvas")), context = canvas.getContext("2d"), //玫瑰的旋转角度 radi = 0;//简写Math及M
复制链接

扫一扫