所以我有一个网站设计的想法，其中背景是一个由小的(比如 10 像素)变色方 block 组成的网格。理想情况下，我希望页面上的元素与此网格对齐，但是大多数网站网格指南都围绕 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));
}
添加一个动画循环，一切顺利!
这是代码和 fiddle :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>
关于javascript - 使网站元素与(小)网格对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19127403/