캔버스에 박스 그리기

Html상 Canvas 에 박스를 그려주는 자바스크립트

 

박스 4개 예시

 

• 테두리가 있거나 없거나
• 1px 짜리 테두리도 깔끔하게
• 여러 박스 겹침 가능
• 채우기 색상과 테두리 색상에 투명도 적용 가능

캔버스 id 가 canvas 라고 가정했을때...

function drawBox2canvas(ctx, x, y, w, h, color, borW, borColor) {
  if (!borW) { borW = 0; }  
  ctx.fillStyle = color;
  ctx.fillRect(x+(borW), y+(borW), w-(borW*2), h-(borW*2));
  if (borW) {
    ctx.lineWidth = borW;
    ctx.strokeStyle = borColor;
    ctx.strokeRect(x+(borW/2), y+(borW/2), w - borW, h - borW);
  }  
}
 
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
 
drawBox2canvas(context, 0, 0, 100, 100, "rgba(125,0,0,0.5)", 10, "rgba(125,0,0,0.7)");
drawBox2canvas(context, 10, 70, 80, 100, "rgba(0,0,125,0.5)");
drawBox2canvas(context, 110, 20, 100, 100, "#cccccc", 9, "orange");
drawBox2canvas(context, 50, 50, 100, 100, "rgba(0,125,0,0.5)", 1, "black");

사용법: drawBox2canvas() 에 아래 변수들을 전달하며 실행하기

 

(context, posX, posY, width, height, fill-color, border-width, border-color)

변수 설명: (캔버스의 컨텍스트, x좌표, y좌표, 넓이, 높이, 채우기색상, 테두리크기, 테두리색상)

 

참고: 박스의 넓이/높이는 테두리를 포함함 (css 에 Box-sizing: border-box 를 적용했을때와 같이)

 

아래는 예시: (Result 탭을 눌러보자)

https://jsfiddle.net/alikong/dor027Ly/