htmt5 그라디언트 및 자바 스크립트를 사용하여 나뭇결을 시뮬레이션

Question

테이블에 체스 보드가 있고 각 사각형이 TD입니다.

어두운 사각형의 목재 질감 배경을 만들기 위해 html5 그라디언트 (및 임의 선택을위한 javascript)를 사용하는 방법은 무엇입니까?

Answer 1

50 % 불투명도로 큰 나무 질감 (원하는대로 변경)을 잡아 무작위로 그립니다. 그 밑에는 무작위로 갈색을 띄며 각 사각형에 독특한 색조가 추가됩니다. 이 모든 것을 조정하여 원하는 효과를 얻을 수 있습니다. 나는 약간의 그라디언트를 엉망으로 만들었고 그들은 바보처럼 보였다. 당신이없는 기본 텍스처와 순수 JS 솔루션을 원하는 경우

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
<style> 
div { 
    width: 100px; height: 100px; margin: 1px; 
} 
div.texture { 
    background: url(http://gallery.hd.org/_exhibits/textures/wood-grain-closeup-1-DHD.jpg); 
    opacity:0.4; filter:alpha(opacity=100); 
} 
</style> 
<script> 
$(function(){ 
    $('div.bg').each(function(){ 

     // make each square a random brown 
     var browns = new Array('CD853F','8B4513','A0522D'); 
     var col = Math.floor(Math.random()*3); 
     $(this).css('background-color',browns[col]); 

     // the dimensions of your texture minus square size 
     var image_width = 500; 
     var image_height = 400; 

     // get a random positions 
     var x = Math.floor(Math.random()*image_width); 
     var y = Math.floor(Math.random()*image_height); 

     // make them negative 
     x = x - (x * 2); 
     y = y - (y * 2); 

     var d = $(this).children('div.texture'); 
     d.css('background-position', x+'px'+' '+y+'px'); 
    }); 
}); 
</script> 
<div class='bg'><div class='texture'></div> 
<div class='bg'><div class='texture'></div>