달력

3

« 2019/3 »

  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  
  •  
  •  
2017.09.27 23:38

html5 canvas 로 네모 안에 빗금 칠하기 개발2017.09.27 23:38

hmlt5의 canvas를 이용하여 특정영역을 빗금칠한 것 같은 효과를 주기 위한 코드이다.

시행착오를 많이 거쳤기 때문에 주석을 달지 못했다. x, y 의 좌표가 10의 배수가 아니거나 width, height 가 10의 배수가 아닌 경우 테스트를 많이했지만, 아직 테스트는 더 필요하다.

<canvas id="canvas" width="300" height=300"></canvas>

<script>

var canvas = document.getElementById('canvas').getContext('2d');


function drawArea(x, y, width, height, rectColor, lineColor) {

canvas.strokeStyle = lineColor;


var startX = x;

var startY = y;

var endX = x;

var endY = y;

var max = (width + height) / 10;


for(var i=0; i<max-1; i++) {

if(startX >= width + x) {

startX = width + x;

startY += 10;

} else {

var oldX = startX;

startX += 10;

if(startX > x + width) {

startX = width + x;

var tmp = startX - oldX;

startY += 10;

startY -= tmp;

}

}

if(endY >= height + y) {

endY = height + y;

endX += 10;

} else {

var oldY = endY;

endY += 10;

if(endY > height + y) {

endY = height + y;

var tmp = endY - oldY;

endX += 10;

endX -= tmp;

}

}

canvas.moveTo(startX , startY);

canvas.lineTo(endX, endY);

canvas.stroke();

}

canvas.strokeStyle = rectColor;

canvas.strokeRect(x, y,width, height);

}

drawArea(3, 11, 258, 171, 'rgb(255, 0, 255)', 'rgb(0, 0, 255)');


</script> 


Posted by 에드몽단테스