Javascript 使网站元素与（小）网格对齐

因此，我有一个网站设计的想法，背景是一个网格的小（比如说10px）变色方块。理想情况下，我希望页面上的元素与此网格对齐，但是大多数网站网格指南都围绕960网格系统展开，这对于我来说还不够小

---

有人对如何实现这一目标有什么建议吗？此外，如果有人对如何做颜色变换网格的事情有任何想法，我当然也会非常感激

以下是如何创建一个不断变化的多色网格

可以用矩形（一次一个）填充8x8栅格，如下所示：

    var n=parseInt(Math.random()*64);
    var r=parseInt(n/8);
    var c=n-r*8;
    ctx.fillStyle=randomColor();
    ctx.fillRect(c*20,r*20,20,20);

    function randomColor(){
        return("#"+Math.floor(Math.random()*16777215).toString(16));
    }

您可以生成如下所示的随机颜色：

    var n=parseInt(Math.random()*64);
    var r=parseInt(n/8);
    var c=n-r*8;
    ctx.fillStyle=randomColor();
    ctx.fillRect(c*20,r*20,20,20);

    function randomColor(){
        return("#"+Math.floor(Math.random()*16777215).toString(16));
    }

添加一个动画循环，你就可以开始了

下面是代码和小提琴：

正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var fps=30；
函数animate（）{
setTimeout（函数（）{
请求动画帧（动画）；
//绘图代码在这里
var n=parseInt（Math.random（）*64）；
var r=parseInt（n/8）；
var c=n-r*8；
ctx.fillStyle=randomColor（）；
ctx.fillRect（c*20，r*20,20,20）；
}，1000/帧）；
}
//创建一个随机颜色对象{红、绿、蓝}
函数randomColor（）{
return（“#”+Math.floor（Math.random（）*16777215.toString（16））；
}
制作动画（）；
}); // end$（函数（）{}）；

请更具体一点。你说的颜色变换是什么意思？从长远来看，你想要实现什么？你的意思是你需要正方形作为背景，经常改变它的颜色吗？是的，这正是苏里亚所说的。有点像，但所有的颜色都在不断变化。神圣的猫，太棒了！我最初的目标是让颜色轻轻地移动和跳动，所以我和你的一起玩了一会儿，最后是一个。我还想再搞点别的，但实际上我开始更喜欢你的了…哦。当然，我应该意识到平均颜色会导致很多棕色。。。