製作網站元素對齊（小）網格

所以我有一個網站設計的想法，其中背景是一個小的網格（比如10px）的顏色轉換方塊。理想情況下，我希望網頁上的元素與此網格對齊，但網站網格的大多數指南都圍繞着960網格系統，這對於我的目的來說不夠小。製作網站元素對齊（小）網格

任何人有任何建議如何實現這一目標？此外，如果任何人有任何想法如何做顏色轉換網格的東西，我一定會很感激！

來源

2013-10-01 Adam

請更具體一點。顏色轉換是什麼意思？從長遠來看，你想達到什麼目標？ – Mike

你的意思是你需要正方形作爲你的背景，這會頻繁地改變它的顏色嗎？ –

是的，正是蘇里亞所說的。像[this]（http://www.cs.middlebury.edu/~dwhitehead/Photos/Color%20grid.jpeg），但所有的顏色都在不斷變化。 – Adam

下面是如何創建一個不斷變化的，多色網

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>

來源

2013-10-02 04:23:23 markE

神聖的貓，真棒！我最初的目標是讓顏色輕輕移動和脈動，所以我和你們玩了一下，並以[this]結尾（http://jsfiddle.net/APuzT/）。我會更多地討論它，但我實際上已經開始更喜歡你的了...... – Adam

哦，[讓它工作得更好]（http://jsfiddle.net/APuzT/2/）。當然，我應該已經意識到平均顏色會導致很多棕色... – Adam

製作網站元素對齊（小）網格

回答

相關問題