我怎样才能实现这样的主页 <http://www.giantstepsmedias.com/>答案

【问题标题】：How i can achieve home page like this <http://www.giantstepsmedias.com/>我怎样才能实现这样的主页 <http://www.giantstepsmedias.com/>
【发布时间】：2015-05-31 13:32:34
【问题描述】：

我可以使用three.js中的例子来实现背景粒子，

我如何实现他们使用粒子制作的 N 形状以及悬停效果

提前感谢您的回答:)

【问题讨论】：

右击 --> 检查元素。
你不能！如果你真的想让这个 wesbiste 学习 WebGL 和 HTML5 Canvas
@jbutler483 是的，我试过他们用缩小的变量缩小 js，函数名称很难理解，我在那里格式化了 js，它大约 7000 行上帝帮助我很难理解
@Eirenaios 是的，我正在探索three.js，使用 Three.shape() 我可以使用粒子来塑造形状，但我需要更多地探索它
去探索chromeexperiments.com/webgl

标签： css canvas three.js html5-canvas

【解决方案1】：

实现这样的效果并不容易，但如果你想开始，这里有一个简化的演示：http://jsfiddle.net/fezany2x/4/

诀窍是避免刷新整个画布。相反，只需擦除您的粒子并重新绘制它们：

ctx.fillStyle = "#004";
boxes.forEach(
    function(box) {
        ctx.fillRect(box.x - 2, box.y - 2, 8, 8);
    }
);

ctx.fillStyle = "white";
boxes.forEach(
    function(box) {
        ctx.fillRect(box.x, box.y, 4, 4);
    }
);

【讨论】：