Question

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

任何人对如何实现这一点都有任何建议？另外，如果有人对如何进行变色网格的事情有任何想法，我也非常感谢！

Answer 1

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

enter image description here

您可以使用矩形（一次一个）填充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));
    }

添加一个动画循环，你很高兴！

这是代码和小提琴：http://jsfiddle.net/m1erickson/n2ymp/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();


        var fps = 30;
        function animate() {
            setTimeout(function() {
                requestAnimFrame(animate);

                // Drawing code goes here
                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 / fps);
        }

    // create a random color object {red,green,blue}
    function randomColor(){
        return("#"+Math.floor(Math.random()*16777215).toString(16));
    }


    animate();        

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=600 height=400></canvas>
</body>
</html>

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

1 个答案: