1

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

有人对如何实现这一目标有任何建议吗？此外，如果有人对如何进行颜色变换网格有任何想法，我也非常感激！

4

1 回答 1

0

这是创建不断变化的多色网格的方法

在此处输入图像描述在此处输入图像描述

您可以使用矩形（一次一个）填充 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>
于 2013-10-02T04:23:23.460 回答