【情人节福利】JS实现玫瑰花

• 原创来自于博客 http://www.romancortes.com/blog/1k-rose/

• 中文版翻译于http://www.csdn.net/article/2012-02-09/311621 有增改

• 本文详细来自实验楼,如需转载请注明出处。

前言

不得不看的提示
先放压缩过的html代码，把下段代码复制到你的新建的html文件用浏览器打开就能看到一个玫瑰。我们管它叫生产版好了，三步就能完成。

在文档的最后附上一个简单的开发版本，供大家自行定制 :-)

实验楼的虚拟机共享桌面就能让你喜欢的人看到哟~

含苞待放的玫瑰

详细步骤

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

首先，来定义一个采样范围：

<script>
function surface(a, b) { 
    // 使用a和b作为采样范围的参数
    return {
        x: a*50,
        y: b*50
    };
    // 该表面是一个50*50单元区域
}
</script>

然后，编写形状描绘代码：

<script>
var canvas = document.body.appendChild(document.createElement("canvas")),
    context = canvas.getContext("2d"),
    a, b, position;
    
for (a = 0; a < 1; a += .1) {
    for (b = 0; b < 1; b += .1) {
        position = surface(a, b);
        context.fillRect(position.x, position.y, 1, 1);
    }
}
</script>

这时，看到的效果是这样的：

绽放的玫瑰

为了使玫瑰的每个部分在同一时间完成并呈现，还需要添加一个功能，为每部分设置一个参数以返回值来进行同步。并用一个分段函数代表玫瑰的各个部分。比如在花瓣部分，可以使用旋转和变形来创建它们。

虽然表面采样方法是创建三维图形非常著名的、最古老的方法之一，但这种把蒙特卡罗、z-buffer加入到表面采样中的方法并不常见。对于现实生活场景的制作，这也许算不上很有创意，但它简易的代码实现和很小的体积仍令人满意。

快去做一朵与众不同的玫瑰送给你的那个她/他吧！

Happy Valentine's Day

• 本文详细来自实验楼,如需转载请注明出处。