[함수] Html + jquery 로 삼각형 그리기

[함수] Html + jquery 로 삼각형 그리기

(추가) 이런데 사용됩니다 ㅋㅋ


직접만든 도구 설명 이나 필요한곳에 응용할수있습니다.

사용법은 연결 참조하세요 간단합니다~

예제: http://jsbin.com/jekokerumaba/1/edit?html,css,js,output
둥근모서리판: http://jsbin.com/jekokerumaba/2/edit
예제결과 연결: http://jsbin.com/jekokerumaba/1

-----------

$("#canvas").append( create_triangle(20,15) );
 
function create_triangle(width, height, options){
      
      options = options || {};
      var color = options['color'] || false ; // 삼각형 색상값
      var outline = options['outline'] || false ; // 삼각형 외곽선 색상값
      var floor_line = options['floor_line'] || false; // 삼각형의 밑변 외곽선 표시여부
      var wrapper_class = options['wrapper_class'] || false; // 삼각형을 감싸는 div의 클래스명
      var background_offset_x = options['background_offset_x'] || 0; // 배경 x 위치 오프셋
      var background_offset_y = options['background_offset_y'] || 0; // 배경 y 위치 오프셋
      
      var $parent = $("<div></div>");
      $parent.css("height",height);
      $parent.css("width",width);
      $parent.addClass("triangle");
      if( wrapper_class ){
          $parent.addClass(wrapper_class);
      }
 
 
 
      for(var x = 0; x < width; x++ ){ // x
          for( var y = 0 ; y < height; y++ ){ // y
             
              var y_pos_ratio = y/height;
              var this_location_dot_count = y_pos_ratio * width;
              var half_width = width/2;
              var half_dot_count = this_location_dot_count/2;
              
              if( half_width - half_dot_count < x && x < half_width + half_dot_count ){
                  var $dot = $("<div></div>");
                  $dot.css("height",1);
                  $dot.css("width",1);
                  $dot.css("position","absolute");
                  $dot.css("top",y);
                  $dot.css("left",x);
                  $dot.css("background-position", (-x + background_offset_x) + "px " + (-y + background_offset_y) + "px");
 
                  if( Math.ceil(half_width - half_dot_count)  == x ||
                      Math.floor(half_width + half_dot_count)  == x ||
                      ( height-1 == y && floor_line ) ) {
                    if( outline ){
                        $dot.css("background-color",outline);
                    }
 
                    $dot.addClass("outline");
                  } else {
                    if( color ){
                        $dot.css("background-color",color);
                    }
 
                      $dot.addClass("inner");
                  }
                  
                  $($parent).append($dot);
              }
              
          }
      }
      
      return $parent;
  }