html5 canvas 로 네모 안에 빗금 칠하기

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>