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

개발

에드몽단테스 2017. 9. 27. 23:38

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

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

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>